vue element轮播图实现点击图片切换路由

最新推荐文章于 2024-07-27 17:10:43 发布

李一根

最新推荐文章于 2024-07-27 17:10:43 发布

阅读量2.7k

点赞数 1

文章标签： vue elementui

本文链接：https://blog.csdn.net/weixin_44346829/article/details/115952613

版权

本文档介绍了如何在Vue项目中结合ElementUI实现轮播图组件，并通过点击图片实现路由切换。关键点在于使用`@click.native`确保事件能够正确触发，同时在`data`中定义图片及对应路由的数组，`methods`中定义`linkTo`方法进行路由跳转。在CSS部分，应用了ElementUI的默认样式并进行了简单的背景色定制。

摘要由CSDN通过智能技术生成

element轮播图实现点击图片切换路由

确保已经安装了elementui，并且注册好了路由
elementui官网（安装和轮播组件文档都有详细说明，不赘述）
开始改造vue组件

html部分
- router-link标签@click事件，绑定的事件无效，因为router-link的作用是单纯的路由跳转，会阻止click事件，如果不加 .native, 事件是不会触发的

//html部分
<template>
	<div>
		<el-carousel :interval="4000" type="card" height="200px"  ref="carousel" @click.native="linkTo">
		<!---注意：@click后加.native--->
        	<el-carousel-item v-for="item in imgs" :key="item.url">
          		<img :src="item.url"/>
        	</el-carousel-item>
     	 </el-carousel>
	</div>
</template>

JS部分
- 图片显示问题：用require(’ ')，
- 关于图片引入的格式：
  '…/assets/image/qqgroup.jpg’是绝对路径引入。如果以后图片移动了位置，代码也需要相应修改。
  '@/assets/image/qqgroup.jpg’是动态引入（我自己用有时候会报错有时候又不会，之前报错的时候没注意看错误提示，之后发现了再更新）

<script>
export default {
  name: "index",
  data() {
    return {
          imgs: [
          		 {url: require('../assets/image/qqgroup.jpg'), link: '/business/info_attchment_testyz'},
        		 {url: require('@/assets/image/qqgroup.jpg'), link: '/business/info_attchment_testjg'},
        		 //{url: require('图片地址'), link: '路由地址'},
      		]
    	};
  },
  
  methods: {
    linkTo () {  //跳转路由
      let activeIndex = this.$refs.carousel.activeIndex
      this.$router.push(this.imgs[activeIndex].link)
    }
  },
};
</script>

CSS部分

//直接用的elementui提供的默认格式
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}