The vue-seamless-scroll plugin click event is invalid? ? ?

Use vue-seamless-scroll to wrap a list of scrolling divs. When the divs in the current list need to be clicked for other logic processing, you will find no effect

There is only one reason: because the dom wrapped in the middle of vue-seamless-scroll is copied and rendered, and there is no dom event.

At this point, we can use event delegation to get the object we clicked with $event.target

 <div class="scroll-list" v-if="safeData.brandList" @click="handleClick($event)">
        <vue-seamless-scroll
          :data="safeData.brandList"
          class="seamless-warp"
          :class-option="classOption"
        >
          <div class="flex line-feed">
            <div
              v-for="(item) in safeData.brandList"
              :key="item.id"
              :data-obj="JSON.stringify(item)"
              class="brand-item pointer"
            
            >
            {
   
   { item.name }}
            </div>
            
          </div>
        </vue-seamless-scroll>
      </div>

When you click to pass the value, it is passed in through data-obj

 handleClick($event){
      const obj =JSON.parse($event.target.dataset.obj)
      this.showDialog(obj)
    },

The current scene needs to get an object.
If you only need an id or name, you can directly pass

:id=“item.id”
:name=“item.name”

The format of the custom attribute in vue is data-xxx,
which is obtained as: e.target.dataset.xxx

Guess you like

Origin blog.csdn.net/m0_70547044/article/details/128375879