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

3 篇文章 0 订阅
12 篇文章 0 订阅

地址

遇到的问题

  • 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()
 },
  • 0
    点赞
  • 1
    收藏
  • 打赏
    打赏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:数字20 设计师:CSDN官方博客 返回首页
评论 2

打赏作者

第十人i

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值