使用v-viewer被覆盖

最新推荐文章于 2024-08-08 08:28:50 发布

从前有个帅哥孙

最新推荐文章于 2024-08-08 08:28:50 发布

阅读量672

点赞数

文章标签： vue

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

版权

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

摘要由CSDN通过智能技术生成

使用v-viewer被覆盖

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

<!--图片预览-->
<div class="images" v-viewer="{movable: false}">

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

从前有个帅哥孙

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

【VUE】Vue使用v-viewer挂载到指定节点

踩坑日常和学习笔记

03-02

1438

1.前情提要最近有个项目有个页面的div需要全屏操作，该div下图片又需要能够预览展示（此处使用了v-viewer实现），于是问题来了：当在正常浏览器窗口模式下，v-viewer预览图片时正常全屏显示，而当该div全屏后再点击图片预览发现v-viewer预览图片的全屏被div的全屏覆盖，导致无法正常使用该功能。 2.解决方法根据v-viewer和viewerjs的GitHub文档说明 v-viewer是基于viewerjs实现的而在viewerjs中有个Options里面有个container属性，这

Vue ElementUI dialog弹出框被遮罩层盖住

热门推荐

linxd的博客

03-08

1万+

这个问题遇到了好几次了，这次找到问题的原因了原因一：因为dialog的组件外层div设置了 position：absolute；属性所以导致遮罩层会在最上面原因二：因为是dialog 里面套了一个dialog ，需要在里面的dialog :append-to-body=“true” **************************** ...

参与评论您还未登录，请先登录后发表或查看评论

v-viewer 图片预览组件使用教程

gitblog_00828的博客

08-08

993

v-viewer 图片预览组件使用教程 v-viewerImage viewer component for vue, supports rotation, scale, zoom and so on, based on viewer.js项目地址:https://gitcode.com/gh_mirrors/vv/v-viewer 项目介绍 v-viewer 是一个基于 Vue.js 的图片预...

【vue3+element-plus】el-image点击图片预览时，被表格覆盖问题，加preview-teleported也不生效

m0_59699613的博客

11-14

1896

设置此属性，是将image-viewer 插入至 body 元素上。而运行项目点击预览图片，image-viewer 并没有插入至 body 元素上。搜集很久解决方案都是加：preview-teleported=‘true’，但我这个项目没有生效。最终问题解决，image-viewer 插入至 body 元素上。# 使用 yarn 的情况，安装最新版本。# 使用 npm 的情况，安装最新版本。

vue使用v-viewer插件做图片展示预览遇到弹框再次打开无法预览图片问题

向着太阳微笑

09-16

2358

使用element-ui框架；v-viewer图片预览插件；问题描述：列表中点击查看详情，e-dialog弹框查看详情；弹框中有多张图片；列表刷新后，首次点击查看详情时；点击图片预览放大正常；关闭弹框后再次打开查看详情；点击图片无反应；挠头一小时，头发掉一地！！！经过大量比对。最后发下其问题所在：（就是技术菜）下面是有问题的代码片段： <el-form-item label="渠道结算截图"> <viewer> <img v-for="

View被遮挡的解决办法

a1003434346的博客

11-20

2181

前言：在XML文件中，使用FramLayout或RelativeLayout等布局，每个控件都是覆盖显示的，后加进来的控件覆盖前面的控件。可以把控件写在最后，从而实现显示在最上层的效果把控件置顶显示： view.bringToFront(); //可以将布局在下层的控件放到上层，不被其他控件挡住。 ...

关于vue组件v-viewe的使用方法，层级显示bug

Benz_s600的博客

03-20

1987

1.如何使用v-viewe 安装 npm install v-viewer --save 在main.js中使用 import Viewer from 'v-viewer' import 'viewerjs/dist/viewer.css Vue.use(Viewer, { defaultOptions: { zIndex: 9999, (控制显示层级为最高) "inline...

v-viewer首次不显示

最新发布

08-17

1. 组件未正确安装或导入：确保你已经正确地引入了v-viewer，并且在需要使用的组件模板中正确配置了它。 2. 数据绑定问题：检查图片路径是否正确赋值给了v-viewer的`src`属性或者相应的数据源。如果没有数据，组件...

viewer有时候会在弹窗后面怎么改

weixin_35749545的博客

01-03

187

如果您想让弹窗在最前面显示，可以尝试使用以下方法：检查弹窗是否有被其他窗口遮盖，如果有，可以通过点击任务栏中的图标或者使用键盘快捷键来切换到弹窗所在的窗口。在弹窗上点击鼠标右键，在菜单中选择“置顶”或者“总在最前”。在窗口的标题栏上双击鼠标左键，这样可以使窗口最大化，使它能够在其他窗口之上显示。在窗口的标题栏上单击鼠标左键并拖动，将窗口移动到其他位置，使它能够在其他窗口之上显示。 ...

vue2.0 router-view解决办法以及自定义v-header

fate_zrr的博客

03-25

3260

main.js配置// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' impor...

Acute3D Viewer v4.3

06-15

1. **三维模型支持**：Acute3D Viewer 支持多种3D格式，如OBJ、3DS、IFC、STEP等，使得不同来源的数据都能在同一个平台上被查看和分析。 2. **高精度渲染**：该软件采用尖端的渲染算法，提供高质量的图像输出，无论...

surfaceview遮挡了上面的控件显示的解决方法

weixin_38906715的博客

03-23

527

setZOrderOnTop（true）之后调用 setZOrderMediaOverlay(true)就可以了覆盖在surfaceview就会显示出来了，点击事件也同样的响应。最近在项目中使用到surfaceview做视频的实时流，遇到一个很奇葩的效果，在使用surfaceview因为surfaceview是双缓存机制，所以他需要设置。遇到这样的情况的解决办法是在surfaceview调用。这个是在surfaceview里面找到的源码。让他显示在所依赖的窗口的最顶层才能更好的显示。

ios -解决view遮挡按钮问题

weixin_30532837的博客

05-17

647

#pragma mark -解决view遮挡按钮问题 //分享按钮赋予 self 最顶部 / web按钮赋予 self 最顶部 / showBtn显示按钮 self 最顶部 / scrollviews小容器 self 最顶部 - (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event { /...

vue在ios返回上一路由白屏

你蠢哭我咯的博客

06-04

6208

原文链接问题描述：进入A页面——>B页面——>ios自带的返回——>白屏出现——>手动点击白屏处——>问题解决原因是，经过排查，发现在ios 机器上使用webview 开发Vue项目时候，go history (-1)，无法将body 的高度拉掉，使得遮住，触发轻点击，方可消除该遮罩解决的理论：用于最重要的html 容器是container，然而因...

基于vue3 图片上传、预览、删除封装

yf18040578780的博客

09-22

1352

图片上传、预览、删除

Vue开发：灵活图片查看器v-viewer

weixin_42373679的博客

10-27

288

1. 组件安装 npm install --save v-viewer 2. 全局引入及默认设置 import Vue from 'vue' import App from './App.vue' import viewer from "v-viewer" Vue.use(viewer,{ defaultOptions:{ inline: true, backdrop:true, focus:true, button: true, navbar:

如何解决Vosviewer关键词共现分析出现的Incorrect number of columns错误

jpanther的博客

10-30

4313

Vosviewer在做关键词共现分析时，如何完成数据清洗并如何解决Incorrect number of columns错误

4-关于使用v-viewer过程中的一些报错处理

weixin_46675693的博客

05-20

393

过程：首先查了有哪个能直接预览图片的工具，找到了v-viewer这个，第一步就是安装。准备好图片后发现点了没反应，结果是还少了一个依赖包viewerjs，继续下载。文件中检查，还真有一个，修改会原来的版本后，重新启动，运行成功。或其他依赖配置文件中有一个不正确的版本指定，即。我就纳闷，我什么时候有这么一个版本了，然后我去。估计是版本不适配，又找到了另一个版本尝试下载。这个报错还是一个版本的问题，我又换了个版本。结果又报了一个错，大概的意思是我的。终端是不报错了，但是控制台报错了。