首页 > 其他分享 >vue3 + ElementPlus 封装函数式弹窗组件

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

时间:2023-08-09 10:45:26浏览次数:70  
标签:ElementPlus confirm app vue3 组件 div true 弹窗

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

组件模拟 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;

标签:ElementPlus,confirm,app,vue3,组件,div,true,弹窗
From: https://www.cnblogs.com/sxdpanda/p/17616231.html

相关文章

  • uniapp自动引入 vue3(ref, toRefs, reactive...), uni-app
    1.装包npmiunplugin-auto-import--save-dev2.在项目的vue.config.js中引入并使用import{defineConfig}from'vite'importunifrom'@dcloudio/vite-plugin-uni'importpathfrom'path'//----导入插件----importAutoImportfrom......
  • Vue3+ElementPlus,Module parse failed: Unexpected token (3:27)
    一、环境vue3,ElementPlus,@vue/cli5.0.8,npm 9.6.7。我在复制elementplus官网的一些代码到vue3框架里测试时出现的问题。二、不报错方法图片位置删除lang=“ts”就不报错了 ......
  • Vue3+ElementPlus,Cannot read properties of null (reading 'isCE')
    一、环境vue3,ElementPlus,@vue/cli5.0.8,npm9.6.7。二、报错内容在vue3框架,views文件夹下的AboutView.vue文件里,执行<el-button>Default</el-button>语句就会报错如下:Uncaughtruntimeerrors:×ERRORCannotreadpropertiesofnull(reading'isCE')TypeError:Cannotread......
  • - 前后端数据传输的编码格式(contentType) - Ajax朝后端提交文件数据 - Ajax朝后端提
    前后端数据传输的编码格式(contentType)前后端数据传输的请求方式有两种:get、post我们只研究post请求的编码格式三种编码格式urlencodedform-datajson发送post请求的方式form表单Ajaxpostman(第三方工具,需要下载) form表单发送post请求的时候数据的编码格式请求头conten......
  • vue3 + h5 构建流程
    目录目录初始化项目架构技术栈工具类环境搭建流程初始化项目初始化git运行项目配置server环境vite.config.ts配置项目环境增加三个文件修改package.json脚本如何使用重新启动配置Eslint增加文件.eslintrc.cjs对vite.config.ts修改重新启动......
  • 弹窗拖拽边界控制
    import{Directive,App}from"vue";constgetPxVal=(str:string)=>{if(str&&str.endsWith('px')){returnparseInt(str.substring(0,str.length-2))}else{return0}}interfaceDragBind{......
  • vue3 基于antd3.2.20封装表格(插槽)
    <!--表格组件--><a-table:dataSource="tableData":columns="columns":pagination="false":scroll="{y:tableHeight,x:1500}":rowKey="'id'">......
  • 前后端数据传输的编码格式,Ajax提交json格式的数据,Ajax提交文件数据,AJax结合layer弹
    前后端数据传输的编码格式(contentType)#前后端数据传输的时候请求方式有2种:getpost我们不研究get请求的url?a=1&b=2#我们只研究post请求的编码格式三种编码格式:urlencodedform-datajson#可以通过哪些方式发送post请求form表单Ajaxpostman请求头中的Content-......
  • 批量删除功能(VUE3语法)
    使用elementui-el-table方式编写功能点:点击全选/单选可以进行删除 <el-table:data="date"ref="grayscaleTableRef"min-height="288"max-height="510"style="width:1......
  • Vue3 路由优化,使页面初次渲染效率翻倍
    3996条路由?addRoute函数用了大约1s才执行完毕。通过观察,发现居然有3996条路由记录。可是项目并没有这么多的页面啊~重复路由letroutes:Array<RouteRecordRaw>=[{path:'/promotion/ticket-list-jegotrip',component:()=>import(/*webp......