elementUi message封装解决多次点击触发问题

最新推荐文章于 2023-08-04 12:03:09 发布

一起哈啤酒

最新推荐文章于 2023-08-04 12:03:09 发布

阅读量398

点赞数

分类专栏： js 文章标签： vue.js

本文链接：https://blog.csdn.net/zza86008595/article/details/116262453

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何在Vue应用中创建一个自定义的组件库，包含错误、警告、成功消息提示以及确认对话框的功能。通过`commonFunc.js`模块，开发者可以方便地在主应用`main.js`中全局安装并使用这些组件，从而在应用中统一管理和展示各种类型的消息反馈。

摘要由CSDN通过智能技术生成

//commonFunc.js


import Vue from "vue";
import { Message, MessageBox } from "element-ui";
export default {
  install(Vue) {
    //提示错误信息
    Vue.prototype.Error = message => {
      Message.closeAll();
      Message({
        message: message,
        type: "error"
      });
    };
    //提示警告信息
    Vue.prototype.Warning = message => {
      Message.closeAll();
      Message({
        message: message,
        type: "warning"
      });
    };
    //提示成功信息
    Vue.prototype.Success = message => {
      Message.closeAll();
      Message({
        message: message,
        type: "success"
      });
    };
    //提示确认操作信息
    Vue.prototype.openConfirm = (message, sucessCallBack) => {
      MessageBox.confirm(message, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          sucessCallBack();
        })
        .catch(() => {});
    };
  }
};


//main.js

import commonFunc from "./components/customCopmonents/commonFunc";

Vue.use(commonFunc);



//使用

this.Error('请填写策略名称')