[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