vue图片在el-carousel中的自适应
1、html编码<el-carousel height="600px" indicatorPosition="outside" ref="carousel" @click.native="linkTo"><el-carousel-item class="carousel-item" v-for="item in imgs" v-bind:key="item.url...
1、html编码
<el-carousel height="600px" indicatorPosition="outside" ref="carousel" @click.native="linkTo">
<el-carousel-item class="carousel-item" v-for="item in imgs" v-bind:key="item.url">
<img class="carousel-img" :src="item.url">
</el-carousel-item>
</el-carousel>
2、数据
imgs: [
{url: require('../../assets/images/test1.jpg'), link: '/content1'},
{url: require('../../assets/images/test2.jpg'), link: '/content2'},
{url: require('../../assets/images/test3.jpg'), link: '/content3'}
]
methods: {
linkTo () {
let activeIndex = this.$refs.carousel.activeIndex
this.$router.push(this.imgs[activeIndex].link)
}
}
3、格式编码
.carousel-item {
width: 100%;
height: 100%;
background: white;
display: flex;
justify-content: center;
}
.carousel-img {
max-width: 100%;
max-height: 100%;
}
更多推荐
所有评论(0)