Element.ui 【走马灯】点击组件后停止轮播，点击其它位置续播

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;
			}
		},
	}
})