<template>
<div>
<el-button @click="showViewer=true">预览</el-button>
<el-image-viewer
v-if="showViewer"
:on-close="()=>{showViewer=false}"
:url-list="imgList" />
</div>
</template>
<script>
export default {
name: 'Index',
components: {
'el-image-viewer':()=>import('element-ui/packages/image/src/image-viewer')
},
data() {
return {
showViewer: false,
imgList:['1.jpg','2.jpg']
}
}
</script>
element UI自带的图片预览插件,实现点击按钮预览图片列表 el-image-viewer
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
推荐阅读更多精彩内容
- 前言 随着版本的更新Element UI新增了新的组件,例如:Image,没错今天被我发了Image下面可通过 p...
- 前言 随着版本的更新Element UI新增了新的组件,例如:Image,这是官方文档中有写的 但我的需求并不是展...
- Element Ui为el-image组件带了图片预览功能,只需添加参数:preview-src-list="sr...
- 1使用场景 element提供图片预览,不过是el-image里面通过previewSrcList(props)开...