vue3+ts+elementui-plus二次封装弹框

**Vue3 + TS + ElementUI-Plus 二次封装弹框**

在实际项目中，弹框是非常常见的组件之一。ElementUI-Plus 提供了一个基本的弹框组件，但是我们可能需要对其进行二次封装以适应具体业务需求。在本文中，我们将使用 Vue3 + TS + ElementUI-Plus 来实现一个高级别的弹框组件。

###1. 初始化项目首先，我们需要初始化一个 Vue3 + TS + ElementUI-Plus 的项目。我们可以使用 `vue-cli` 来快速创建一个新项目。

bashnpm install -g @vue/clivue create my-project --template vue3-ts-elementui-pluscd my-project

bashtouch src/components/Dialog.vue

vue<template>
 <el-dialog :title="title" v-model="visible" width="30%">
 <slot></slot>
 </el-dialog>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { ElDialog } from 'element-ui-plus';

export default defineComponent({
 name: 'Dialog',
 components: {
 ElDialog,
 },
 props: {
 title: {
 type: String,
 required: true,
 },
 },
 setup(props) {
 const visible = ref(false);

 return {
 visible,
 };
 },
});
</script>

bashtouch src/utils/dialog.ts

typescriptimport { ElDialog } from 'element-ui-plus';

interface DialogOptions {
 title: string;
 content?: string | JSX.Element;
 onConfirm?: () => void;
}

export function showDialog(options: DialogOptions) {
 const { title, content, onConfirm } = options;

 const dialog = ElDialog({
 title,
 width: '30%',
 visible: true,
 });

 if (content) {
 dialog.content = content;
 }

 if (onConfirm) {
 dialog.onConfirm = () => {
 onConfirm();
 dialog.close();
 };
 }
}

vue<template>
 <div>
 <button @click="showDialog">显示弹框</button>

 <!-- 弹框内容 -->
 <el-dialog :title="title" v-model="visible" width="30%">
 {{ content }}
 </el-dialog>
 </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import Dialog from '@/components/Dialog.vue';
import { showDialog } from '@/utils/dialog';

export default defineComponent({
 name: 'MyPage',
 components: {
 Dialog,
 },
 setup() {
 const visible = ref(false);
 const title = ref('');
 const content = ref('');

 const showDialog = () => {
 this.title = '标题';
 this.content = '内容';
 this.visible = true;
 };

 return {
 visible,
 title,
 content,
 showDialog,
 };
 },
});
</script>