vue组件化引入message.js文件实现$message消息语句按需引入
最近用vue写项目时有用到$message消息提示语句,又觉得每次添加都要几行代码过于累赘,如下所示this.$message({showClose: true,message: "没有找到记录!",type: "warning",center: true...
·
最近用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);
});
},
更多推荐
已为社区贡献19条内容
所有评论(0)