使用Element实现轮播图组件(el-carousel)的点击事件,切换到内容页
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
·
使用el-carousel的时候发现默认的@click.native 定义点击事件,当点击当前图片的时候获取当前图片的activeIndex,这个属性是该组件的data中的一个参数,表明当前显示的图片的index,借用这个参数我们可以进行相应的页面跳转具体代码如下:
1、首先将图片的连接和要跳转的连接放到指定的集合imgs里
data: function () {
return {
platform: 'pc',
imgs: [
{url: require('../../assets/image/lun_imgs/201809110947xg7zo5.jpg'), link: '/content1'},
{url: require('../../assets/image/lun_imgs/201809110948yiapy7.jpg'), link: '/content1'},
{url: require('../../assets/image/lun_imgs/201809110956vz3vel.jpg'), link: '/content1'},
{url: require('../../assets/image/lun_imgs/201812260908m7s6g1.jpg'), link: '/content1'},
{url: require('../../assets/image/lun_imgs/2018091104025oqbch.jpg'), link: '/content1'}
]
}
},
2、定义跳转的方法,$refs是vue的内置对象,是所有的代理对象的集合
methods: {
linkTo () {
let activeIndex = this.$refs.carousel.activeIndex
this.$router.push(this.imgs[activeIndex].link)
}
}
3、将该元素定义成代理,并使用@click.native定义点击事件
<el-carousel class="lun_imgs" ref="carousel" @click.native="linkTo">
<el-carousel-item class="lun_img" v-for="item in imgs" v-bind:key="item.url" >
<img :src="item.url"/>
</el-carousel-item>
</el-carousel>
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:5 个月前 )
c345bb45
9 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 9 个月前
更多推荐




所有评论(0)