自定义网站建站公司,iis7发布网站教程,线上编程,岳阳市内从事网站建设的公司javascript 好久没更新了 ,来更新一下自己的笔记 最近有移动端的项目迁移到pc端,pc端那一套用的是element-ui的后台框架,所以难免有一些样式不兼容的问题,之前很久的时候也处理过这些,但是很久没处理忘了,所以之后再遇到兼容的会更新到这篇笔记上,供之后翻阅 1. el-dialog
借… 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 :gutter20el-col :span12 :offset6div clickcloseRiskPopup :class{color_str: btnisShow} classgrid-content bg-purple controlClass{{ btnText }}/div/el-col/el-rowstyle样式
.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;}}目前遇到这三个,之后遇到多更新
