vue项目中使用viewer实现放大功能时出现bug

最新推荐文章于 2023-10-07 16:11:58 发布
最新推荐文章于 2023-10-07 16:11:58 发布
阅读量1k 收藏
点赞数
分类专栏： css vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40090480/article/details/107718205
版权

vue项目中使用viewer实现放大功能时出现bug

bug描述：用饿了么组件的dialog进行弹窗，弹窗中有图片需要实现点击放大功能，可在dialog中使用viewer，会导致方法的图片一会在弹窗前，一会在弹窗后，这样的话，会导致用户体验特别差，网上搜了好久，好像没人遇到这样的问题，应该是我太菜了，求大佬伸出援助之手！！！！

下面放一些图和相关代码：

 

背后涂鸦的就是放大后的图片，我是希望他能在查看等级响应页面之前的，这样就能在不关闭弹窗的情况下关闭图片，求大佬帮助！！！！

前端真的难
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
vue中实现图片预览放大，缩小，旋转等功能，Viewer.js第一次点击图片无法显示(vue使用)
qq_28170105的博客
08-14 1405
代码】vue中实现图片预览放大，缩小，旋转等功能。
Vue 实现图片预览v-viewer插件使用，图片预览旋转缩放
最新发布
u010244957的博客
07-03 963
v-viewer实现图片的预览、缩放和旋转等功能；
Vue中使用viewer.js图片查看器
HuangsTing的博客
05-18 1187
最近开发需要用到点击图片放大查看，找到一个好用的插件，简单记录下 插件安装： npm install viewerjs --save 插件引入： //main.js import Viewer from 'viewerjs'; import 'viewerjs/dist/viewer.css'; html部分： <!-- 使用情况1： --> <img id="viewerDom" src="xxx.png" alt=""> <!-- 使用情况2： --> <
解决 viewer.js 动态更新图片导致无法预览的问题
10-17
Viewer.js 是一款强大的图片查看器，这篇文章主要介绍了解决 viewer.js 动态更新图片导致无法预览的问题 ,需要的朋友可以参考下
v-viewer图片预览插件 遇到的bug 以及使用
anwenagululu的博客
10-07 667
这里是因为图片列表需要以跑马灯的形式展示，并且点击图片预览时也要是数组形式，所以通过ref方式来使用。Vue3图片浏览组件v-viewer，支持旋转、缩放、翻转等操作 - Mirari's Blog。v-viewer图片预览插件设置setDefaults 不生效的问题。配置项main.js中。
v-viewer图片打不开一直在刷新_WordPress 上传图片时 async-upload.php出现520 Bug的原因及解决方案...
weixin_39743357的博客
12-12 274
在更换主机服务商，以及将博客搬家后，在上传图片时总是报一个错，不管是在编辑文档的页面，还是在多媒体管理页面。给出的信息是图片后处理失败，可能的原因是服务器忙，图片太大，或者是尺寸超标。然而诡异的是，当刷新页面的时候，这个图片是成功上传到服务器的，并且压缩更名等后处理步骤也已经完成。可是就是每次会有这么一个烦人的错误警示。而且很影响记录内容的连贯性，每次需要插入一张照片的时候，就需要刷新一下才能显示...
vue使用v-viewer插件做图片展示预览遇到弹框再次打开无法预览图片问题
向着太阳微笑
09-16 2297
使用element-ui框架；v-viewer图片预览插件； 问题描述： 列表中点击查看详情，e-dialog弹框查看详情；弹框中有多张图片； 列表刷新后，首次点击查看详情时；点击图片预览放大正常；关闭弹框后再次打开查看详情；点击图片无反应； 挠头一小时，头发掉一地！！！ 经过大量比对。最后发下其问题所在：（就是技术菜） 下面是有问题的代码片段： <el-form-item label="渠道结算截图"> <viewer> <img v-for="
Vue项目中添加锁屏功能实现思路
08-27
Vue 项目中添加锁屏功能实现思路 一、锁屏功能的实现思路 Vue 项目中添加锁屏功能的实现思路主要包括四个步骤：设置锁屏密码、密码存 localStorage、Vuex 设置锁屏状态和在路由里面判断锁屏状态。 1. 设置锁屏...
vue项目中实现的微信分享功能示例
01-21
本文实例讲述了vue项目中实现的微信分享功能。分享给大家供大家参考，具体如下： /* 微信分享 */ Vue.prototype.wechatShare = (shareData) => { let resource = { title: '随我心愿！', desc: '体验优质服务', ...
Vue项目中使用better-scroll实现一个轮播图自动播放功能
10-17
better-scroll是一个非常非常强大的第三方库 在移动端利用这个库 不仅可以实现一个非常类似原生ScrollView的效果 也可以实现一个...这篇文章主要介绍了Vue项目中使用better-scroll实现一个轮播图,需要的朋友可以参考下
viewer点击图片弹出（可放大缩小自由旋转拖拽）
10-14
点击图片弹窗窗体(viewer.js和viewer.css)无需写样式直接调用，有放大、旋转、移动等丰富功能，直接绑定元素就能使用，小白教程
在vue项目中使用codemirror插件实现代码编辑器功能
01-19
在vue项目中使用codemirror插件实现代码编辑器功能（代码高亮显示及自动提示），具体内容如下所示： 1、使用npm安装依赖 npm install --save codemirror; 2、在页面中放入如下代码 <textarea ref=mycode class...
vue实现裁切图片同时实现放大、缩小、旋转功能
08-27
vue实现裁切图片同时实现放大、缩小、旋转功能 ...本篇文章通过分享vue实现裁切图片同时实现放大、缩小、旋转功能的实现方法，帮助大家更好地理解相关知识点，并能够在实际项目中应用这些知识点。
vue H5(移动端)双指放大图片，单指拖动图片，等图片操作，使用viewerjs
qq_57219457的博客
01-05 3455
1、npm 引入 npm install v-viewer --save 2、main.js配置 import Viewer from 'v-viewer' import 'viewerjs/dist/viewer.css' Vue.use(Viewer) // 配置项 Viewer.setDefaults({ Options: { 'inline': true, // 启用 inline 模式 // 'button': true, // 显示右上角关闭按钮 //
viewer加载新图片，点击放大时还是原来的图片
LLL_liuhui的博客
08-02 1331
解决办法：在重新加载图片前update更新一下就可以了 $("#pic").viewer('update');  
图片预览插件Viewer之踩坑总结
living_ren的博客
06-06 6726
1.引入文件 &lt;link rel="stylesheet" type="text/css" href="/public/js/erp/viewer/viewer.min.css" /&gt; &lt;script src="/public/js/erp/viewer/viewer.js"&gt;&lt;/script&gt; 2.html部分（方便显示，图片信息内容为动态
基于vue2.0框架安装一些插件报错
weixin_62752892的博客
08-30 534
npm install lodash --save // 若已安装请忽略。会引用其它依赖，sass-loader，node-sass 版本会不兼容。qrcode详细可参考参考。
PC端使用viewer.js实现图片预览，放大，缩小，旋转等功能
hu104160112的博客
12-16 2231
GitHub地址：https://github.com/fengyuanchen/viewerjs 在线演示地址：https://fengyuanchen.github.io/viewerjs <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值