一键get | Vue3指令式封装ant design vue全局弹窗方法

2023-04-08 10:26:49

利用指令式封装 Ant Design Vue 全局弹窗方法

在 Vue 3 中，可以使用指令式 hooks 方法轻松封装 Ant Design Vue 的全局弹窗组件，以便在应用程序的任何位置弹出一个全局表单或树形组件。这种方法简单易用，只需几个简单的步骤即可实现。

步骤

安装 Ant Design Vue

npm install ant-design-vue

在 main.js 文件中引入 Ant Design Vue

import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'

Vue.use(Antd)

创建自定义组件

创建一个自定义 Vue 组件，作为弹出窗口的内容。

// CustomComponent.vue
<template>
  <div>
    <p>这是自定义组件。</p>
    <button @click="close">关闭</button>
  </div>
</template>

<script>
export default {
  methods: {
    close() {
      this.$emit('close')
    }
  }
}
</script>

在 main.js 文件中注册自定义组件

Vue.component('custom-component', CustomComponent)

创建指令

创建一个指令，用于控制弹出窗口的可见性和内容。

// global-dialog.js
import { ref } from 'vue'

export default {
  mounted(el, binding) {
    const visible = ref(false)
    const component = ref(null)

    const modalProps = {
      visible: visible.value,
      component: component.value,
      onCancel() {
        visible.value = false
      },
      onOk() {
        visible.value = false
        binding.value(component.value)
      }
    }

    const modal = h(Modal, modalProps)
    el.appendChild(modal)

    binding.value((c) => {
      component.value = c
      visible.value = true
    })
  }
}

在模板中使用指令

在模板中使用指令，即可弹出全局弹窗。

<template>
  <div>
    <button @click="openDialog">打开弹窗</button>
  </div>
</template>

<script>
import globalDialog from './global-dialog.js'

export default {
  directives: {
    globalDialog
  },
  methods: {
    openDialog() {
      this.$refs.dialog.openDialog((c) => {
        console.log(c)
      })
    }
  }
}
</script>