viewerjs图片url更新后视图不更新

<template><Drawerv-model="visible"title="图片预览"placement="right"closable:mask="false"width="45%"><template v-for="(item, index) in imgList"><div:key="index"style="display: flex"><div class="title">{{ item.name }}</div><div class="image-wrapper"><img:id="item.url + index":src="item.url"></div></div></template></Drawer>
</template><script>
import { Drawer } from 'view-design';
import Viewer from 'viewerjs';export default {name: 'ImageViewer',components: {Drawer,},props: {imgList: {type: Array,required: true,},},data() {return {visible: false,imageObject: {},};},mounted() {// this.imgList.forEach((item, index) => {//   const imgDOM = document.getElementById(item.url + index);//   if (imgDOM) {//     const viewer = new Viewer(imgDOM, {//       inline: true,//       navbar: false,//       title: false,//       toolbar: {//         zoomIn: {//           show: 1,//           size: 'large',//         },//         zoomOut: {//           show: 1,//           size: 'large',//         },//         oneToOne: {//           show: 1,//           size: 'large',//         },//         reset: {//           show: 1,//           size: 'large',//         },//         prev: 0,//         play: {//           show: 0,//         },//         next: 0,//         rotateLeft: {//           show: 1,//           size: 'large',//         },//         rotateRight: {//           show: 1,//           size: 'large',//         },//         flipHorizontal: {//           show: 1,//           size: 'large',//         },//         flipVertical: {//           show: 1,//           size: 'large',//         },//       },//       viewed() {//         viewer.zoomTo(0.4);//       },//     });//   }// });},methods: {show() {this.visible = true;this.imgList.forEach((item, index) => {const imgDOM = document.getElementById(item.url + index);if (imgDOM) {const viewerName = `viewer${index}`;if (this.imageObject?.[viewerName] !== null) {this.imageObject?.[viewerName]?.destroy(); // 更新视图前需要先销毁之前的视图，否则更新无效} // 给到具体的viewer值this.imageObject[viewerName] = new Viewer(imgDOM, {inline: true,movable: true,navbar: false,title: false,toolbar: {zoomIn: {show: 1,size: 'large',},zoomOut: {show: 1,size: 'large',},oneToOne: {show: 1,size: 'large',},reset: {show: 1,size: 'large',},prev: 0,play: {show: 0,},next: 0,rotateLeft: {show: 1,size: 'large',},rotateRight: {show: 1,size: 'large',},flipHorizontal: {show: 1,size: 'large',},flipVertical: {show: 1,size: 'large',},},viewed() {this.viewer.zoomTo(0.5);},show() {this.viewer.update(); // 动态数据，更新视图},});}});},},
};
</script><style lang="less" scoped>
.title {font-size: 16px;font-weight: 800;margin-bottom: 8px;width: 8em;display: flex;justify-content: center;//align-items: center;margin-top: 8px;margin-left: -16px;
}.image-wrapper {width: 100%;margin-bottom: 8px;& img {height: 30vh;}
}/deep/ .viewer-footer {position: absolute;top: 0;right: 0;width: 50px;left: 90%;& .viewer-toolbar {display: flex;height: 100%;align-items: center;& ul {display: flex;flex-direction: column;position: absolute;right: 8px;height: 250px;justify-content: space-between;}}
}
</style>

show() {
this.viewer.update(); // 动态数据，更新视图
},
show方法更新视图前需要先把之前的视图销毁,如果是数组就要根据里面每项/某项进行销毁

viewerjs图片url更新后视图不更新相关推荐

Word图片自动编号，调整图片顺序自动更新图片编号，引用该图片的地方也对应更新
Word图片自动编号,调整图片顺序自动更新图片编号,引用该图片的地方也对应更新 1.软件环境⚙️ 2.问题描述
如何屏蔽 iOS 16 软件自动更新，去除更新通知和标记
如何禁用 iPhone.iPad 软件自动更新.适用于 iOS.iPadOS 和 watchOS,即 iPhone.iPad 和 Apple Watch 通用. 请访问原文链接:https://sys ...
使用POI，实现excel文件导出，图片url导出文件，图片和excel文件导出压缩包
最近做了一个excel导出的功能,字段涉及到了图片.但是需求是:导出一个压缩包,压缩包包含一个excel文件和多张图片,图片命名按照业务来区分唯一. 准备工作实体类 public class Mes ...
如何彻底禁止 macOS Monterey 自动更新，去除更新标记和通知
请访问原文链接:如何彻底禁止 macOS Monterey 自动更新,去除更新标记和通知,查看最新版.原创作品,转载请保留出处. 作者主页:www.sysin.org 随着 macOS Montere ...
android 更新平台,Android更新平台架构方案
这篇文章是去年写的,我们的两款app一直这使用umeng的更新服务,但是16年umeng开始放弃更新服务,考虑到切换到其他更新平台也会面临这样的问题,我开始着手自己搭建一个更新平台.整体方案包含前后端 ...
蓝点linux_新闻速读 gt; Windows 10 的 Linux 内核将像驱动程序一样由微软更新服务进行更新 | Linux 中国...
本文字数:3252,阅读时长大约:4 分钟导读:• Ubuntu 发行商 Canonical 将参加微软欧洲虚拟开源峰会 • 树莓派支持 Vulkan 最新进展:通过 70000 项测试 • 谷歌浏览 ...
uni-app整包更新与热更新方案(安卓和IOS)
原文链接:uni-app整包更新与热更新方案(安卓和IOS) 效果预览大致效果: 打开App,进入首页(首次),检测线上是否存在新版本,如果存在,弹窗提示用户是否进行版本更新.Android 有热更 ...
树莓派4B安装系统，配置远程连接和WiFi，更新源，更新中文支持，基本Linux命令，用Python输出hello和“你好，世界”
树莓派4B 系列1 从入门到进阶作者(当然就是我本人了,哈哈哈哈哈),写这篇文章的目的是给刚入门树莓派或者从3B/3B+版本过度到4B的小朋友们总结出一些成系统的规律和方法,以及4B全新版本的变化. ...
Win10下永久性关闭自动更新(可恢复更新)最简单有效的方法《亲测有效》
Win10下永久性关闭自动更新(可恢复更新)最简单有效的方法<亲测有效> 1.首先进入C:\Windows\System32路径下,找到wuaueng.dll文件 [外链图片转存失败,源站 ...

viewerjs图片url更新后视图不更新

viewerjs图片url更新后视图不更新相关推荐

最新文章

热门文章