标签:元素 box 轮播图 loop 传参 span key code swiper
1 <div class="students-box" @click="clickSwiper"> 2 // 将点击事件绑定在父元素上 3 <carousel 4 :items="5" 5 :autoplay="true" 6 :nav="true" 7 :margin="20" 8 :loop="true" 9 :autoplayTimeout="3000" 10 :autoplayHoverPause="true" 11 > 12 <div v-for="(item, index) in members" :key="index" class="list-item"> 13 <div> 14 <img :src="item.image" class="list-img" :data-itemId="item.id" />15 </div> 16 <div class="list-title" :data-itemId="item.id">{{item.title}}</div> 17 </div> 18 </carousel> 19 </div>
往需要绑定点击事件的元素上通过 :data-传参
1 clickSwiper(e) { 2 console.log(e); 3 if (e.target.dataset.itemid) { 4 let id = parseInt(e.target.dataset.itemid); 5 // 取到参数 6 } 7 }
通过 e.target.dataset 取到参数(注意 e.target.dataset 的参数都为小写)
vue中使用轮播图插件carousel,克隆的图片点击事件无效的解决办法
标签:元素 box 轮播图 loop 传参 span key code swiper
原文地址:https://www.cnblogs.com/jiawei-Wang/p/11359547.html