[Vue]获取窗口的尺寸从而做到组件样式响应式变化

当Vue页面需要显示在不同尺寸的移动端屏幕上时，一些固定尺寸的组件就会有不一致的表现效果。在使用element样式库时，有些组件还是贴心的给出了

:width

的参数，可以使用

:width:200

直接修改宽度；但有些组件就没有提供这种方法，比如文件拖动上传组件的尺寸是写死的360×180，并且无法通过改变父元素

upload-demo

的样式来修改内部样式：

而现在的一个需求就是想让这个组件的宽度永远填满页面。

修改组件内部class的样式

修改element的内部样式的两种方式

• 首先在组件上添加自己的一个样式类

  <template>
  	<el-upload
          class="upload-demo my-upload-dragger"
          drag
     >
  </template>
             

• 然后用组件穿透式的方式去修改内部的class样式

  <style scoped>
  .my-upload-dragger >>> .el-upload-dragger{
    width:400px !important;
  }
  </style>
             

• 观察到宽度已经发生改变

动态获取页面窗口宽度

基于element的网站自适应方案（移动端适配）

<script>
	export default{
        methods:{
            getWidth(){
                return window.innerWidth; // 例：540
            }
        }
    }
</script>
           

动态改变尺寸

vue动态样式绑定改变伪元素等特殊样式(css var函数)

vue中动态style(如何动态修改伪元素样式)

• 在css文件中可以使用变量
  • 使用

    --

    两根短划线开头来命名，大小写敏感：

    --myVar: 100px

  • 获取值时使用

    var()

    ：

    width: var(--myVar)

• 动态在父元素（组件本身）的style中使用方法动态赋值css变量：

  <template>
  	<el-upload
          class="upload-demo my-upload-dragger"
          drag
          :style="{'--autoWidth':getWidth()}"
     >
  </template>
  <script>
  	export default{
          methods:{
              getWidth(){
                  var myWidth=window.innerWidth-20*2; //减去外部大面板的padding
                  return myWidth+'px'; // 例：500px
              }
          }
      }
  </script>
             

• 最后在样式中结合上面改变内部标签样式的方式使用变量：

  <style scoped>
  .my-upload-dragger >>> .el-upload-dragger{
    width:var(--autoWidth) !important;
  }
  </style>
             

• 得到的最终效果：

MINE MIND系列将在我的GitHub上实时更新，同时精选部分汇总于CSDN专栏

GitHub仓库：https://github.com/IcyLeaves/MINE-MIND

CSDN专栏：https://blog.csdn.net/qq_37398834/category_10975647.html