vue3 + ElementPlus 封装函数式弹窗组件

组件模拟 cuDialog

假设我的弹窗组件有以下的props和事件

• dialogVisible：控制弹窗显示和隐藏
• title：弹窗的标题
• showClose：是否删除弹窗
• handleClose：弹窗取消的事件
• handleConfirm：弹窗确定的事件

新建一个js文件

• 导入需要的弹窗组件
  import CuDialog from '@/components/CuDialog.vue'

• 创建两个全局变量（命名随意），一个是存储createApp创建的组件，一个是放组件的dom

let app = null; let div = null;

• 定义两个方法，一个是显示弹窗，一个是隐藏弹窗

const delMsg = {
  show:function() {},
  hide:function() {}
}

• 开始写显示弹窗的方法

function show(props) {
  const { title = '温馨提示', delContent = '确定要删除所选记录吗？', confirm, close } = props;
    // 创建dom并插入到body中
  div = document.createElement('div');
  div.setAttribute('id', 'cu-dialog-id');
  document.body.appendChild(div);

  // 创建组件
  app = createApp(CuDialog, {
    title, // 弹窗的标题
    delContent, // 删除弹窗的内容
    dialogVisible: true, // 弹窗显示或隐藏
    showClose: true, // 是否删除弹窗
    // 弹窗组件暴露的取消事件handleClose
    onHandleClose: () => {
      close && close();
      console.log('触发函数内取消事件');
      app.unmount();
      div.remove();
    },
    // 弹窗组件暴露的取消事件handleConfirm
    onHandleConfirm: () => {
      confirm && confirm();
      console.log('触发函数内确认事件');
    }
  });
   app.mount(div);
}

• 隐藏弹窗方法

function hide() {
  app.unmount();
  div.remove();
}

• 导出方法
  export default delMsg;

使用方法

import delMsg from '@utils/delMessage.js'
delMsg.show({title:'弹窗标题',delContent:'弹窗的内容',confirm:() =>{
  console.log('确认事件触发');
  delMsg.hide();
},close:() => {
  console.log('取消事件触发')
}})

完整代码

import CuDialog from '@/components/CuDialog.vue';
let app = null;
let div = null;
const delMsg = {
  /**
   * @param {Object} props
   * @param {String} title 弹窗的标题，不传默认 ‘温馨提示’
   * @param {String} delContent 弹窗的内容，不传默认 ‘确定要删除所选记录吗？’
   * @param {Boolean} autoClose 取消事件是否需要特殊处理，设置false需要手动调用hide方法，不传默认true
   * @param {Function} confirm 弹窗确认事件
   * @param {Function} close 弹窗关闭事件
   */
  show: function (props) {
    const { title = '温馨提示', delContent = '确定要删除所选记录吗？', autoClose = true, confirm, close } = props;
    div = document.createElement('div');
    div.setAttribute('id', 'cu-dialog-id');
    document.body.appendChild(div);
    // eslint-disable-next-line vue/one-component-per-file
    app = createApp(CuDialog, {
      title,
      delContent,
      dialogVisible: true,
      showClose: true,
      onHandleClose: () => {
        close && close();
        console.log('触发函数内取消事件');
        // 如果需要默认关闭，不做任何逻辑处理请将autoClose设置为true（默认就是true）
        if (autoClose) {
          app.unmount();
          div.remove();
        }
      },
      onHandleConfirm: () => {
        confirm && confirm();
        console.log('触发函数内确认事件');
      }
    });
    app.mount(div);
  },
  hide: function () {
    app.unmount();
    div.remove();
  }
};
export default delMsg;