mint-ui 設置父元素高度自適應

在使用mint-ui的時候，若是父元素沒有高度，那麼輪播的內容不會顯示，子元素也沒法本身撐起這個高度；如今的方式是咱們在不用rem單位的狀況下進行圖片的自適應：

下面直接上代碼解釋

<template>
  <div v-if="swiperList.length" class="slider-wrapper" :style='{height:`${swiperHieght}px`}'>
    <mt-swipe :auto="4000">
      <mt-swipe-item v-for="item in swiperList" :key="item.id">
        <a :href="item.linkUrl">
          <img @load="imgLoad" :src="item.picUrl" alt />
        </a>
      </mt-swipe-item>
    </mt-swipe>
  </div>
</template>

<script>
export default {
  props: ["swiperList"],
  data(){
      return {
          swiperHieght:0
      }
  },
  methods:{
      imgLoad(e){
       if(this.swiperHieght) return
       this.swiperHieght = e.target.clientHeight;
      }
  }
};
</script>
複製代碼

咱們不能在項目中給父元素固定的高度，這個是不能自適應的，那麼咱們就得動態的給父元素添加樣式：:style='{height:${swiperHieght}px}
首先由於咱們的數據都是動態加載的，首先要確保圖片的數據是在加載完成以後，給父元素添加此時圖片的高度： <img @load="imgLoad" :src="item.picUrl" alt /> 給圖片綁定load事件，在load事件裏面確保能夠拿到圖片的高度，當e.target有值的時候，給咱們預設的高度從新賦值，這樣在不一樣的設備下能夠監聽不一樣的高度，獲取不一樣設備下的高度值。

備註：小白，學習筆記，若有問題請留言指出