全球室内设计公司排名_中山seo扣费_网络整合营销4i原则是指_自助建站系统软件

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

我们可以在插件中加入第三种状态“警告”，并修改 CustomDialog.vue 以支持三种状态。

创建一个插件 dialogPlugin.js

import { createApp, h, reactive } from 'vue';
import CustomDialog from './components/CustomDialog.vue';const DialogPlugin = {install(app) {const dialogData = reactive({isVisible: false,message: '',type: 'success',});const mountNode = document.createElement('div');document.body.appendChild(mountNode);const dialogApp = createApp({render() {return h(CustomDialog, {visible: dialogData.isVisible,message: dialogData.message,type: dialogData.type,'onUpdate:visible': (value) => {dialogData.isVisible = value;},});},});dialogApp.mount(mountNode);app.config.globalProperties.$dialog = {showSuccess(message) {dialogData.message = message;dialogData.type = 'success';dialogData.isVisible = true;},showError(message) {dialogData.message = message;dialogData.type = 'error';dialogData.isVisible = true;},showWarning(message) {dialogData.message = message;dialogData.type = 'warning';dialogData.isVisible = true;},};},
};export default DialogPlugin;

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

<template><el-dialogv-model="isVisible":show-close="false"width="30%"draggable:close-on-click-modal="false"@close="handleClose"><template #header="{ close }"><div class="visitorDialog"><span class="titleClass">提示消息</span><el-icon class="el-icon--left" @click="close"><Close color="white" /></el-icon></div></template><div class="" style="padding-top: .62rem;"><div class="qrCodeImg" :class="messageType" @click="handleClose">{{ message }}</div></div></el-dialog>
</template><script>
import { ElIcon } from 'element-plus';
import { Close } from '@element-plus/icons-vue';export default {components: {ElIcon,Close,},props: {visible: {type: Boolean,default: false,},message: {type: String,default: '',},type: {type: String,default: 'success',},},data() {return {isVisible: this.visible,};},computed: {messageType() {return {success: 'successClass',error: 'errorClass',warning: 'warningClass',}[this.type] || 'successClass';},},watch: {visible(newVal) {this.isVisible = newVal;},isVisible(newVal) {this.$emit('update:visible', newVal);},},methods: {handleClose() {this.isVisible = false;},},
};
</script><style>
.visitorDialog {display: flex;justify-content: space-between;align-items: center;
}.titleClass {font-size: 18px;font-weight: bold;
}.qrCodeImg {cursor: pointer;text-align: center;font-size: 16px;
}.successClass {color: green;
}.errorClass {color: red;
}.warningClass {color: orange;
}
</style>

在 main.js 中注册插件

import { createApp } from 'vue';
import App from './App.vue';
import DialogPlugin from './plugins/dialogPlugin';const app = createApp(App);
app.use(DialogPlugin);
app.mount('#app');

在组件中使用插件
vue

<template><div><el-button @click="showSuccessDialog">显示成功消息</el-button><el-button @click="showErrorDialog">显示错误消息</el-button><el-button @click="showWarningDialog">显示警告消息</el-button></div>
</template><script>
export default {methods: {showSuccessDialog() {this.$dialog.showSuccess('恭喜你，这是一条成功消息');},showErrorDialog() {this.$dialog.showError('抱歉，这是一条错误消息');},showWarningDialog() {this.$dialog.showWarning('注意，这是一个警告消息');},},
};
</script>

通过这种方式，你可以在任何地方通过 this.$dialog.showSuccess、this.$dialog.showError 和 this.$dialog.showWarning 来显示消息对话框，而无需在每个组件中显式引用 CustomDialog。