使用Element实现轮播图组件(el-carousel)的点击事件,切换到内容页

使用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定义点击事件

 
           
             
           
         

你可能感兴趣的:(使用Element实现轮播图组件(el-carousel)的点击事件,切换到内容页)