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: [ ],


相关文章
|
6月前
|
JavaScript 前端开发
layui用layer.open打开子页面并获取子页面的ueditor富文本编辑器的内容
该内容描述了一个Web应用的交互流程,其中父页面通过调用子页面的JavaScript函数来获取富文本编辑器的内容。子页面包含一个富文本编辑器和一个`callbackdata`函数,用于返回编辑器的文本内容。父页面使用`layer.open`打开子页面作为弹窗,并在用户点击提交时,访问子页面的`callbackdata`获取编辑器内容,同时检查其他表单字段,如类型、标题等是否为空,以确保数据完整。
576 0
Echarts组件legend属性显示数据和icon图片自定义的解决方案
Echarts组件legend属性显示数据和icon图片自定义的解决方案
392 0
|
存储 缓存 前端开发
Antd Upload + React-Cropper 实现图片自定义区域剪裁并上传功能
通过Upload组件结合react-Cropper实现图片的裁剪上传组件封装,剖析antd-img-crop源码实现的逻辑,对自己封装的组件进行进一步优化,改造!
4625 0
Antd Upload + React-Cropper 实现图片自定义区域剪裁并上传功能
|
API
Element UI Loading 加载组件动态变更 text 值(加载文案)
有这样的一个需求,我在上传文件的时候,上传阶段耗时较长,所以利用加载动画作为友好提示用户等待。
1286 0
Element UI Loading 加载组件动态变更 text 值(加载文案)
|
JavaScript
VUE element-ui之el-popover弹出框在局部全屏下不显示问题及弹框、小箭头背景修改
VUE element-ui之el-popover弹出框在局部全屏下不显示问题及弹框、小箭头背景修改
2782 0
VUE element-ui之el-popover弹出框在局部全屏下不显示问题及弹框、小箭头背景修改
|
4月前
|
小程序 JavaScript 前端开发
【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表(含Tdesign升级,切换调试基础库,设置全局样式,配置组件按需注入,添加图片素材,wx:for,生命周期 onLoad)
【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表(含Tdesign升级,切换调试基础库,设置全局样式,配置组件按需注入,添加图片素材,wx:for,生命周期 onLoad)
145 0
|
4月前
|
容器
Vite项目当中的SVG图标的配置及图标全局组件的封装
Vite项目当中的SVG图标的配置及图标全局组件的封装
118 0
vue3+element plus图片预览点击按钮直接显示图片的预览形式
vue3+element plus图片预览点击按钮直接显示图片的预览形式
|
6月前
antd如何隐藏Upload组件的删除和预览图标
antd如何隐藏Upload组件的删除和预览图标
378 1
|
JavaScript
vue中关于element的el-image 图片预览功能增加一个下载按钮
vue中关于element的el-image 图片预览功能增加一个下载按钮
919 0