/ WEB  

优雅的自定制弹窗(Vue)

在网页开发中,弹窗是一种高效人机交互方式。适度的弹窗可以将有效的信息快速的展示给用户,辅助用户减少决策或操作时间。一方面可以简化操作流程,提升效率。另一方面还能降低各个组件间的耦合度。恰当封装的弹窗甚至能够有较高的复用性,避免开发过程中复制粘贴造成的代码冗余,提升代码效率。

写在前面

在讲如何优雅的实现弹窗之前,我们先大概的总结一下我们一般使用网页弹窗的场景。

  • 场景一:一些重要信息的展示或用户请求的主要信息展示。如:在物流管理中,快速查看物流详情的弹窗。
  • 场景二:重要操作的二次确认。如:‘确认某个重要操作是否执行’
  • 场景三:包含一些简单的输入框、选择框。用于从用户获取一些简单的数据。
  • 场景四:提供一个列表,供用户按需的选择一个或多个项目。为进行接下来的业务提供数据。如:在进行用户组群管理的页面,在弹窗中选择部分用户进行分组创建的操作。

这篇文章的主要提供一个基于 JavaScript ES6 语法中 Promise / async / await 的异步特性,来解决弹窗与主要业务组件间如何优雅的传递数据的解决方案

怎么做

那么我们就开始吧:

  1. 首先我们需要分析除去业务外,一个弹窗最基本需要的内容及方法。

    非必须项目:

    • 弹窗标题:用于提示弹窗的主要功能,主要内容。
    • 弹窗页脚:用于放置一些简单的操作方法,如:关闭弹窗、确定、取消等自定制操作。

      必须项目:

    • 关闭弹窗功能:用于关闭弹窗,同时可以绑定一些弹窗组件内部状态做还原处理(直接卸载弹窗组件的可以不处理)。

    • 开启弹窗功能:用于开启弹窗,同时可以初始化弹窗状态,特别是在父组件有动态数据传入参与弹窗初始化时十分有效。
    • 弹窗的主要内容区域:用于展示弹窗所需支持功能的主要内容。比如:简单的表单,可供选择的列表,主要信息的展示。
  2. 然后我们就能写一个简单的弹窗组件了

参考代码

在Github上查看 / 代码下载

  1. 与父组件之间的交互

    与父组件的交互可以分为两种情况。

    1. 组件引入,将弹窗组件作为一个子组件直接引入至父组件中,主要用于指定页面专门的业务:

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37

      <template>
      <div>
      <dialog
      :config='config'
      ref='dialog'
      ></dialog>
      </div>
      </template>

      <script>
      export default {
      name: 'p-component',
      data: {
      config: {
      title: '弹窗'
      }
      },
      // ... 其他内容
      methods: {
      /**
      * 这里用于拉起弹窗的方法,在这个方法内就可以很优雅的处理弹窗与父组件之间的数据传递了
      */
      async needDialog(...args) {
      const { refs } = this;
      try{
      const result = await refs.dialog.open(...args);
      // 处理弹窗的异步数据
      handleDialogResult(result)
      } catch (e) {
      console.log(e)
      }
      }
      }

      }
      </script>
  1. 作为一个独立的 Vue 组件,与 App 并列挂载在全局中,通过将 open 方法 mixin 入 App ,达到可以在所有组件内部使用 this.open() 来调用弹窗。此种使用场景较多的使用在,整个项目普遍通用简单业务来使用。效率极高。由于此方法涉及组件封装的内容,我计划单独用一篇文章来详细讲解这个过程。

写在最后

合理的使用弹窗,会有效的简化业务流程提升开发效率。但弹窗并不是万精油。页面中反复弹窗,极有可能给用户造成困扰而产生抵触。弹窗也并不推荐用于处理复杂业务逻辑,对于复杂的业务逻辑我更推荐使用单个页面。