组件模拟 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;
08-09 17:53