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

 更新时间:2023年08月09日 14:06:02   作者:奔跑的前端猿  
这篇文章主要为大家详细介绍了如何利用vue3和ElementPlus封装函数式弹窗组件,文中的示例代码讲解详细,感兴趣的小伙伴可以了解一下

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

组件模拟 cuDialog

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

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

新建一个js文件

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

1.导入需要的弹窗组件

import CuDialog from '@/components/CuDialog.vue'

2.创建两个全局变量(命名随意),一个是存储createApp创建的组件,一个是放组件的dom

let app = null; let div = null;

3.定义两个方法,一个是显示弹窗,一个是隐藏弹窗

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

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

4.开始写显示弹窗的方法

首先需要确认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);
}

5.隐藏弹窗方法

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

6.导出方法

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;

到此这篇关于vue3+ElementPlus封装函数式弹窗组件详解的文章就介绍到这了,更多相关vue ElementPlus弹窗组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue实现一个滚动条样式

    vue实现一个滚动条样式

    滚动条能够给用户带来极好的体验效果,今天通过本文给大家分享vue实现一个滚动条样式,代码简单易懂,需要的朋友参考下吧
    2021-07-07
  • Vue精简版风格概述

    Vue精简版风格概述

    本篇文章给大家讲解了一下Vue精简版风格的相关知识点内容以及分享了实例代码,有兴趣的朋友参考下。
    2018-01-01
  • Vue 实现CLI 3.0 + momentjs + lodash打包时优化

    Vue 实现CLI 3.0 + momentjs + lodash打包时优化

    今天小编就为大家分享一篇Vue 实现CLI 3.0 + momentjs + lodash打包时优化,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • vue cli使用绝对路径引用图片问题的解决

    vue cli使用绝对路径引用图片问题的解决

    这篇文章主要给大家介绍了关于vue cli使用绝对路径引用图片问题的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起看看吧。
    2017-12-12
  • 基于vue打包后字体和图片资源失效问题的解决方法

    基于vue打包后字体和图片资源失效问题的解决方法

    下面小编就为大家分享一篇基于vue打包后字体和图片资源失效问题的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • Vue开发项目中如何使用Font Awesome 5

    Vue开发项目中如何使用Font Awesome 5

    Font Awesome是一套流行的图标字体库,我们在实际开发的过程中会经常遇到需要使用图标的场景,对于一些常用的图标,我们可以直接在Font Awesome中找到并且使用,这篇文章主要给大家介绍了关于Vue开发项目中如何使用Font Awesome5的相关资料,需要的朋友可以参考下
    2021-11-11
  • 详解Vue2.0里过滤器容易踩到的坑

    详解Vue2.0里过滤器容易踩到的坑

    本篇文章主要介绍了Vue2.0里过滤器容易踩到的坑,vue2.0需要自己定义过滤器。有兴趣的可以了解一下
    2017-06-06
  • 一文详解Vue响应式数据的原理

    一文详解Vue响应式数据的原理

    在vue2的响应式中,存在着添加属性、删除属性、以及通过下标修改数组,但页面不会自动更新的问题,而这些问题在vue3中都得以解决,本文就给大家详细的介绍一下Vue响应式数据原理,感兴趣的小伙伴跟着小编一起来看看吧
    2023-08-08
  • 何时/使用 Vue3 render 函数的教程详解

    何时/使用 Vue3 render 函数的教程详解

    这篇文章主要介绍了何时/使用 Vue3 render 函数的教程详解,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-07-07
  • vue的.vue文件是怎么run起来的(vue-loader)

    vue的.vue文件是怎么run起来的(vue-loader)

    通过vue-loader,解析.vue文件,在webpack解析,拆解vue组件 ,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友参考下
    2018-12-12

最新评论