删除el-image开启大图预览后的关闭按钮

最新推荐文章于 2024-07-24 15:48:10 发布
最新推荐文章于 2024-07-24 15:48:10 发布
阅读量1.1k 收藏 1
点赞数 1
分类专栏： element vue 文章标签： 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_48300785/article/details/126646831
版权
需求：删除预览图片的关闭按钮在这里插入图片描述
一开始是直接/deep/ 进行修改，发现不生效，后来注意到他的元素不在根元素里面，所以直接在根元素外面写样式
<style lang="less">
.el-image-viewer__close {
  display: none !important;
}
</style>

在这里插入图片描述

el-image-viewer图片预览功能
jieweiwujie的博客
11-17 1739
【代码】el-image-viewer图片预览功能。
el-image图片放大后的关闭事件
nick_zhang的博客
02-19 1844
我们知道el-image的放大是由单独的el-image-viewer组件构成，那么这个组件的方法怎么在el-image中的调用呢，看到源码中有个关闭时的回调函数closeViewer，里面是通过showViewer来控制图片放大的显示与隐藏，那么我们只需要监听子组件的showViewer来做对应的事情即可。那么就换种思路，既然最后是点击那么就监听dom的点击事件吧，只要是关闭按钮以及蒙层都做对应的事情即可。但事与愿违，此种监听子组件的方法存在问题，所以先放弃。
el-image 增加图片下载和删除功能
菜鸟吴de博客
06-20 2079
el-image组件增加下载和删除功能
el-image 的关闭事件
agua001的博客
10-13 1933
【代码】el-image 的关闭事件。
el-image预览图片点击遮盖处关闭预览
JiAyInNnNnN123的博客
07-24 1095
2.使用事件监听，监听当前遮盖mask，点击时，执行关闭按钮的事件。
el-image-viewer组件无法触发右上角关闭按钮事件
Mr_going的博客
07-10 1849
解决方法：使用@close="closeImgViewer"替代 :on-close=“closeImgViewer”
详解elementui之el-image-viewer(图片查看器)
10-16
这个组件是独立于`el-image`组件的，这意味着即使你不直接使用`el-image`，也能单独利用`el-image-viewer`实现大图预览。 在`el-image-viewer`的使用中，有两个关键的属性： 1. `urlList`：这是一个数组，用于存储...
不点击图片，直接实现el-image的大图预览功能
qq_44712405的博客
04-29 5237
el-image的大图预览功能是一个小组件image-viewer，它的props如下： props: { urlList: { type: Array, default: () => [] }, zIndex: { type: Number, default: 2000 }, onSwitch: {...
基于element-puls的el-image-viewer组件实现移动端单指拖拽和双指缩放功能
06-29
二次封装的el-image-viewer组件，具有移动端双指缩放和单指拖拽功能
el-image 点击遮罩层取消预览功能
Future1994的博客
05-26 1774
// 点击mask关闭图片预览 clickMaskClosePreview(e) { // 使用addEventListener,会出现点击点击两次才触发的情况 if (e.target.getAttribute('class') === 'el-image-viewer__mask') { // this.$refs.preview.showViewer = false this.imgPreviewShow ...
基于element-ui 使用 upload 预览图片 （含删除功能）
08-23
基于element-ui 使用 upload 预览图片 （含删除功能）参考链接：https://blog.csdn.net/qq_36437172/article/details/100034867
解决el-image只能点击关闭按钮才能关闭的问题
chenZH0975的博客
09-13 3095
​问题：el-image打开图片预览时，只能点击关闭按钮才能关闭 需求：点击其他地方，方可关闭图片预览 el-image是elementUi里的一个组件，介绍可以直接去element官网查，在这里就不多介绍了 而这里最重要的也就是这个handleClickStop方法了，@click.stop点击调用方法关闭 这样就完成了el-image点击蒙版也可以关闭的操作了
.el-image-viewer__close样式控制不起作用
violet217的博客
04-09 269
el-image-viewer__close 样式控制不起作用。
Element 中图片预览后如何快速关闭
越陌度阡
03-05 1685
在使用 Element UI 进行前端开发时，图片预览功能是一个非常实用的组件。它允许用户点击图片后，以弹窗的形式展示大图，方便查看细节。然而，Element UI 的图片预览功能在用户体验上存在一个小瑕疵：用户只能通过点击右上角的关闭图标来关闭预览弹窗。对于习惯了点击遮罩层（即弹窗外的半透明背景）关闭弹窗的用户来说，这种操作方式显得不够直观和便捷。 本文将介绍如何通过简单的代码优化，实现点击遮罩层关闭图片预览的功能，从而提升用户体验。
el-dialog 拖动 el-image 放大点击蒙版可关闭
记录常见的问题以及解决办法
10-08 1059
使用的时候 在el-dialog标签上加上 v-dialogDrag 即可使用。直接引入 例如：import './directive/index.js'把下面文件新建一个 js文件 之后引入到mian.js 中。el-dialog 拖动 自定义指令。el-image 放大点击蒙版可关闭。
解决elementPlus的el-upload上传组件，点击预览查看大图，关闭预览大图，自动触发弹出选择图片上传的问题
2301_77244033的博客
07-18 1099
由于需求是新增/编辑以dialog展示form表单，上传图片功能，其他都正常但是在el-upload上传图片组件中点击预览查看大图然后再关闭预览的时候就会自动触发上传图片选择文件，这个问题一开始我以为是el-dialog嵌套的问题，以这个方向百度很长时间一直没有得到解决。仔细看文档对比发现是el-upload嵌套el-dialog的问题。
el-image 循环展示多张图片，点击放大，点击空白处关闭遮罩层。
maoxiaohei_的博客
05-30 4127
<el-image v-for="(img,index) in ImagesrcList" :src="img" :preview-src-list="getImgList(index)" @click="handleClickItem"> </el-image> data() { return { ImagesrcList: [ 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef.
前端开发中，在el-image组件中如何修改关闭按钮的样式
w670999512的博客
03-17 1070
在vue项目里如何修改el-image组件中关闭按钮的样式
如何触发el-image的图片预览
最新发布
09-07
在Element UI库中的`el-image`组件中，如果想要触发图片的预览功能，通常会配合`el-dialog`或者其他弹窗组件一起使用。以下是一个基本的例子： 1. 首先，你需要有一个`el-image`元素，它有一个`preview-src`属性用于指定预览图的URL： ```html <el-image :src="currentImage" :preview-src="previewImageUrl" class="image-preview"></el-image> ``` 其中`currentImage`是主图的URL，`previewImageUrl`是预览图的URL。 2. 当用户点击`el-image`时，可以设置一个事件监听器，比如`click`事件，然后打开一个`el-dialog`： ```javascript <template> <el-button @click="showPreview">查看大图</el-button> <el-dialog :visible.sync="dialogVisible" width="80%"> <el-image :src="previewImageUrl" fit></el-image> </el-dialog> </template> <script> export default { data() { return { currentImage: 'your_main_image_url', previewImageUrl: '', dialogVisible: false, }; }, methods: { showPreview() { this.dialogVisible = true; // 这里可以根据需要设置预览图的URL this.previewImageUrl = this.currentImage; // 如果你想预览当前的主图 } } }; </script> ``` 当用户点击“查看大图”按钮，`showPreview`方法会被调用，预览图会在`el-dialog`中显示出来。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值