vue3+ElementPlus封裝函數(shù)式彈窗組件詳解

更新時(shí)間：2023年08月09日 14:06:02 作者：奔跑的前端猿

這篇文章主要為大家詳細(xì)介紹了如何利用vue3和ElementPlus封裝函數(shù)式彈窗組件，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以了解一下

組件模擬 cuDialog

假設(shè)我的彈窗組件有以下的props和事件

dialogVisible：控制彈窗顯示和隱藏
title：彈窗的標(biāo)題
showClose：是否刪除彈窗
handleClose：彈窗取消的事件
handleConfirm：彈窗確定的事件

新建一個(gè)js文件

這里需要使用vue3的createApp，方法實(shí)現(xiàn)函數(shù)式組件調(diào)用

1.導(dǎo)入需要的彈窗組件

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

2.創(chuàng)建兩個(gè)全局變量（命名隨意），一個(gè)是存儲(chǔ)createApp創(chuàng)建的組件，一個(gè)是放組件的dom

let app = null; let div = null;

3.定義兩個(gè)方法，一個(gè)是顯示彈窗，一個(gè)是隱藏彈窗

我這里是把兩個(gè)方法放在了一個(gè)對(duì)象里面，方便頁(yè)面的調(diào)用，你們可以根據(jù)自己的喜好自由設(shè)計(jì)

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

4.開(kāi)始寫(xiě)顯示彈窗的方法

首先需要確認(rèn)show方法要接收的參數(shù)，參數(shù)的話就是前面列舉的那些，三個(gè)props和兩個(gè)事件

function show(props) {
  const { title = '溫馨提示', delContent = '確定要?jiǎng)h除所選記錄嗎？', confirm, close } = props;
    // 創(chuàng)建dom并插入到body中
  div = document.createElement('div');
  div.setAttribute('id', 'cu-dialog-id');
  document.body.appendChild(div);
  // 創(chuàng)建組件
  app = createApp(CuDialog, {
    title, // 彈窗的標(biāo)題
    delContent, // 刪除彈窗的內(nèi)容
    dialogVisible: true, // 彈窗顯示或隱藏
    showClose: true, // 是否刪除彈窗
    // 彈窗組件暴露的取消事件handleClose
    onHandleClose: () => {
      close && close();
      console.log('觸發(fā)函數(shù)內(nèi)取消事件');
      app.unmount();
      div.remove();
    },
    // 彈窗組件暴露的取消事件handleConfirm
    onHandleConfirm: () => {
      confirm && confirm();
      console.log('觸發(fā)函數(shù)內(nèi)確認(rèn)事件');
    }
  });
   app.mount(div);
}

5.隱藏彈窗方法

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

6.導(dǎo)出方法

export default delMsg;

使用方法

import delMsg from '@utils/delMessage.js'
delMsg.show({title:'彈窗標(biāo)題',delContent:'彈窗的內(nèi)容',confirm:() =>{
  console.log('確認(rèn)事件觸發(fā)');
  delMsg.hide();
},close:() => {
  console.log('取消事件觸發(fā)')
}})

完整代碼

import CuDialog from '@/components/CuDialog.vue';
let app = null;
let div = null;
const delMsg = {
  /**
   * @param {Object} props
   * @param {String} title 彈窗的標(biāo)題，不傳默認(rèn) ‘溫馨提示'
   * @param {String} delContent 彈窗的內(nèi)容，不傳默認(rèn) ‘確定要?jiǎng)h除所選記錄嗎？'
   * @param {Boolean} autoClose 取消事件是否需要特殊處理，設(shè)置false需要手動(dòng)調(diào)用hide方法，不傳默認(rèn)true
   * @param {Function} confirm 彈窗確認(rèn)事件
   * @param {Function} close 彈窗關(guān)閉事件
   */
  show: function (props) {
    const { title = '溫馨提示', delContent = '確定要?jiǎng)h除所選記錄嗎？', 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('觸發(fā)函數(shù)內(nèi)取消事件');
        // 如果需要默認(rèn)關(guān)閉，不做任何邏輯處理請(qǐng)將autoClose設(shè)置為true（默認(rèn)就是true）
        if (autoClose) {
          app.unmount();
          div.remove();
        }
      },
      onHandleConfirm: () => {
        confirm && confirm();
        console.log('觸發(fā)函數(shù)內(nèi)確認(rèn)事件');
      }
    });
    app.mount(div);
  },
  hide: function () {
    app.unmount();
    div.remove();
  }
};
export default delMsg;

到此這篇關(guān)于vue3+ElementPlus封裝函數(shù)式彈窗組件詳解的文章就介紹到這了,更多相關(guān)vue ElementPlus彈窗組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: