Weex UniApp：Nvue 全局弹窗的优雅解决方案

前端

2023-12-27 05:08:44

Nvue 页面弹窗的痛点

在 Weex UniApp 的 Nvue 项目中，如果需要在某个页面显示一个弹窗，通常的做法是直接在该页面中定义一个弹窗组件并进行显示。然而，这种做法存在一些痛点：

代码冗余： 每个页面都需要编写相同的弹窗组件代码，导致代码冗余。
维护困难： 当需要修改弹窗组件时，需要逐个页面修改，维护困难。
全局调用受限： 弹窗组件只能在定义它的页面中使用，无法在其他页面中直接调用。

优雅的全局弹窗解决方案

为了解决上述痛点，我们提出一种优雅的全局弹窗解决方案。该解决方案的核心思想是将弹窗组件封装为一个公共方法，并在主文件中引入该公共方法。这样，任何 Nvue 页面都可以通过调用这个公共方法来显示弹窗，而无需在页面中定义弹窗组件。

实现步骤

新建 Nvue 页面 popup.nvue

首先，我们需要创建一个 Nvue 页面 popup.nvue，用于实现弹窗组件。该页面可以包含弹窗的结构和样式。

封装为公共方法

接下来，我们将 popup.nvue 页面封装为一个公共方法。我们可以创建一个 until.js 文件，并在该文件中定义一个名为 showPopup 的方法。showPopup 方法接收一个参数，该参数是一个对象，包含弹窗的标题、内容和按钮。

在 main.js 中引入此文件

在 main.js 文件中，我们需要引入 until.js 文件。这样，我们就可以在任何 Nvue 页面中访问 showPopup 方法。

在 Nvue 页面中使用

在需要显示弹窗的 Nvue 页面中，我们可以通过调用 showPopup 方法来显示弹窗。例如，在某个页面中，我们可以这样调用 showPopup 方法：

this.$uni.$emit('showPopup', {
  title: '标题',
  content: '内容',
  buttons: [
    {
      text: '确定',
      color: '#000000',
      handler: () => {
        // 点击确定按钮后的处理逻辑
      }
    },
    {
      text: '取消',
      color: '#cccccc',
      handler: () => {
        // 点击取消按钮后的处理逻辑
      }
    }
  ]
})