<div v-html="item.comment" ref="content" @click="imageChagange($event)">{{item.comment}}</div>
<el-image-viewer v-if="showViewer" :on-close="closeViewer" :url-list="srcListView" />
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
components: { ElImageViewer},
data() {
srcListView: null,
showViewer: false,
}
//富文本渲染图片点击
imageChagange(e) {
if (e.target.nodeName === 'IMG' || e.target.nodeName == 'img') {
//判断是否图片标签
const img = e.target.currentSrc //获取点击图片地址
this.onPreview([img])
}
},
//开启图片预览
onPreview(imgList) {
this.srcListView = imgList
this.showViewer = true
},
//关闭图片预览
closeViewer() {
this.showViewer = false
},
若需要可切换下一张
<div v-html="item.comment" :id="'htmlContent'+index" :ref="'htmlContent'+index" @click="imageChagange($event,index)">{{item.comment}}</div>
<el-image-viewer v-if="showViewer" :initial-index="viewerIndex" :on-close="closeViewer" :url-list="srcListView" />
// 重点是:initial-index="viewerIndex"
data(){
viewerIndex: 0
}
//富文本渲染图片点击
imageChagange(e, idx) {
console.log('e', e)
let currentImg = e.target.currentSrc
console.log('currentImg', currentImg)
// 得到当前评论的所有的img节点
const imgs = document.getElementById('htmlContent' + idx).querySelectorAll('img')
this.srcListView = []
imgs.forEach((img, index) => {
this.srcListView.push(img.src)
//拿到当前图片的索引!!!
if (currentImg == img.src) {
this.viewerIndex = index
}
})
this.showViewer = true
// 单张预览
// if (e.target.nodeName === 'IMG' || e.target.nodeName == 'img') {
// //判断是否图片标签
// const img = e.target.currentSrc //获取点击图片地址
// this.onPreview([img])
// }
},