1、实现思路:走马灯有一个autoplay属性,决定轮播图是否自定切换,值为boolean,默认为true,很显然,当我们点击了内部的组件时,我们可以通过将该属性的值改为false让其停止轮播,当点击非走马灯组件时,修改其值为true即可。

2、实现过程:

  • 为组件添加autoplay属性,并将值赋值为autoplay变量。
  • 在Vue的data中声明该变量,默认赋值为true(自动轮播)。
  • 在轮播图的容器上添加click.stop方法stopAuto,点击后停止轮播(注意要防止冒泡事件)
  • 在该页面的Vue容器上添加click方法startAuto,点击后开始轮播。
  • 在Vue.js的methods方法中添加

3、完整代码:

<div id="app" @click="startAuto">
	<!-- 这里是你的其它标签 -->
	<!-- 这里是你的其它标签 -->
	<div @click.stop="stopAuto">
		<template>
			<el-carousel :interval="4000" type="card" arrow="never" :autoplay="autoplay" ref="carousel" >
				<el-carousel-item v-for="item in carouseData" :key="item.id" :id="item.id">
					<img alt="" :src="item.url">
				</el-carousel-item>
			</el-carousel>
		</template>
	</div>
	<!-- 这里是你的其它标签 -->
	<!-- 这里是你的其它标签 -->
</div>
var vm = new Vue({
	el:"#app",
	data(){
		return:{
			autoplay: true,
		}
	},
	methods:function(){
		startAuto:function(){
			if(this.autoplay == false){
				this.autoplay = true;
			}
		},
		stopAuto:function(){
			if(this.autoplay == true){
				this.autoplay = false;
			}
		},
	}
})

GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:2 个月前 )
c345bb45 6 个月前
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 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐