如何通過Vue3+Element?Plus自定義彈出框組件

更新時間：2024年05月11日 10:24:31 作者：擺脫小白

這篇文章主要給大家介紹了關于如何通過Vue3+Element?Plus自定義彈出框組件的相關資料,彈窗是前端開發(fā)中的一種常見需求,文中通過代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考借鑒價值,需要的朋友可以參考下

前言

在Vue 3項目中，使用Element Plus構建彈出框是一項常見的任務。為了簡化這個過程，我們可以封裝一個公共組件，使彈出框的調用變得簡單而高效。本文將介紹如何通過Vue 3和Element Plus，使用一個自定義的彈出框組件實現(xiàn)這一目標。

1. 彈出框組件封裝

首先，我們封裝了一個通用的彈出框組件，具體實現(xiàn)位于 util.js 文件中。通過 initInstance 方法，我們可以動態(tài)創(chuàng)建一個彈出框實例，并將其掛載到指定的容器上。以下是簡要代碼：

// util.js

import { h, render } from 'vue';

export function initInstance(component, container, option) {
    const vNode = h(component, option);
    render(vNode, container);
    document.body.appendChild(container.firstElementChild);
    return vNode.component;
}

export function getContainer() {
    return document.createElement('div');
}

2. 自定義彈出框配置

接下來，我們定義了一個名為 portPop 的自定義彈出框配置。這個配置使用了前面封裝的通用方法，同時為彈出框提供了一些特定的配置。以下是簡要代碼：

// common.js

import { initInstance, getContainer } from "./util";
import PortPop from "../components/PortPop";

const instanceMap = new Map();

export const portPop = (option, call) => {
    const container = getContainer();
    let opt = {
        ...option,
        onComfrim: (data) => {
            call(data);
        },
        onVanish: () => {
            render(null, container);
            instanceMap.delete(vm);
        },
    };
    const component = initInstance(PortPop, container, opt);
    const vm = component.proxy;
    component.exposed.openDialog();
    instanceMap.set(vm, { option: opt });
};

3. 彈出框組件實現(xiàn)

首先，我們要先封裝一下el-dialog組件

<template>
  <el-dialog
    :model-value="modelValue"
    :title="title"
    :width="width"
    :modal="modal"
    draggable
    destroy-on-close
    :close-on-click-modal="false"
    append-to-body
    :before-close="beforeClose"
    @close="dialogColse"
    @closed="dialogColsed"
  >
    <slot />
    <template #footer>
      <span class="dialog-footer">
        <slot name="footer" />
      </span>
    </template>
  </el-dialog>
</template>
<script setup name="Dialog">
import { ElDialog } from "element-plus";
const props = defineProps({
  modelValue: {
    type: [Boolean],
    default: false,
  },
  title: {
    type: [String],
    default: "",
  },
  width: {
    type: [String],
    default: "",
  },
  modal: {
    type: [Boolean],
    default: false,
  },
  beforeClose: [Function],
});
const emits = defineEmits(["update:modelValue", "onClosed", "closed"]);
function dialogColse() {
  emits("update:modelValue", false);
}
function dialogColsed() {
  emits("onClosed", false);
  emits("closed", false);
}
</script>

<style lang="scss">
</style>

最后，我們實現(xiàn)了具體的彈出框組件 PortPop，這個組件使用了 Element Plus 的 Dialog 組件，并在其中嵌套了一些其他組件，以實現(xiàn)特定的功能。以下是簡要代碼：

<template>
  <div>
    <Dialog :title="props.title" v-model="dialog" width="920px">
        <!-- ... 彈出框內容 ... -->
        <template #footer>
            <div class="dialog-footer">
              <el-button type="primary" size="small" @click="confrim">
                確定
              </el-button>
              <el-button @click="dialog = false" size="small">取消</el-button>
            </div>
          </template>
    </Dialog>
  </div>
</template>

<script setup lang="tsx">
import {
  nextTick,
  ref, useAttrs,
} from 'vue'
import Dialog from '@/components/dialog'
import {
  ElInput,
  ElButton,
} from 'element-plus'

const props = defineProps({
  title: {
    type: [String],
    default: '',
  },
  type: {
    type: [String],
    default: '',
  },
})

const emits = defineEmits(['comfrim'])
const attrs = useAttrs()
const dialog = ref(false)
function openDialog() {
  dialog.value = true
}
const confrim = async () => {
  emits('comfrim', "傳遞給父組件的數(shù)據(jù)")
  nextTick(() => {
    dialog.value = false
  })
}
defineExpose({ openDialog })

</script>
<style lang="scss">
</style>

4. 使用自定義彈出框組件

最終，我們可以在需要調用彈出框的地方，簡單地執(zhí)行portPop方法，并傳遞相應的配置和回調函數(shù)。這樣，彈出框就會顯示出來，用戶可以與之交互。

// 在需要的地方調用自定義彈出框
import { portPop } from "./customDialog";

// 示例調用
portPop({ title: '自定義彈出框', defaultKeyword: '關鍵字' }, (data) => {
    // 處理彈出框確認后的數(shù)據(jù)
    console.log('用戶選擇的數(shù)據(jù)：', data);
});