通过vue走马灯组件制作轮播图
carousel.vue:子组件(存放了轮播图组件)
index.vue:父组件(通过传递参数,决定子组件的宽、高和展示图片)
carousel.vue
<template>
<div class="block">
<el-carousel :height="heightStyle" ref="carousel" :interval="3000" arrow="always"
:style="widthStyle" @click.native="linkTo">
<el-carousel-item class="carousel-item" v-for="item in imgs" :key="item.url">
<img class="carousel-img" :src="item.url" />
</el-carousel-item>
</el-carousel>
</div>
</template>
<script>
export default {
name: "carousel",
props: {
width: {type: String},
imgs: {type: Array},
height:{type: String}
},
computed: {
widthStyle: function () {return {width: this.width + "px"};
heightStyle: function () {return this.height + "px";},
},
methods: {
linkTo() {
let activeIndex = this.$refs.carousel.activeIndex;
this.$router.push(this.imgs[activeIndex].link);
},
},
};
</script>
<style scoped>
.carousel-item {
width: 100%;
height: 100%;
background: white;
display: flex;
justify-content: center;
}
.carousel-img {
max-width: 100%;
max-height: 100%;
}
</style>
index.vue
<template>
<ly-grid>
<carousel :imgs="imgs" height="400" width="600"></carousel>
</ly-grid>
</template>
<script>
import carousel from "./components/carousel";
export default {
name: "index",
components: { carousel },
data() {
return {
imgs: [
{ url: require("@/assets/carousel/pic1.png"), link: "/content1" },
{ url: require("@/assets/carousel/pic2.png"), link: "/content2" },
{ url: require("@/assets/carousel/pic3.png"), link: "/content3" },
{ url: require("@/assets/carousel/pic4.png"), link: "/content4" },
{ url: require("@/assets/carousel/pic5.png"), link: "/content5" },
],
};
},
};
</script>