记录nuxt 使用 vue-seamless-scroll 无缝滚动和 v-viewer点击放大图片的组件

地址

• v-viewer 点击图片放大
• vue-seamless-scroll 无缝滚动

遇到的问题

• v-viewer 点击图片无法响应事件
• 解决: 使用事件委托 GotoImage()

<client-only>
      <scroll-seamless
        :data="list"
        :class="ScrollClass"
        :class-option="options"
        // 事件委托
        @click.native="GotoImage($event)"
      >
        <div>
          <template v-if="(title && !title.layout) || title.layout === '1'">
            <div class="scroll-container" v-viewer.rebuild="optionsView" ref="scroll">
              <div class="image" v-for="(item, index) in list" :key="index + item.url">
                <img @click="ChangeImg(item)" :src="item.url" alt :data-id="item.id" />
                <div class="title">{{ item.title }}</div>
              </div>
            </div>
          </template>

          <template v-if="title && title.layout === '0'">
            <div class="scroll-container" v-viewer.rebuild="optionsView" ref="scroll">
              <div class="image-layout-one" v-for="(item, index) in list" :key="index + item.url">
                <img @click="ChangeImg(item)" :src="item.url" alt :data-id="item.id" />
                <div class="title-one">{{ item.title }}</div>
                <div class="content-one">{{ formatContent(item.subTitle) }}</div>
              </div>
            </div>
          </template>
          <!-- <div class="scroll-container-content">内容</div> -->
        </div>
      </scroll-seamless>
    </client-only>


// methods 
// 点击图片
 GotoImage(e) {
   // 注册事件委托
   if (e.target.tagName === 'IMG') {
     const id = e.target.dataset.id
     console.log(id) // 这里获取点击节点的 data-id
     this.getRefImage()
     this.removeClass()
   }
 },

• 结合使用 点击无缝滚动弹出图片， 只有部分能自动响应弹出
• 解决:

// methods
GotoImage(e) {
 // 注册事件委托
 if (e.target.tagName === 'IMG') {
   const id = e.target.dataset.id
   console.log(id) // 这里获取点击节点的 data-id
   // 调用 获取v-viewer的实例
   this.getRefImage()
   this.removeClass()
 }
 // 获取弹出图片显示的实例
 getRefImage() {
   const value = this.$refs.scroll.$viewer
   // 调用显示方法  就可以全部显示出来了
   value.show()
 },