vue ＋ elementui实现dialog自适应窗口的效果

最新推荐文章于 2025-05-09 09:30:00 发布

ColourfulTiger

最新推荐文章于 2025-05-09 09:30:00 发布

阅读量2.5w

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue elementui

本文链接：https://blog.csdn.net/ColourfulTiger/article/details/81901984

vue 专栏收录该内容

29 篇文章

订阅专栏

本文介绍如何在Vue和ElementUI中解决Dialog组件在浏览器缩放时变形的问题。通过设置min-width，调整el-col的span值，以及应用自定义CSS，确保在浏览器最小化时Dialog仍能保持良好视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在使用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;
  }		
}