vue封装element组件,
摘要：本文主要介绍了el-message在vue中的封装和使用，并通过实例代码进行了详细介绍，具有一定的参考价值。感兴趣的朋友可以参考一下。
目录
前言实现方法1、方法2、方法3(如果有不完整的方法，可以带着问题看方法4)方法4、方法5最后
前言
最近对项目进行了改造，发现在el-message的使用中，如果服务器被挂机或者重启，页面消息上会弹出很多错误消息，看起来非常不雅观。因此，el-message进行了重写和改革。这里记录了改革中遇到的问题及其实施情况，希望对你有所帮助。
实现方法
实现的方法有很多。你可以根据自己的实际项目情况来决定用哪一个。
方法一
在css中直接给出这个样式很简单方便，但是有一个问题是这样的。所有消息重叠，简单文字的动画效果不好，不推荐。el消息{
顶：20px！重要；
}
方法二
直接用el-message的closeAll方法也很简单，先关闭所有消息再播放，但是会有明显的抖动，所以不太推荐(不介意的话也可以这样写)。
这个。$ message . close all()；
这个。$message.error(错误提示3 )；
方法三(有残缺的方法，可以带着问题看方法4)
转换message，重写message方法，创建一个新的message.js，定义一个类，给这个类四个方法：success，error，info，warning。根据el-message的用法，有两种情况：这个。$message.success(“测试成功消息”)和this。$ message ({type: success ，message:测试成功消息 })，所以要根据传入的值是字符串还是对象来做判断。
从“element-ui”导入{ Message }；
类消息{
构造函数(){
[成功，错误，信息，警告]。forEach((类型)={
此[类型]=功能(选项){
if (isObject(options)) {
const { type=info ，rest }=options
消息({
类型，
.休息，
});
返回；
}
消息({
类型：类型，
消息：选项，
});
};
});
}
}
//判断传入的是否为对象
功能是对象(内容){
返回(
Object . prototype . tostring . call(content)==[Object Object]
！内容.消息
);
}
导出默认的新消息；
然后在main.js中引入并覆盖el-message方法
从“@/utils/message”导入z message；
vue . prototype . $ message=z message；
这样就完成了消息重写的第一步，第二步需要判断当前的消息数。如果小于1，它会弹出消息，并仔细观察消息。我们可以通过document . getelementsbyclassname( El-message )获得当前的子弹盒数量。长度，如果大于或等于1，就不再反弹，如果小于1，就不再反弹。
类消息{
构造函数(){
[成功，错误，信息，警告]。forEach((类型)={
此[类型]=功能(选项){
//此处添加一个判断
if(document . getelementsbyclassname( El-message )。长度===0) {
if (isConfig(选项)){
const { type=info ，rest }=options
消息({
类型，
.休息，
});
返回；
}
消息({
类型：类型，
消息：选项，
});
}
};
});
}
}
这样即使多次触发消息，也只会弹出一条消息。就在我以为完成了的时候，我发现还有新的问题：
问题1:这个。$ message ({type: error ，message: test message})报错问题2:被弹回的消息不会更新，只有在前一条消息消失后才会出现新的。
方法四
第三个方法有两个问题，需要对第三个方法进行改造，或者说这里没有使用文件message.js类，因为对外导出的方法是new ZMessage()，message的值不能直接传递，所以还没想好怎么传递，所以不需要类，所以对ZMessage进行改造。
const ZMessage=函数（选项){
if (isObject(options)) {
const { type=info ，rest }=选项
showMessage({
类型，
.休息，
})
返回；
}
showMessage({
type: options.type info ，
消息：选项，
})
};
[成功,错误,信息,警告]。forEach((类型)={
ZMessage[type]=函数（选项){
if (isObject(options)) {
ZMessage({
类型：类型，
.选项，
});
返回；
}
ZMessage({
类型，
消息：选项，
});
};
});
功能是对象（内容){
返回（
对象。原型。托斯特林。调用(内容)==[对象对象]
！内容。消息
);
}
函数显示消息（选项){
消息({
.选择
});
}
导出默认消息；
这样第一个问题，这个. message({type:错误，消息：测试消息})就不会报错了，接下来解决第二个问题，值不会更新的问题，可以定义一个msgInstance变量，如果有新的值来了，就关闭上一个消息
var msgInstance=null
const ZMessage=函数（选项){
if (msgInstance) {
//更新弹框
消息实例。close()；
}
if (isObject(options)) {
const { type=info ，rest }=选项
showMessage({
类型，
.休息，
})
返回；
}
showMessage({
type: options.type info ，
消息：选项，
})
};
[成功,错误,信息,警告]。forEach((类型)={
ZMessage[type]=函数（选项){
if (isObject(options)) {
ZMessage({
类型：类型，
.选项，
});
返回；
}
ZMessage({
类型，
消息：选项，
});
};
});
功能是对象（内容){
返回（
对象。原型。托斯特林。调用(内容)==[对象对象]
！内容。消息
);
}
函数显示消息（选项){
msgInstance=Message({
.选择
});
}
导出默认消息；
这样就完美解决了上面出现的两个问题，到这里目标基本已经实现；但是，又想到如果要求不止出现一个消息，我要只出现两个甚至多个怎么办，所以在方法四的基础上，改造出来方法五，参考蚂蚁设计公司，对最大数量可调配。
方法五
定义一个最大数量参数，需要消息全局定义，在调用消息方法之前，先定下消息的最大数量，每次点击弹框的时候都往邮件列表里面插入一个当前的消息实例，关闭的时候将这条数据删除，再给消息新加一个配置方法，最大计数就传给配置方法，在这个里面配置。
从"元素-用户界面"导入{邮件}；
//定义消息的当前数量
var消息列表=[]；
//定义初始最大数量
var messageMaxCount=0；
const ZMessage=函数（选项){
if(message maxcount消息列表。长度=消息最大计数){
//更新弹框
邮件列表[0]。close()；
}
if (isObject(options)) {
const { type=info ，rest }=选项
messageList.push(
showMessage({
类型，
.休息，
})
);
返回；
}
messageList.push(
showMessage({
type: options.type info ，
消息：选项，
})
);
};
[成功,错误,信息,警告]。forEach((类型)={
ZMessage[type]=函数（选项){
if (isObject(options)) {
ZMessage({
类型：类型，
.选项，
});
返回；
}
ZMessage({
类型，
消息：选项，
});
};
});
ZMessage.config=函数（选项){
const { maxCount }=选项
if (maxCount) {
if (typeof maxCount！==number) {
返回console.error(参数类型错误：maxCount应为数字类型);
}
messageMaxCount=maxCount
}
};
功能是对象（内容){
返回（
对象。原型。托斯特林。调用(内容)==[对象对象]
！内容。消息
);
}
函数显示消息(选项){
const { onClose:close，rest }=options
返回消息({
.休息，
//关闭时，除了传入的close方法，还需要删除对应的实例。
onClose: (val)={
如果(关闭){
关闭()
}
message list=message list . filter((item)=item . id！=val . id)；
},
});
}
导出默认消息；
使用：
这个。$message.config({
最大计数：3
})
最后
至此，el-message已经转型。以上方法你可以根据自己的实际情况任意使用。希望这篇文章对你有帮助。还有其他方式评论留言，让大家一起学习，共同进步。
关于在vue中封装和使用el-message的文章到此结束。有关vue el-message封装的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。