在使用dialog的时候,或多或少会遇到一个问题:当浏览器被缩放到最小的时候,dialog被挤变形啦,里面的内容如果是固定宽高的话,会变得额外的丑陋。怎样结合vue来改变这一现象呢?思路如下:
浏览器的缩放,我们是无法控制的,但是我们可以改变的是我们的网页内容。
1、给定一个最小宽度,当浏览器缩放到某一程度的时候,我们的内容就不在支持缩放的效果了。
即:min-width 设置成一个固定的值
2、改变el-col中的: span 的值,总的为24,我们在浏览器缩放到最小的时候将这一个值换成24,最大化显示。
即:dialog最小时,el -col要用最大的,保证视觉效果最佳。
3、结合自定义的css使用
@media screen and (max-width: 780px) {
.el-dialog--small{
width: 380px !important;
}
}
@media screen and (min-width: 990px) {
.el-dialog--small{
width: 700px !important;
}
}
注意区间的问题,使用min是表示 >该值,max 表示< 该值。
案例如下:
<el-col :span="24">
<el-col :span="testspan">
<el-form-item label="三部分" prop="">
<el-input v-model="" @change=""></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<span class="seqnum-desc">xxxxx</span>
</el-col>
</el-col>
data部分设计:
data() {
return {
screenWidth: document.body.clientWidth, //设置的监听屏幕的变化
testspan: 12, //监听media带来的页面缩放的问题,使其值改为:24
}
}
逻辑处理部分:
watch: {
screenWidth (val) {
if(val < 990){
this.testspan = 24;
}else{
this.testspan = 12;
}
}
},
mounted () {
const that = this
window.onresize = () => {
return (() => {
window.screenWidth = document.body.clientWidth
that.screenWidth = window.screenWidth
})()
}
},
/*media dialog*/
.el-select {
width: 100%;
}
@media screen and (max-width: 780px) {
.el-dialog--small{
width: 380px !important;
}
}
@media screen and (max-width: 990px) {
.seqnum-desc{
display: none;
}
}
@media screen and (min-width: 990px) {
.el-dialog--small{
width: 700px !important;
}
}