功能

实现倒计时：

Element

1.封装一个Dialog弹窗

这段代码定义了一个名为showDialog的函数，该函数用于在Vue应用中动态创建和显示一个对话框。函数接收三个参数：component，data和options。

component：这是一个Vue组件对象，将被用作对话框的内容。

data：这是一个对象，将被用作Vue组件的初始数据。

options：这是一个可选的对象，可以包含额外的选项，如子组件。

函数的主体是一个Promise，这意味着它是异步的，可以使用.then或async/await来处理结果。在Promise的回调函数中，首先使用Vue.extend方法创建了一个新的Vue构造函数，然后在data对象上添加了一个closeCall方法，该方法用于移除对话框元素并销毁对话框实例。然后，创建了一个新的对象obj，该对象包含一个data方法，该方法返回传入的data对象。如果options对象包含components属性，那么这些组件将被添加到obj对象中。接下来，使用新的Vue构造函数和obj对象创建了一个新的Vue实例，并将其挂载到一个新创建的元素上。然后，给Vue实例添加了两个属性：$promise和$modal。$promise属性包含了Promise的resolve和reject函数，$modal属性是一个对象，包含一个close方法，该方法用于关闭对话框。

//show-dialog.js
// 导入Vue库
import Vue from 'vue'

// 定义一个显示对话框的函数，接收三个参数：组件、数据和选项
const showDialog = (component, data, options = {}) => {
  // 返回一个Promise对象
  return new Promise((resolve, reject) => {
    // 使用Vue.extend方法创建一个构造函数
    let Constructor = Vue.extend({ ...component })

    // 在数据对象上添加一个关闭对话框的方法
    data.closeCall = () => {
      // 移除实例的元素
      instance.$el.remove()
      // 如果实例存在，销毁实例
      instance && instance.$destroy && instance.$destroy()
      //清除对话框实例和关闭方法的引用:
          // 1.将实例设置为undefined
      instance = undefined
          // 2.将data的closeCall属性设置为undefined
      data && (data.closeCall = undefined)
    }

    // 定义一个对象，包含data方法(创建一个新的对象，该对象包含一个返回数据对象的方法)
    let obj = {
      data() { return data || {} }
    }

    // 如果选项中包含components属性，将其添加到obj对象中
    if (options && options.components) {
      obj.components = options.components
    }

    // 使用构造函数创建一个实例(使用新的Vue构造函数和新对象创建一个新的Vue实例)
    let modal = new Constructor(obj)

    // 将新的Vue实例挂载到一个新创建的元素上
    let instance = modal.$mount()

    // 将resolve和reject方法添加到实例的$promise属性中
    instance.$promise = { resolve, reject }

    // 在Vue实例上添加一个包含关闭对话框方法的属性
    instance.$modal = {
      close: () => {
        // 如果实例的元素有父节点，从父节点中移除元素
        if (instance.$el.parentNode) {
          instance.$el.parentNode.removeChild(instance.$el)
        } else {
          // 否则直接移除元素
          instance.$el.remove()
        }
        // 如果对话框实例存在，销毁对话框实例
        instance && instance.$destroy && instance.$destroy()
        // 清除对话框实例和关闭方法的引用:
            // 1.将实例设置为undefined
        instance = undefined
            // 2.将data的closeCall属性设置为undefined
        data && (data.closeCall = undefined)
      }
    }

    // 将实例的元素添加到文档的body中
    if (document.body.append) {
      document.body.append(instance.$el)
    } else if (document.body.appendChild) {
      document.body.appendChild(instance.$el)
    }
  })
}

import { showDialog } from './show-dialog.js'
// 调用时参数：component、data、options
showDialog(suspectedAssociatedPersonsModel, { title })

记录开发中的小技巧

功能

Element