elementui自定义对话框弹窗
可以将自定义对话框封装成一个插件，如许你可以在任何地方通过雷同于 this.$dialog 的方式来调用它。以下是一个实现示例：https://i-blog.csdnimg.cn/direct/25490a6e38f14f41a53b459fa7aba88c.png
我们可以在插件中加入第三种状态“告诫”，并修改 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-dialog
v-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',
} || '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. 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企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]