vue组件化引入message.js文件实现$message消息语句按需引入

最近用vue写项目时有用到$message消息提示语句，又觉得每次添加都要几行代码过于累赘，如下所示

 this.$message({
              showClose: true,
              message: "没有找到记录！",
              type: "warning",
              center: true
            });

当然可以使用简洁的

  this.$message.error('错了哦，这是一条错误消息');

好了，不多说，现在开始

一，创建一个message.js文件

import { Message } from 'element-ui';

export const  warningOpen=(msg)=>{
    Message({
        showClose: true,
        message:msg,   //msg用于传参
        type: "warning",
        center: true,
        duration:3000
     })
}

export const  errorOpen=(msg)=>{
    Message({
        showClose: true,
        message:msg,
        type: "error",
        center: true,
        duration:3000
     })
}

export const  successOpen=(msg)=>{
    Message({
        showClose: true,
        message:msg,
        type: "success",
        center: true,
        duration:3000
     })
}

 export function warningClose(){
    Message.closeAll();//全局关闭所有 Message语句的方法
  }

二，按需引入，在你需要用到的地方直接引入即可

//引入
import  {warningOpen,errorOpen} from '@/assets/JS/message';


//方法
  toSearch() {
       this.chindData = this.$refs.selectData.dataMsg;
      this.$api
        .PREVENT_MANAGE("createdtime=" + this.chindData + "")
        .then(res => {
          if (res.data.errcode == 0) {
            let datas = res.data;
            this.tableData = datas.items;
          }else if(res.data.errcode == 2){           
              this.tableData = [];
              this.Alltotal = 0;

              warningOpen(`${res.data.error}`); //注意，我这里是写成动态提示语，故需要传参数 `${res.data.error}`  ，如你已经在message.js写了自定义的提示语句则不用传参
           
          }else{

           errorOpen(`${res.data.error}`);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },