其他分享
首页 > 其他分享> > 如何控制el-image预览图片的大小

如何控制el-image预览图片的大小

作者:互联网

使用el-image标签,发现预览图太大,占满了整个浏览器

代码如下:

<el-image :src="scope.row.carouselUrl" :preview-src-list="scope.row.photo"/>

如何才能控制预览图片的大小呢?如果我想不使用image组件又想使用预览大图的功能是否可行呢?我们可以使用image-viewer组件

使用方法:

1、引入image-viewer

import elImageViewer from 'element-ui/packages/image/src/image-viewer'

2、注册组件

components: { elImageViewer },

3、使用组件

<el-table-column label="轮播图" width="220px">
<template slot-scope="scope">
<img :src="scope.row.carouselUrl" width="200" height="100" class="tableImg"/>
<el-button @click="onpreview(scope.row.carouselUrl)">预览</el-button>
<el-image-viewer
v-if="showviewer"
:on-close="closeviewer"
:url-list="urlList"
style="width: 80%; height: 80%; margin-left: 10%; margin-top: 5%"/>
</template>
</el-table-column>

注意:url-list为数组,

4、在data数据模型中定义showviewer属性和urlList数组和在methods中定义方法closeviewer和onpreview方法

showviewer: false,
urlList: []

方法

// 关闭查看器
closeviewer() {
this.showviewer = false
this.urlList = []
},
onpreview(url) {
this.urlList.push(url)
this.showviewer = true
},

当点击预览按钮,将图片的url传递给onpreview方法,方法中将url放入urlList中。当关闭预览图时,将urlList清空,否则显示的是原来的图片。

效果如下:

 点击预览效果如下:

 

标签:el,预览,url,image,showviewer,组件,urlList
来源: https://www.cnblogs.com/zwh0910/p/14940303.html