使用v-viewer被覆盖

最新推荐文章于 2025-03-24 13:51:51 发布

从前有个帅哥孙

最新推荐文章于 2025-03-24 13:51:51 发布

阅读量780

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_44119403/article/details/111247708

版权

在Vue项目中使用v-viewer组件时，遇到一个问题：当在表格中点击图片弹出查看器，然后在修改对话框中再次使用v-viewer，关闭对话框后，点击表格中的其他图片，查看器显示的是之前对话框中的图片。原来是由于class和查询选择器的类名相同导致的覆盖。解决方法是为不同场景的v-viewer更改class和this.$el.querySelector中的类名，避免冲突。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用v-viewer被覆盖

在表格里，使用了v-viewer，点击图片就会弹出，是没有问题
在这里插入图片描述
页面代码

<!--图片预览-->
<div class="images" v-viewer="{movable: false}">
  <img :src="dialogImageUrl" style="display: none;">
</div>

js代码

// 点击表格图片放大图片
showImg (row, column, cell, event) {
  if (column.label == '产品图片') {
    this.dialogImageUrl = row.pic
    const viewer = this.$el.querySelector('.images').$viewer
    viewer.show()
  }
}