element-ui之el-image-viewer(图片查看器)

前言

随着版本的更新Element UI新增了新的组件,例如:Image,没错今天被我发了Image下面可通过 previewSrcList 开启预览大图的功能。

这是官方文档中有写的,但是我想不使用Image组件又想使用预览大图的功能是否可行呢?

答案是当然可以。

使用方法

翻看了Image的源码,发现大图预览是一个小组件image-viewer,打开看看它的props,如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
props: {
urlList: {
type: Array,
default: () => []
},
zIndex: {
type: Number,
default: 2000
},
onSwitch: {
type: Function,
default: () => {}
},
onClose: {
type: Function,
default: () => {}
}
}

我们需要使用到的就只有urlListonClose两个属性 ,一个用来放图片链接一个用来关闭查看器。

需要使用的属性我们知道了,然后我们就在代码里面引入image-viewer就可以直接使用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<template>
<div>
<el-button @click="onPreview">预览</el-button>
<el-image-viewer
v-if="showViewer"
:on-close="closeViewer"
:url-list="[url]" />
</div>
</template>
<script>
// 导入组件
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'

export default {
name: 'Index',
components: { ElImageViewer },
data() {
return {
showViewer: false, // 显示查看器
url:'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
}
},
methods: {
onPreview() {
this.showViewer = true
},
// 关闭查看器
closeViewer() {
this.showViewer = false
}
}
</script>
文章作者: Gorkys
文章链接: http://tingtas.com/posts/8156dfa5/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Tingtas
打赏
  • 微信
  • 支付宝

评论