Vue 3 + Element-Plus: 优雅使用 Dialog 组件的终极指南

2022-11-19 12:43:00

使用函数式封装和定制化，打造优雅的 Vue 3 + Element-Plus Dialog 组件

导言：告别枯燥的 Dialog 开发

在 Vue 3 的世界中，Element-Plus Dialog 组件是弹出式窗口的可靠选择。但是，默认的实现可能会带来繁琐的命名和重复的 DOM 操作。本文将指导你使用函数式封装和定制化，让 Dialog 组件开发变得优雅高效。

函数式封装：告别繁琐命名和 DOM 操作

想象你正在构建一个需要弹出对话框的应用。传统的方法需要你创建一个 Dialog 组件，注册到 Vue 实例中，并在需要时使用繁琐的 this.$refs.dialog.show() 和 this.$refs.dialog.close() 方法。

函数式封装提供了一种优雅的解决方案。通过将 Dialog 组件封装成一个函数，我们可以摆脱繁琐的命名和重复的 DOM 操作。以下代码示例展示了如何封装 Dialog 组件：

import { Dialog } from 'element-plus'

const MyDialog = (title, content) => {
  const dialog = new Dialog({
    title,
    content,
    visible: false
  })

  document.body.appendChild(dialog.$el)
  dialog.show()

  dialog.$on('close', () => {
    document.body.removeChild(dialog.$el)
    dialog.$destroy()
  })

  return dialog
}

现在，你可以像这样使用封装后的 Dialog 组件：

const dialog = MyDialog('标题', '内容')

setTimeout(() => {
  dialog.close()
}, 3000)

通过函数式封装，你只需传入标题和内容，即可轻松显示 Dialog 组件，告别繁琐的命名和重复的 DOM 操作。

定制化：满足你的个性化需求

函数式封装的优势不仅限于此。我们还可以对封装后的 Dialog 组件进行定制，以满足个性化的需求。例如，你可以修改它的样式、添加按钮、或添加事件监听器。

import { Dialog } from 'element-plus'

const MyDialog = (title, content, options = {}) => {
  const dialog = new Dialog({
    title,
    content,
    visible: false,
    ...options
  })

  document.body.appendChild(dialog.$el)
  dialog.show()

  dialog.$on('close', () => {
    document.body.removeChild(dialog.$el)
    dialog.$destroy()
  })

  return dialog
}

现在，你可以像这样使用定制后的 Dialog 组件：

const dialog = MyDialog('标题', '内容', {
  width: '500px',
  height: '300px',
  buttons: [
    {
      text: '确定',
      type: 'primary',
      click: () => {
        dialog.close()
      }
    },
    {
      text: '取消',
      type: 'default',
      click: () => {
        dialog.close()
      }
    }
  ]
})

setTimeout(() => {
  dialog.close()
}, 3000)