elementui自定义对话框弹窗

可以将自定义对话框封装成一个插件，如许你可以在任何地方通过雷同于 this.$dialog 的方式来调用它。以下是一个实现示例：

我们可以在插件中加入第三种状态“告诫”，并修改 CustomDialog.vue 以支持三种状态。
创建一个插件 dialogPlugin.js

1. import { createApp, h, reactive } from 'vue';
2. import CustomDialog from './components/CustomDialog.vue';
5. const DialogPlugin = {
6.   install(app) {
7.     const dialogData = reactive({
8.       isVisible: false,
9.       message: '',
10.       type: 'success',
11.     });
14.     const mountNode = document.createElement('div');
15.     document.body.appendChild(mountNode);
18.     const dialogApp = createApp({
19.       render() {
20.         return h(CustomDialog, {
21.           visible: dialogData.isVisible,
22.           message: dialogData.message,
23.           type: dialogData.type,
24.           'onUpdate:visible': (value) => {
25.             dialogData.isVisible = value;
26.           },
27.         });
28.       },
29.     });
32.     dialogApp.mount(mountNode);
35.     app.config.globalProperties.$dialog = {
36.       showSuccess(message) {
37.         dialogData.message = message;
38.         dialogData.type = 'success';
39.         dialogData.isVisible = true;
40.       },
41.       showError(message) {
42.         dialogData.message = message;
43.         dialogData.type = 'error';
44.         dialogData.isVisible = true;
45.       },
46.       showWarning(message) {
47.         dialogData.message = message;
48.         dialogData.type = 'warning';
49.         dialogData.isVisible = true;
50.       },
51.     };
52.   },
53. };
56. export default DialogPlugin;

复制代码

修改 CustomDialog.vue 以支持三种类型

1. <template>
2.   <el-dialog
3.     v-model="isVisible"
4.     :show-close="false"
5.     width="30%"
6.     draggable
7.     :close-on-click-modal="false"
8.     @close="handleClose"
9.   >
10.     <template #header="{ close }">
11.       <div class="visitorDialog">
12.         <span class="titleClass">提示消息</span>
13.         <el-icon class="el-icon--left" @click="close">
14.           <Close color="white" />
15.         </el-icon>
16.       </div>
17.     </template>
18.     <div class="" style="padding-top: .62rem;">
19.       <div class="qrCodeImg" :class="messageType" @click="handleClose">
20.         {{ message }}
21.       </div>
22.     </div>
23.   </el-dialog>
24. </template>
27. <script>
28. import { ElIcon } from 'element-plus';
29. import { Close } from '@element-plus/icons-vue';
32. export default {
33.   components: {
34.     ElIcon,
35.     Close,
36.   },
37.   props: {
38.     visible: {
39.       type: Boolean,
40.       default: false,
41.     },
42.     message: {
43.       type: String,
44.       default: '',
45.     },
46.     type: {
47.       type: String,
48.       default: 'success',
49.     },
50.   },
51.   data() {
52.     return {
53.       isVisible: this.visible,
54.     };
55.   },
56.   computed: {
57.     messageType() {
58.       return {
59.         success: 'successClass',
60.         error: 'errorClass',
61.         warning: 'warningClass',
62.       }[this.type] || 'successClass';
63.     },
64.   },
65.   watch: {
66.     visible(newVal) {
67.       this.isVisible = newVal;
68.     },
69.     isVisible(newVal) {
70.       this.$emit('update:visible', newVal);
71.     },
72.   },
73.   methods: {
74.     handleClose() {
75.       this.isVisible = false;
76.     },
77.   },
78. };
79. </script>
82. <style>
83. .visitorDialog {
84.   display: flex;
85.   justify-content: space-between;
86.   align-items: center;
87. }
90. .titleClass {
91.   font-size: 18px;
92.   font-weight: bold;
93. }
96. .qrCodeImg {
97.   cursor: pointer;
98.   text-align: center;
99.   font-size: 16px;
100. }
103. .successClass {
104.   color: green;
105. }
108. .errorClass {
109.   color: red;
110. }
113. .warningClass {
114.   color: orange;
115. }
116. </style>

复制代码

在 main.js 中注册插件

1. import { createApp } from 'vue';
2. import App from './App.vue';
3. import DialogPlugin from './plugins/dialogPlugin';
5. const app = createApp(App);
6. app.use(DialogPlugin);
7. app.mount('#app');

复制代码

在组件中使用插件
vue

1. <template>
2.   <div>
3.     <el-button @click="showSuccessDialog">显示成功消息</el-button>
4.     <el-button @click="showErrorDialog">显示错误消息</el-button>
5.     <el-button @click="showWarningDialog">显示警告消息</el-button>
6.   </div>
7. </template>
10. <script>
11. export default {
12.   methods: {
13.     showSuccessDialog() {
14.       this.$dialog.showSuccess('恭喜你，这是一条成功消息');
15.     },
16.     showErrorDialog() {
17.       this.$dialog.showError('抱歉，这是一条错误消息');
18.     },
19.     showWarningDialog() {
20.       this.$dialog.showWarning('注意，这是一个警告消息');
21.     },
22.   },
23. };
24. </script>

复制代码

通过这种方式，你可以在任何地方通过 this.                                   d                         i                         a                         l                         o                         g                         .                         s                         h                         o                         w                         S                         u                         c                         c                         e                         s                         s                         、                         t                         h                         i                         s                         .                              dialog.showSuccess、this.                  dialog.showSuccess、this.dialog.showError 和 this.$dialog.showWarning 来显示消息对话框，而无需在每个组件中显式引用 CustomDialog。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。