Element-UI的点击按钮实现图片预览功能
工作需求:点击按钮实现图片预览功能场景为后台管理系统中需要功能为点击按钮实现预览图片Vue 2.6.10+ Element-UI应用element的el-image-viewer 组件引入ElImageViewer该组件import ElImageViewer from 'element-ui/packages/image/src/image-viewer'使用组件// html<el-im
·
工作需求:点击按钮实现图片预览功能
场景为后台管理系统中需要功能为点击按钮实现预览图片
Vue 2.6.10 + Element-UI
- 应用element的el-image-viewer 组件
- 引入ElImageViewer 该组件
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
- 使用组件
// html
<el-image-viewer v-if="showViewer" :on-close="showViewerClose" :url-list="[guidePic]"></el-image-viewer>
<el-button type="primary" size="small" @click="getPreview"></el-button>
// script
components:{ ElImageViewer },
data(){
return{
showViewer: false,
guidePic:null // 预览图片的地址
}
},
method:{
showViewerClose(){
this.showViewer = false
},
getPreview(){
this.guidePic ? this.showViewer = true: this.$message.info('当前没有可预览的图片')
}
}
更多推荐
已为社区贡献2条内容
所有评论(0)