首页 > 其他分享 >vue-seamless-scroll插件点击事件不生效

vue-seamless-scroll插件点击事件不生效

时间:2024-08-05 11:09:12浏览次数:12  
标签:index 插件 vue seamless 点击 any

vue-seamless-scroll 点击事件不生效

问题:在使用此插件时发现,列表内容前几行还是能正常点击的,但是从第二次出现的列表开始就没有点击事件了
原因:因为html元素是复制出来的(滚动组件是将后面的复制出来一份,进行填铺页面,方便滚动)
解决:往滚动组件的父节点上添加绑定事件(js冒泡机制),通过e.target定位到具体点击位置,然后判断点击位置是否是你滚动组件的一列/行

具体实现

 <div class="boxContent-public-main" @click="chooseCompany">
      <vue-seamless-scroll
        class="warp"
        v-if="companyList.length > 0"
        :data="companyList"
        :class-option="classOption"
      >
        <div class="warp-item">
          <div
            class="warp-item-li"
            v-for="(item, index) in companyList"
            :key="item.id"
            :chooseIndex="index" // 自定义参数,为了方便能获取到点击的哪一项(也可以使用JSON.stringify(item);)
          >
            <div class="warp-item-left">
              <span class="warp-item-left-title">{{ item.name }}</span>
              <em class="">({{ item.address }})</em>
            </div>

            <div class="warp-item-right" v-html="item.intro"></div>
          </div>
        </div>
      </vue-seamless-scroll>

      <div v-else class="none">暂无公司数据...</div>
    </div>


 chooseCompany(e: any) {
    const child: any = e.target.closest(".warp-item-li"); // 获取点击的那一项
    let index: any = child.getAttribute("chooseIndex"); // 获取那一项自定义的 chooseIndex参数
    if (index) {
        // 逻辑代码...
      (this.$parent as any).showCompanyDialog(this.companyList[index]);
    }
  }

标签:index,插件,vue,seamless,点击,any
From: https://www.cnblogs.com/ProgrammerMao-001/p/18342777

相关文章