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


相关文章
Echarts组件legend属性显示数据和icon图片自定义的解决方案
Echarts组件legend属性显示数据和icon图片自定义的解决方案
424 0
|
JavaScript
Element-ui中 使用图片查看器(el-image-viewer) 预览图片
Element-ui中 使用图片查看器(el-image-viewer) 预览图片
2037 1
Element-ui中 使用图片查看器(el-image-viewer) 预览图片
|
JavaScript
VUE element-ui之el-popover弹出框在局部全屏下不显示问题及弹框、小箭头背景修改
VUE element-ui之el-popover弹出框在局部全屏下不显示问题及弹框、小箭头背景修改
2813 0
VUE element-ui之el-popover弹出框在局部全屏下不显示问题及弹框、小箭头背景修改
|
3月前
|
前端开发 定位技术 API
二、前端高德地图、渲染标记(Marker)引入自定义icon,手动设置zoom
文章介绍了如何在前端使用高德地图API渲染标记(Marker),并引入自定义图标,同时展示了如何手动设置地图的缩放级别。
343 1
|
4月前
|
JavaScript UED
基于Vue2.0仿Element UI的el-tooltip实现一个气泡框组件,支持多数据类型的显示和内容为空时不显示气泡框
该文章介绍了如何基于Vue2.0仿照Element UI的el-tooltip组件实现一个自定义的气泡框组件,该组件能够根据内容是否为空智能显示或隐藏,支持多种数据类型的显示。
133 0
基于Vue2.0仿Element UI的el-tooltip实现一个气泡框组件,支持多数据类型的显示和内容为空时不显示气泡框
|
6月前
Elementui-Image组件,单个图片点击放大展示
Elementui-Image组件,单个图片点击放大展示
261 2
|
5月前
|
容器
Vite项目当中的SVG图标的配置及图标全局组件的封装
Vite项目当中的SVG图标的配置及图标全局组件的封装
151 0
|
7月前
|
移动开发 小程序 API
uniapp中组件库Mask 遮罩层 的使用方法
uniapp中组件库Mask 遮罩层 的使用方法
628 1
vue3+element plus图片预览点击按钮直接显示图片的预览形式
vue3+element plus图片预览点击按钮直接显示图片的预览形式
|
7月前
antd如何隐藏Upload组件的删除和预览图标
antd如何隐藏Upload组件的删除和预览图标
407 1