调节缩略图片的尺寸

This commit is contained in:
季圣华
2023-07-07 20:18:31 +08:00
parent 3e5f5a2903
commit 48bdbf8dfd
3 changed files with 74 additions and 20 deletions

View File

@@ -78,7 +78,10 @@
:columns="columns"
:dataSource="dataSource">
<template slot="customBarCode" slot-scope="text, record">
{{record.barCode}} <img v-if="record.imgName" :src="getImgUrl(record.imgName, 'mini')" class="material-img" />
{{record.barCode}} <a-popover placement="right" trigger="click">
<template slot="content"><img :src="getImgUrl(record.imgName, '')" width="500px" /></template>
<img v-if="record.imgName" :src="getImgUrl(record.imgName, 'mini')" class="material-img" />
</a-popover>
</template>
</a-table>
</div>
@@ -162,7 +165,10 @@
:columns="columns"
:dataSource="dataSource">
<template slot="customBarCode" slot-scope="text, record">
{{record.barCode}} <img v-if="record.imgName" :src="getImgUrl(record.imgName, 'mini')" class="material-img" />
{{record.barCode}} <a-popover placement="right" trigger="click">
<template slot="content"><img :src="getImgUrl(record.imgName, '')" width="500px" /></template>
<img v-if="record.imgName" :src="getImgUrl(record.imgName, 'mini')" class="material-img" />
</a-popover>
</template>
</a-table>
</div>
@@ -237,7 +243,10 @@
:columns="columns"
:dataSource="dataSource">
<template slot="customBarCode" slot-scope="text, record">
{{record.barCode}} <img v-if="record.imgName" :src="getImgUrl(record.imgName, 'mini')" class="material-img" />
{{record.barCode}} <a-popover placement="right" trigger="click">
<template slot="content"><img :src="getImgUrl(record.imgName, '')" width="500px" /></template>
<img v-if="record.imgName" :src="getImgUrl(record.imgName, 'mini')" class="material-img" />
</a-popover>
</template>
</a-table>
</div>
@@ -318,7 +327,10 @@
:columns="columns"
:dataSource="dataSource">
<template slot="customBarCode" slot-scope="text, record">
{{record.barCode}} <img v-if="record.imgName" :src="getImgUrl(record.imgName, 'mini')" class="material-img" />
{{record.barCode}} <a-popover placement="right" trigger="click">
<template slot="content"><img :src="getImgUrl(record.imgName, '')" width="500px" /></template>
<img v-if="record.imgName" :src="getImgUrl(record.imgName, 'mini')" class="material-img" />
</a-popover>
</template>
</a-table>
</div>
@@ -427,7 +439,10 @@
:columns="columns"
:dataSource="dataSource">
<template slot="customBarCode" slot-scope="text, record">
{{record.barCode}} <img v-if="record.imgName" :src="getImgUrl(record.imgName, 'mini')" class="material-img" />
{{record.barCode}} <a-popover placement="right" trigger="click">
<template slot="content"><img :src="getImgUrl(record.imgName, '')" width="500px" /></template>
<img v-if="record.imgName" :src="getImgUrl(record.imgName, 'mini')" class="material-img" />
</a-popover>
</template>
</a-table>
</div>
@@ -517,7 +532,10 @@
:columns="columns"
:dataSource="dataSource">
<template slot="customBarCode" slot-scope="text, record">
{{record.barCode}} <img v-if="record.imgName" :src="getImgUrl(record.imgName, 'mini')" class="material-img" />
{{record.barCode}} <a-popover placement="right" trigger="click">
<template slot="content"><img :src="getImgUrl(record.imgName, '')" width="500px" /></template>
<img v-if="record.imgName" :src="getImgUrl(record.imgName, 'mini')" class="material-img" />
</a-popover>
</template>
</a-table>
</div>
@@ -598,7 +616,10 @@
:columns="columns"
:dataSource="dataSource">
<template slot="customBarCode" slot-scope="text, record">
{{record.barCode}} <img v-if="record.imgName" :src="getImgUrl(record.imgName, 'mini')" class="material-img" />
{{record.barCode}} <a-popover placement="right" trigger="click">
<template slot="content"><img :src="getImgUrl(record.imgName, '')" width="500px" /></template>
<img v-if="record.imgName" :src="getImgUrl(record.imgName, 'mini')" class="material-img" />
</a-popover>
</template>
</a-table>
</div>
@@ -712,7 +733,10 @@
:columns="columns"
:dataSource="dataSource">
<template slot="customBarCode" slot-scope="text, record">
{{record.barCode}} <img v-if="record.imgName" :src="getImgUrl(record.imgName, 'mini')" class="material-img" />
{{record.barCode}} <a-popover placement="right" trigger="click">
<template slot="content"><img :src="getImgUrl(record.imgName, '')" width="500px" /></template>
<img v-if="record.imgName" :src="getImgUrl(record.imgName, 'mini')" class="material-img" />
</a-popover>
</template>
</a-table>
</div>
@@ -805,7 +829,10 @@
:columns="columns"
:dataSource="dataSource">
<template slot="customBarCode" slot-scope="text, record">
{{record.barCode}} <img v-if="record.imgName" :src="getImgUrl(record.imgName, 'mini')" class="material-img" />
{{record.barCode}} <a-popover placement="right" trigger="click">
<template slot="content"><img :src="getImgUrl(record.imgName, '')" width="500px" /></template>
<img v-if="record.imgName" :src="getImgUrl(record.imgName, 'mini')" class="material-img" />
</a-popover>
</template>
</a-table>
</div>
@@ -854,7 +881,10 @@
:columns="columns"
:dataSource="dataSource">
<template slot="customBarCode" slot-scope="text, record">
{{record.barCode}} <img v-if="record.imgName" :src="getImgUrl(record.imgName, 'mini')" class="material-img" />
{{record.barCode}} <a-popover placement="right" trigger="click">
<template slot="content"><img :src="getImgUrl(record.imgName, '')" width="500px" /></template>
<img v-if="record.imgName" :src="getImgUrl(record.imgName, 'mini')" class="material-img" />
</a-popover>
</template>
</a-table>
</div>
@@ -894,7 +924,10 @@
:columns="columns"
:dataSource="dataSource">
<template slot="customBarCode" slot-scope="text, record">
{{record.barCode}} <img v-if="record.imgName" :src="getImgUrl(record.imgName, 'mini')" class="material-img" />
{{record.barCode}} <a-popover placement="right" trigger="click">
<template slot="content"><img :src="getImgUrl(record.imgName, '')" width="500px" /></template>
<img v-if="record.imgName" :src="getImgUrl(record.imgName, 'mini')" class="material-img" />
</a-popover>
</template>
</a-table>
</div>
@@ -934,7 +967,10 @@
:columns="columns"
:dataSource="dataSource">
<template slot="customBarCode" slot-scope="text, record">
{{record.barCode}} <img v-if="record.imgName" :src="getImgUrl(record.imgName, 'mini')" class="material-img" />
{{record.barCode}} <a-popover placement="right" trigger="click">
<template slot="content"><img :src="getImgUrl(record.imgName, '')" width="500px" /></template>
<img v-if="record.imgName" :src="getImgUrl(record.imgName, 'mini')" class="material-img" />
</a-popover>
</template>
</a-table>
</div>
@@ -974,7 +1010,10 @@
:columns="columns"
:dataSource="dataSource">
<template slot="customBarCode" slot-scope="text, record">
{{record.barCode}} <img v-if="record.imgName" :src="getImgUrl(record.imgName, 'mini')" class="material-img" />
{{record.barCode}} <a-popover placement="right" trigger="click">
<template slot="content"><img :src="getImgUrl(record.imgName, '')" width="500px" /></template>
<img v-if="record.imgName" :src="getImgUrl(record.imgName, 'mini')" class="material-img" />
</a-popover>
</template>
</a-table>
</div>
@@ -1018,7 +1057,10 @@
:columns="columns"
:dataSource="dataSource">
<template slot="customBarCode" slot-scope="text, record">
{{record.barCode}} <img v-if="record.imgName" :src="getImgUrl(record.imgName, 'mini')" class="material-img" />
{{record.barCode}} <a-popover placement="right" trigger="click">
<template slot="content"><img :src="getImgUrl(record.imgName, '')" width="500px" /></template>
<img v-if="record.imgName" :src="getImgUrl(record.imgName, 'mini')" class="material-img" />
</a-popover>
</template>
</a-table>
</div>
@@ -1769,7 +1811,7 @@
<style scoped>
.material-img{
max-width:36px;
max-height:27px;
max-width:40px;
max-height:30px;
}
</style>

View File

@@ -152,7 +152,9 @@
<template slot="content">
<img :src="getImgUrl(record.imgName, '')" width="500px" />
</template>
<img v-if="record.imgName" :src="getImgUrl(record.imgName, 'mini')" style="cursor:pointer; max-width:36px; max-height:27px;" title="查看大图" />
<div style="width:52px;height:52px;" v-if="record.imgName">
<img v-if="record.imgName" :src="getImgUrl(record.imgName, 'mini')" class="item-img" title="查看大图" />
</div>
</a-popover>
</template>
<template slot="customBarCode" slot-scope="text, record">
@@ -249,7 +251,7 @@
width: 100,
scopedSlots: { customRender: 'action' },
},
{title: '图片', dataIndex: 'pic', width: 45, scopedSlots: { customRender: 'customPic' }},
{title: '图片', dataIndex: 'pic', width: 65, scopedSlots: { customRender: 'customPic' }},
{title: '条码', dataIndex: 'mBarCode', width: 120},
{title: '名称', dataIndex: 'name', width: 160, scopedSlots: { customRender: 'customName' }},
{title: '规格', dataIndex: 'standard', width: 120},
@@ -419,4 +421,14 @@
</script>
<style scoped>
@import '~@assets/less/common.less'
</style>
<style>
.item-img {
cursor:pointer;
position: static;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
</style>