Element.ui 【走马灯】点击组件后停止轮播,点击其它位置续播
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
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 个月前
更多推荐
已为社区贡献5条内容
所有评论(0)