iview 封装一个提示框 message

export const messageBox = (_this, operation, content) => {
    // 自定义提示框距离顶部的距离
    _this.$Message.config({
        top: window.innerHeight * 0.1
    });

    // 设置文字内容、以及设置提示框背景色
    if (operation === 'success') {
        _this.$Message.success({ content: content, background: true, prop: { background: 'success' } })
    } else if (operation === 'warning') {
        _this.$Message.warning({ content: content, background: true, prop: { background: 'warning' } })
    } else if (operation === 'error') {
        _this.$Message.error({ content: content, background: true, prop: { background: 'error' } })
    } else if (operation === 'info') {
        _this.$Message.info({ content: content, background: true, prop: { background: 'info' } })
    }
}

由于我是把这个方法封装在一个独立的 util.js 的工具文件里，因此我们使用的时候需要把 this 传递过来，否则会报错，提示找不到 $Message

使用：

// 引入文件
import { messageBox } from "@/Utils/util";
// 使用
messageBox(this, "success", "分配成功！");