elementUI引用el-image-viewer组件全局方法预览大图

简介: elementUI引用el-image-viewer组件全局方法预览大图


<el-button 
type="primary"
@click="previewBigImage(['https://img-home.csdnimg.cn/images/20201124032511.png'])">显示大图</el-button>
<!-- 预览大图 -->
<el-image-viewer 
v-if="showViewer" 
:on-close="() => { showViewer = false }" 
:url-list="srcList" 
/>
import ElImageViewer from "element-ui/packages/image/src/image-viewer";
...
components: {
    ElImageViewer,
},
...
// 预览大图
previewBigImage(srcList) {
    this.srcList = srcList;
    this.showViewer = true;
},
// 大图预览
showViewer: false,
srcList: [ ],


相关文章
|
1月前
|
JavaScript 前端开发
layui用layer.open打开子页面并获取子页面的ueditor富文本编辑器的内容
该内容描述了一个Web应用的交互流程,其中父页面通过调用子页面的JavaScript函数来获取富文本编辑器的内容。子页面包含一个富文本编辑器和一个`callbackdata`函数,用于返回编辑器的文本内容。父页面使用`layer.open`打开子页面作为弹窗,并在用户点击提交时,访问子页面的`callbackdata`获取编辑器内容,同时检查其他表单字段,如类型、标题等是否为空,以确保数据完整。
41 0
|
9月前
Echarts组件legend属性显示数据和icon图片自定义的解决方案
Echarts组件legend属性显示数据和icon图片自定义的解决方案
162 0
|
API
Element UI Loading 加载组件动态变更 text 值(加载文案)
有这样的一个需求,我在上传文件的时候,上传阶段耗时较长,所以利用加载动画作为友好提示用户等待。
904 0
Element UI Loading 加载组件动态变更 text 值(加载文案)
|
存储 缓存 前端开发
Antd Upload + React-Cropper 实现图片自定义区域剪裁并上传功能
通过Upload组件结合react-Cropper实现图片的裁剪上传组件封装,剖析antd-img-crop源码实现的逻辑,对自己封装的组件进行进一步优化,改造!
4016 0
Antd Upload + React-Cropper 实现图片自定义区域剪裁并上传功能
|
1月前
antd如何隐藏Upload组件的删除和预览图标
antd如何隐藏Upload组件的删除和预览图标
81 1
|
9月前
|
JavaScript
vue中关于element的el-image 图片预览功能增加一个下载按钮
vue中关于element的el-image 图片预览功能增加一个下载按钮
463 0
|
4月前
HBuilderX使用uniapp中的video标签开发视频应用APP,出现视频覆盖<view>图层无法遮住等问题如何解决?
HBuilderX使用uniapp中的video标签开发视频应用APP,出现视频覆盖<view>图层无法遮住等问题如何解决?
[Vue3+Element-Plus]点击列表中的图片预览时,图片被表格覆盖。
点击图片进行预览,但是还能继续选中其他的图片进行预览,鼠标放在表格上,那一行表格也会选中,如图所示第一行,那么该如何解决呢?
|
11月前
|
JavaScript
Vue实现图片大图预览,v-viewer组件的使用方法演示
Vue实现图片大图预览,v-viewer组件的使用方法演示
295 0
ElementUI:组件库之Loading 加载
ElementUI:组件库之Loading 加载
335 0