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


相关文章
|
JavaScript
Element-ui中 使用图片查看器(el-image-viewer) 预览图片
Element-ui中 使用图片查看器(el-image-viewer) 预览图片
3817 1
Element-ui中 使用图片查看器(el-image-viewer) 预览图片
【sgTree】自定义组件:加载el-tree树节点整棵树数据,实现增删改操作。
【sgTree】自定义组件:加载el-tree树节点整棵树数据,实现增删改操作。
uniapp进行表单效验
uniapp进行表单效验
769 0
uniapp 全局数据(globalData)的设置,获取,更改
uniapp 全局数据(globalData)的设置,获取,更改
3727 0
|
移动开发 小程序
微信小程序web-view嵌入uni-app H5页面,通过H5页面跳转企业微信客户聊天窗口如何操作?
微信小程序web-view嵌入uni-app H5页面,通过H5页面跳转企业微信客户聊天窗口如何操作?
|
5月前
|
移动开发 JavaScript 开发工具
uniapp接入app
uniapp接入app
964 156
vue2项目使用?.语法报错如何解决?(@babel/plugin-proposal-optional-chaining)
vue2项目使用?.语法报错如何解决?(@babel/plugin-proposal-optional-chaining)
1159 0
|
JavaScript Android开发 iOS开发
vue-aliplayer 阿里云播放器适配 vue
版权声明:本文首发 http://asing1elife.com ,转载请注明出处。 https://blog.csdn.net/asing1elife/article/details/82766824 ...
15034 0
|
数据格式
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
本文介绍了在ElementUI和ElementPlus中使用`el-table`组件实现合并行功能的技巧,包括多列合并和单列合并的方法,并提供了相应的示例代码和运行效果。
10544 46
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用

热门文章

最新文章