vue3全局弹窗组件

最新推荐文章于 2025-10-11 19:45:00 发布

原创

最新推荐文章于 2025-10-11 19:45:00 发布 · 2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

文章展示了如何在Vue.js中使用defineComponent定义组件，h函数进行渲染，createApp创建应用实例，以及mount和unmount进行组件的添加和移除。对话框组件的实现包括属性配置、事件监听和DOM操作。

使用defineComponent 定义一个组件
使用h函数渲染组件
使用createApp 创建组件实例
使用mount 插入组件
使用unmount移除组件

定义组件

export function Dialog(config) {
   
   
  const id = 'MwDialog'
  const Comp = defineComponent({
   
   
    props: {
   
   
      config: {
   
   
        type: Object,
        default: () => ({
   
   })
      }
    },
    setup(props) {
   
   
      const {
   
    showCancel = true, title = '', content = '', confirmCallback = () => {
   
    }, cancelCallBack = () => {
   
    } } = props.config
      const state = reactive({
   
    class: 'mw-dialog bounce-enter' })
      const onCancel = () => {
   
   
        console.log('点击了取消')
        removeComp(dialogRef, id)
        cancelCallBack(