前言
隨著版本的更新Element UI新增了新的組件祸泪，例如：Image，沒錯(cuò)今天被我發(fā)了Image下面可通過 previewSrcList 開啟預(yù)覽大圖的功能鱼喉。
這是官方文檔中有寫的，但是我想不使用Image組件又想使用預(yù)覽大圖的功能是否可行呢？
答案是當(dāng)然可以左医。
使用方法
翻看了Image的源碼授帕，發(fā)現(xiàn)大圖預(yù)覽是一個(gè)小組件image-viewer，打開看看它的props浮梢，如下
props: {
urlList: {
type: Array,
default: () => []
},
zIndex: {
type: Number,
default: 2000
},
onSwitch: {
type: Function,
default: () => {}
},
onClose: {
type: Function,
default: () => {}
}
}
我們需要使用到的就只有urlList與onClose兩個(gè)屬性 跛十，一個(gè)用來放圖片鏈接一個(gè)用來關(guān)閉查看器。
需要使用的屬性我們知道了秕硝，然后我們就在代碼里面引入image-viewer就可以直接使用芥映。
<template>
<div>
<el-button @click="onPreview">預(yù)覽</el-button>
<el-image-viewer
v-if="showViewer"
:on-close="closeViewer"
:url-list="[url]" />
</div>
</template>
<script>
// 導(dǎo)入組件
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
},
// 關(guān)閉查看器
closeViewer() {
this.showViewer = false
}
}
</script>
