代码灵感 ——薛定喵君

起因

因为在写博客管理后台的vue项目,里面使用了很多的提示框,正常情况下,就直接调用了 $message方法,但是使用的地方多了起来,导致这样就会有很多冗长的代码,所以抽取了下面的工具类。

正常调用时的使用

 //提示删除成功
          this.$message({
            type: "success",
            center: true,
            message: result.message
          });

抽取工具类

import { MessageBox, Message } from "element-ui";

/**
 * @author 封装 element-ui 弹框
 * @param text
 * @param type
 * @returns {Promise}
 */
export function handleConfirm(text = "确定执行此操作吗?", type = "danger") {
  return MessageBox.confirm(text, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: type
  });
}

/**
 * @author 封装 element-ui 消息提示
 * @param text
 * @param type
 * @returns {Promise}
 */
export function handleAlert(text = "操作成功", type = "success") {
  return Message({
    showClose: true,
    message: text,
    type: type
  });
}

页面vue文件中引用

import { handleConfirm, handleAlert } from '@/utils/confirm'
export default {
  data() {
    return {
      ...
    };
  },
  methods: {
    ...
    handleClose(formName) {
      handleConfirm('系统将不会保存您所做的更改,确定要离开吗?').then(res => {
        ...
      }).catch(err => { 
        console.log('err', err)
      })
    },
    delConfirm(formName) {
      ...
      handleAlert('删除成功')
      ...
    }
  },
  ...
}

效果演示

element-ui消息提示框及确认弹框封装为confirm.js

如果觉得我的文章对你有用,请随意赞赏