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

ゞ浴缸里的玫瑰 2023-06-20 10:51 5阅读 0赞

最近用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);
            });
        },