zoukankan      html  css  js  c++  java
  • vue中使用轮播图插件carousel,克隆的图片点击事件无效的解决办法

     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 的参数都为小写)

  • 相关阅读:
    VS与ultraedit 正则表达式替换
    Java学习第十七天
    Java学习第十六天
    Java学习第十五天
    Java学习第十四天
    Java学习第十三天
    Java学习第十二天
    Java学习第十一天
    Java学习第十天
    Java学习第九天
  • 原文地址:https://www.cnblogs.com/jiawei-Wang/p/11359547.html
Copyright © 2011-2022 走看看