vue3 + ElementPlus 封装函数式弹窗组件 - 奔跑的前端猿

需求场景：弹窗组件需要支持自定义的插槽内容，删除的弹窗也要使用这个组件，只是样式不一样而已，希望在父组件使用删除弹窗的时候直接调用某个方法就可以显示弹窗

组件模拟 cuDialog

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

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

新建一个js文件

这里需要使用vue3的createApp，方法实现函数式组件调用

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

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

let app = null; let div = null;

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

我这里是把两个方法放在了一个对象里面，方便页面的调用，你们可以根据自己的喜好自由设计

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

• 开始写显示弹窗的方法

首先需要确认show方法要接收的参数，参数的话就是前面列举的那些，三个props和两个事件

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;