elementui图片查看器
<template>
<div class="Box">
<el-button type="primary" size="medium" icon="el-icon-upload" @click="onPreImgView">查看</el-button>
<el-image-viewer v-if="showViewer" :on-close="closeImgViewer" :url-list="srcList" />
</div>
</template>
<script>
import ElImageViewer from "element-ui/packages/image/src/image-viewer";
export default {
data() {
return {
showViewer: false,
srcList: [
"http://t8.baidu.com/it/u=1484500186,1503043093&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1578663430&t=aa37addb70c63b52350452e6b6810d77",
"http://t9.baidu.com/it/u=583874135,70653437&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1578663430&t=ad8753fabb61e7afb22465298d0d964c"
]
};
},
mounted() { },
methods: {
// 打开图片查看器
onPreImgView(url) {
this.showViewer = true;
},
// 关闭图片查看器
closeImgViewer() {
this.showViewer = false;
}
},
computed: {},
components: { ElImageViewer }
};
</script>
<style scoped>
.Box {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
</style>
本文为Jsky原创文章,转载无需和我联系,但请注明来自Jsky博客 www.tjin.link
- 最新评论
- 总共0条评论
