美文网首页vue、javascript
vue,再封装 element MessageBox 弹框

vue,再封装 element MessageBox 弹框

作者: 源大侠 | 来源:发表于2021-03-10 10:51 被阅读0次

    element 中 MessageBox 已经是封装好了的。但是根据实际项目中的需要,弹框的类型肯定是不止一种的。
    这里以 MessageBox 中的 confirm 为例。

    @util/utils.js 中

    /**
     * @param content 弹框中提示的内容
     * @param callback 点击确认后返回的函数
     * @param btnText 确认按钮,很多情况下确认按钮都需要有单独的文案。同理还可以增加取消按钮的文案。
     * @param type 消息类型,用于显示图标 success / info / warning / error
     */
    import ElementUI from "element-ui"; //这里是引入 element
    const utils = {
    alertConfirmReminder(content, callback, btnText, type) {
        ElementUI.MessageBox.confirm(content,
            "温馨提示", {
              confirmButtonText: btnText || "确定",
              cancelButtonText: "取消",
              type: type
            }).then(() => {
          callback()
        })
            .catch(() => {});
      },
    }
    export default utils
    

    main.js中全局引入工具库

    import Utils from '@/plugin/utils'
    Vue.prototype.$utils = window.$utils = Utils
    

    如在页面中使用

    this.$utils.alertConfirmReminder("确定要刷新缓存吗?", function () {
            // 执行一些刷新需要的逻辑
          }, "刷新", 'warning');
    

    相关文章

      网友评论

        本文标题:vue,再封装 element MessageBox 弹框

        本文链接:https://www.haomeiwen.com/subject/pkqwqltx.html