解决vue自定义全局消息框组件问题

2023-08-08 09:54:03 138

1.发现问题

在进行移动端适配的时候，为了在各个型号的设备上能够更好的提现结构排版，决定采用rem布局。采用rem布局的时候html的字体font-size是有一个标准的。我这边用的是750px的设计稿，就采用1rem=100px。

在使用的过程中会用到一些第三方UI组件，而第三方UI组件是以px单位为标准的。

使用时发现：本来应该细长的提示语句变得很大！

最后发现可能是因为这个icon是继承了html设定的font-size，尝试加一些样式上去还是无效。（如果rem布局上有直接更改第三方组件样式成功的小伙伴欢迎告诉我哟！）

2.解决问题

有一种方法是可以可以用px2rem-loader插件可以将第三方ui库的px转换成rem单位，我们在写样式的时候用px，这个插件会帮我们转换为rem单位。（因为暂时只是一个提示框遇到这样的问题，不想大费周章，所以决定暂时不用，以后再用吧嘿嘿！）

自己写小组件，在网上冲浪了一会，选了几个小demo实现可以了下，确实比较好！（采用这个方法！）

3.自定义全局消息组件

大概效果有点模仿element-ui中的提示样式，反正最后效果图如下：

vue-cli3中component下新建message文件夹，里面再建如下：

Message.vue源代码如下：






/*动画效果淡入淡出*/
.fade-enter-active,.fade-leave-active{
transition:all0.5sease;
}
.fade-enter,.fade-leave-active{
opacity:0;
}
/*不同的提示语的样式*/
.info,.icon-info{
background-color:#DDDDDD;/*#f0f9eb*/
color:#909399;
}
.success,.icon-success{
background-color:#f0f9eb;
color:#67C23A;
}
.warning,.icon-warning{
background-color:#fdf6ec;
color:#e6a23c;
}
.error,.icon-error{
background-color:#fef0f0;
color:#f56c6c;
}
.message{
position:fixed;
left:50%;
top:10%;
transform:translate(-50%,-50%);
width:300px;
height:30px;
line-height:30px;
font-size:16px;
padding:10px;
border-radius:5px;
.content{
width:100%;
height:100%;
text-align:left;
.icon-type{
margin:010px030px;
}
.btn-close{
font-size:20px;
margin:00070px;
color:#ccc;
}
}
}

index.js源代码如下：

给Vue添加$my_message方法，判断参数，使用$mount()给组件手动挂载参数，然后将组件插入页面中

importVuefrom'vue'
importMessagefrom'./Message.vue'

constMessageBox=Vue.extend(Message)

Message.install=function(options,type){
if(options===undefined||options===null){
options={
content:''
}
}elseif(typeofoptions==='string'||typeofoptions==='number'){
options={
content:options
}
if(type!==undefined&&options!==null){
options.type=type
}
}

letinstance=newMessageBox({
data:options
}).$mount()

document.body.appendChild(instance.$el)

Vue.nextTick(()=>{
instance.visible=true
})
}

exportdefaultMessage

main.js中：

//在main.js里面全局引入自定义的全局消息框组件
importMessagefrom'./components/message'
Vue.prototype.$my_message=Message.install

页面中调用：

this.$my_message('你这个大笨猪吼吼吼！');
this.$my_message('你这个大笨猪吼吼吼！','success');
this.$my_message({
content:'服务器连接失败！',//弹出的文字内容
time:5000,//弹出后多久消失
type:'success',//弹出的消息类型
hasClose:true,//让按钮可以被使用，默认按钮是false不可以使用的

});

4.注意事项

本Demo中弹出的提示语句中的小图标是iconfont里面的。

总结

以上所述是小编给大家介绍的解决vue自定义全局消息框组件问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

解决vue自定义全局消息框组件问题

热门推荐

随机推荐