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有值的时候，给我们预设的高度重新赋值，这样在不同的设备下可以监听不同的高度，获取不同设备下的高度值。