地址
遇到的问题
- 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>
GotoImage(e) {
if (e.target.tagName === 'IMG') {
const id = e.target.dataset.id
console.log(id)
this.getRefImage()
this.removeClass()
}
},
- 结合使用 点击无缝滚动弹出图片, 只有部分能自动响应弹出
- 解决:
GotoImage(e) {
if (e.target.tagName === 'IMG') {
const id = e.target.dataset.id
console.log(id)
this.getRefImage()
this.removeClass()
}
getRefImage() {
const value = this.$refs.scroll.$viewer
value.show()
},