Element.ui 【走马灯】点击组件后停止轮播,点击其它位置续播
1、实现思路:走马灯有一个autoplay属性,决定轮播图是否自定切换,值为boolean,默认为true,很显然,当我们点击了内部的组件时,我们可以通过将该属性的值改为false让其停止轮播,当点击非走马灯组件时,修改其值为true即可。2、实现过程:为组件添加autoplay属性,并将值赋值为autoplay变量。在Vue的data中声明该变量,默认赋值为true(自动轮播)。在轮播图的容器上
·
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;
}
},
}
})
更多推荐
已为社区贡献10条内容
所有评论(0)