.el-image-viewer__close样式控制不起作用

最新推荐文章于 2024-10-31 15:39:38 发布
最新推荐文章于 2024-10-31 15:39:38 发布
阅读量269 收藏
点赞数 1
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/violet217/article/details/137551194
版权

.el-image-viewer__close 样式控制不起作用
在

violet217
关注
vue3 + el-image-viewer 图片组件查看
weixin_38302828的博客
09-27 3811
1.vue2+element -ui中 <el-image-viewer v-if="show" :url-list="url" :on-close="closeViewer" /> 注意是on-close 2.vue3+element-plus中 就是closeurl-list：图片数组 <el-image-viewer v-if="show" :url-list="url" ...
el image-viewer 图片预览组件
352328759的博客
11-04 2033
Element UI(2.15.6) 的 el-image 组件有一个图片预览功能 这个功能其实是调用内部组件 ImageViewer 实现的 一般情况直接用 el-image 里的预览足够了 但有一种情况, el-image 不能简单实现 那就是 :src 展示的地址, 不在 :preview-src-list 预览图片列表里( src 是缩略图, preview-src-list 是原图) 这个情况下, preview-src-list 中找不到当前图片地址, 就会从第0张开始预览 不能从指定图片开始预
el-image-viewer组件无法触发右上角关闭按钮事件
Mr_going的博客
07-10 1847
解决方法：使用@close="closeImgViewer"替代 :on-close=“closeImgViewer”
删除el-image开启大图预览后的关闭按钮
我的代码没有bug的博客
09-01 1124
删除el-image开启大图预览后的关闭按钮
el-image在预览状态下点击遮罩层无法关闭
Lanson的博客
10-31 776
今天遇到一个需求，运营人员反应，管理后台的点击预览图片后，要关闭时老是要去右上角找关闭按钮，觉得麻烦，问能不能直接点阴影区域就能关闭掉。一、找类似案例二、反思Elememt一个这么流行的基于Vue.js的UI框架，难道会这么粗暴的解决这种常见的需求吗三、解决果然，不出所料。
vue中el-popover和el-image多图片无法关闭表格解决方案
qq_35490522的博客
06-11 772
<el-popover placement=“right” :ref="popover-${scope.$index}"#使用传递参数 width=“1000” trigger=“click”> <el-image placement=“top” v-for="(image, index) in scope.row.images" :key=“index” @click=“handleConfirm()” :src=“imageOriginPath+image” alt=""
解决el-image只能点击关闭按钮才能关闭的问题
chenZH0975的博客
09-13 3088
​问题：el-image打开图片预览时，只能点击关闭按钮才能关闭 需求：点击其他地方，方可关闭图片预览 el-image是elementUi里的一个组件，介绍可以直接去element官网查，在这里就不多介绍了 而这里最重要的也就是这个handleClickStop方法了，@click.stop点击调用方法关闭 这样就完成了el-image点击蒙版也可以关闭的操作了
详解elementui之el-image-viewer(图片查看器)
10-16
这个组件是独立于`el-image`组件的，这意味着即使你不直接使用`el-image`，也能单独利用`el-image-viewer`实现大图预览。 在`el-image-viewer`的使用中，有两个关键的属性： 1. `urlList`：这是一个数组，用于存储...
element-ui大图预览el-image-viewer组件示例
一梦晓三生的博客
02-07 647
<!-- 大图预览 --> <el-image-viewer v-if="showBig" :on-close="closeViewer" :url-list="showImgList" /> // 示例 <script> import ElImageViewer from 'element-ui/packages/image/src/image-viewer' export default { name: ""
element-ui之el-image-viewer(图片查看器)及单击，双击事件冲突解决
roongyan92的博客
12-17 8973
有时候我们的需求和组件提供的不一致，就需要自己封装组件，有的功能实现起来很麻烦，产品要做一个双击图片打开预览的功能，原生js实现有点费劲。我们看一下Image的源码，发现大图预览是一个小组件image-viewer，打开看看它的props，如下 props: { urlList: { type: Array, default: () => [] }...
el-image点击遮罩层可以关闭
m0_74829310的博客
06-29 477
el-image目前是只能点击右上角按钮才可以关闭。
大屏使用el-image组件全屏后图片预览时不显示
m0_70542915的博客
11-16 1481
但大屏中我们全屏的一般都是指定的标签，全屏之后这个标签就会覆盖body标签，自然就导致图片预览的图片被我们全屏的标签覆盖，解决办法就是去掉这个属性即可。另外大屏中因为很多地方都有图片预览功能，但并不是每个地方都用的el-image组件，也有点击按钮预览图片的，所以我单独使用了el-image-viewer组件，并把它放到要全屏的标签中。vue3+element-plus写大屏时遇到的一个问题，el-image组件添加了图片预览功能，但是大屏全屏之后点击预览的时候看不到图片，退出全屏后能正常显示。
Element 中图片预览后如何快速关闭
越陌度阡
03-05 1676
在使用 Element UI 进行前端开发时，图片预览功能是一个非常实用的组件。它允许用户点击图片后，以弹窗的形式展示大图，方便查看细节。然而，Element UI 的图片预览功能在用户体验上存在一个小瑕疵：用户只能通过点击右上角的关闭图标来关闭预览弹窗。对于习惯了点击遮罩层（即弹窗外的半透明背景）关闭弹窗的用户来说，这种操作方式显得不够直观和便捷。 本文将介绍如何通过简单的代码优化，实现点击遮罩层关闭图片预览的功能，从而提升用户体验。
vue中el-image-viewer大图预览的使用
蒙蒙细雨的博客
07-08 3663
需求：上传格式不限，要求文件可以预览以及下载，word、zip等格式预览不要求，图片要能预览 解决： 引入组件 import ElImageViewer from 'element-ui/packages/image/src/image-viewer' components: { ElImageViewer }, 点击按钮弹窗大图预览 <!--大图预览--> <el-image-viewer v-if="showViewer"
element-plus图片预览组件el-image-viewer组件，自定义初始索引和ts类型
Yydemo1的博客
08-21 2380
el-image-viewer组件在官网没有说明，相关的api和官网的image组件类似。：url-list需要的类型是string[]以下根据自己业务场景变化。
el-image-viewer图片预览组件使用
pscool的博客
07-12 4418
/ 预览图片显示的初始索引。// 显示图片预览的方法。// 关闭图片预览的方法。// 是否展示图片预览。
不点击图片，直接实现el-image的大图预览功能
茶荼
03-09 5854
不点击图片，直接实现el-image的大图预览功能
Element-ui中 使用图片查看器（el-image-viewer) 预览图片
热门推荐
明天也要努力的博客
12-12 3万+
1. 简介 注意：本文 Element-ui 版本 2.11.1及以上 Element-ui 官方文档中有大图预览相关组件 传送门：Element-ui 图片组件，但我们不想通过使用 Image 组件的方式（先默认显示预览图片，再通过点击图片实现大图预览查看），又想实现直接预览大图的功能是否可行呢？答案是当然可以。 2. 图片查看器（el-image-viewer) 的使用 翻看了 Image 的源码，发现实现大图预览的是一个小组件 image-viewer。 打开看看它的 props，如下： props
el-image点击遮罩层关闭图片 点击哪张图片就预览哪张图片
Yangpengxunb的博客
02-22 777
【代码】el-image点击遮罩层关闭图片 点击哪张图片就预览哪张图片。
van-popup阻止点击遮罩层关闭
最新发布
03-29
<think>好的，我现在需要帮助用户解决如何阻止van-popup在点击遮罩层时关闭的问题。根据用户提供的引用内容，用户已经找到了部分解决方案，但需要确认具体的步骤。 首先，用户提到了引用[1]中关于Dialog组件设置“close-on-click-modal”属性为false的方法。虽然这是针对Dialog组件的，但可能类似属性存在于van-popup中。我需要检查Vant组件库中van-popup的文档，确认是否有对应的属性。 然后，引用[2]中提到了uniapp中使用van-dropdown的问题，通过修改van-popup的事件名为驼峰写法解决。这可能意味着在uniapp中，某些组件的属性或事件需要特定的写法才能生效。用户的问题是关于van-popup的，可能需要类似的修改。 接下来，我需要确定van-popup是否有控制遮罩层点击关闭的属性。通常，类似组件会有类似close-on-click-overlay或close-on-click-mask的属性。查阅Vant的官方文档，发现van-popup确实有一个close-on-click-overlay属性，默认值为true，设置为false可以阻止点击遮罩层关闭。 此外，用户提到在uniapp中可能需要修改底层文件，如将事件名改为驼峰形式。如果直接设置属性无效，可能需要检查组件的事件绑定是否正确，或者在uniapp环境下是否需要特殊处理。例如，某些情况下，组件的事件可能需要使用bind:afterenter而不是afterEnter，但根据引用[2]中的解决方案，改为驼峰写法有效，可能需要修改组件源码中的事件名称。 综合以上信息，用户需要两个步骤：首先在组件上设置close-on-click-overlay属性为false；如果无效，可能需要修改van-popup组件内部的事件绑定方式，确保事件名正确。同时，提醒用户在修改第三方库文件时需要注意升级覆盖的问题。 最后，生成相关问题，覆盖属性设置、事件处理、uniapp兼容性等方面，帮助用户进一步解决可能遇到的问题。</think>### 如何阻止`van-popup`点击遮罩层关闭？ 根据Vant组件库的特性，`van-popup`组件默认允许通过点击遮罩层关闭弹窗。若需禁止此行为，可通过以下方法实现： #### 方法1：通过属性配置 1. **设置`close-on-click-overlay`属性** 在`van-popup`标签中添加属性`close-on-click-overlay="{{ false }}"`。此属性控制是否允许点击遮罩层关闭弹窗，默认值为`true`，设为`false`即可禁用该行为[^1]。 ```html <van-popup show="{{ showPopup }}" close-on-click-overlay="{{ false }}" > 弹窗内容 </van-popup> ``` #### 方法2：修改组件源码（针对特殊场景） 若在**uniapp**等框架中遇到兼容性问题（如引用[2]所述），可能需要： 1. **调整事件绑定命名规则** 找到`@vant/weapp/dropdown-item/index.wxml`中的`van-popup`组件定义，将其事件名`after-enter`和`after-leave`改为驼峰写法`afterEnter`和`afterLeave`，确保事件正确触发[^2]。 #### 注意事项 - 修改第三方组件源码时，需注意后续版本升级可能覆盖修改。 - 若需手动控制关闭，可结合`before-close`属性实现自定义关闭逻辑。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值