javascript 好久没更新了 ,来更新一下自己的笔记
最近有移动端的项目迁移到pc端,pc端那一套用的是element-ui的后台框架,所以难免有一些样式不兼容的问题,之前很久的时候也处理过这些,但是很久没处理忘了==,所以之后再遇到兼容的会更新到这篇笔记上,供之后翻阅
1. el-dialog
借助css3的媒体查询
@media screen and(min-width: 220px)and(max-width:600px){.el-dialog{width:90%!important;}}
- 几行css就搞定,不需要去动态的监听获取屏幕宽度啥的,来更改width,这里的意思就是当屏幕宽度小于600px并且大于220px的时候el-dialog设置为90%显示,如果仅仅需要小于某一个值的话用一个and就行,大于某一个值也是一样,改为min-width 即可。
根据document.body.clientWidth设置width
initWidth(){const width = document.body.clientWidth;if(width <600){this.dialogWidth ="90%";}else{this.dialogWidth ="50%";}},
- 在mounted中或者created中获取一下宽度给dialog赋值一下就行。
- 上面的dialog参考自https://blog.csdn.net/qq_31754591/article/details/125403783
- 主要是借助媒体查询,很方便
2: el-button
这个我直接用的是layout布局,手写div整上去的,
代码如下:
<el-row :gutter="20">
<el-col :span="12" :offset="6">
<div @click="closeRiskPopup" :class="{color_str: btnisShow}" class="grid-content bg-purple controlClass">
{{ btnText }}
</div>
</el-col>
</el-row>
style样式
.bg-purple {background: #ff8f04;}.grid-content {
border-radius: 4px;
min-height: 36px;
line-height: 36px;}.controlClass {
font-size: 15px;
font-family: PingFangSC-Medium-, PingFangSC-Medium;
font-weight: normal;
text-align: center;
border-radius:15px;cursor: pointer;}.color_str{
background-color: #dddddd;}
3:message-box
- 在移动端显示弹框一直在顶部的问题:(一句代码搞定)
// messageBox的弹框手机样式
@media screen and(max-width: 750px){.el-message-box {width:80%!important;}}
目前遇到这三个,之后遇到多更新
版权归原作者 巧克力芋泥包 所有, 如有侵权,请联系我们删除。