组件形式引入的轮播图，无法具体修改样式，以布尔值控制在标签上加载类，控制样式：
思路：一般轮播图中图片都是，宽度>高度,首页顶部轮播需要宽度百分百，商品详情不需要宽度百分百，会造成图片拉伸变形，所以把 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>
