11.解决vue中组件形式轮播图片宽高问题

组件形式引入的轮播图，无法具体修改样式，以布尔值控制在标签上加载类，控制样式：

思路：一般轮播图中图片都是，宽度>高度,首页顶部轮播需要宽度百分百，商品详情不需要宽度百分百，会造成图片拉伸变形，所以把 width:100% ，写在轮播图组件待加载类中，通过父组件调用时传入布尔参数，控制类的显示和隐藏，代码如下。

轮播组件：

<template>
  <div>
    <mt-swipe :auto="4000">
      <mt-swipe-item v-for="item in rollMSG" :key="item.id">
        <img :src="item.image" alt="等待加载" :class="{Full:isFull}" >
      </mt-swipe-item>
    </mt-swipe>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  //组件需要接收父组件传来的一个自定义名为 rollMSG 的图片数组
  props:["rollMSG","isFull"],
  methods: {},
  components: {}
};
</script>

<style scoped >
.mint-swipe{
      height: 200px;
    }

    .mint-swipe img{
      height: 100%;
    }
.Full{
    width: 100%;
}
</style>

home 页面引用父组件给子组件传 isFull 控制类是否表达：

 <!-- 轮播组件 -->
    <imgList :rollMSG="rollMSG" :isFull="true" ></imgList>

商品详情页面引用也是父组件给子组件传 isFull 控制类是否表达：

 <!-- 轮播组件 -->
    <roll-img :rollMSG="productMsg" :isFull="false" ></roll-img>