elementui自定义对话框弹窗

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

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

创建一个插件 dialogPlugin.js

javascript 复制代码

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 以支持三种类型

javascript 复制代码

<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',
      }[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 中注册插件

javascript 复制代码

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

javascript 复制代码

<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。