<template>
|
<table>
|
<tbody>
|
<tr v-if="!downTitle">
|
<td>
|
<el-row justify="space-between" align="middle">
|
{{ title }}
|
<el-button size="small" @click="$emit('change')">{{
|
btnName
|
}}</el-button>
|
</el-row>
|
</td>
|
</tr>
|
<tr>
|
<td>
|
<el-image
|
class="image"
|
:src="imgSrc"
|
:preview-src-list="[imgSrc]"
|
:initial-index="0"
|
fit="cover"
|
lazy
|
>
|
<template #error>
|
<div class="image-slot">
|
<el-button type="primary" size="small" @click="$emit('change')"
|
>选择图片</el-button
|
>
|
</div>
|
</template>
|
</el-image>
|
</td>
|
</tr>
|
<tr v-if="downTitle">
|
<td>
|
<el-row justify="space-between" align="middle">
|
{{ title }}
|
<el-button size="small" @click="$emit('change')">{{
|
btnName
|
}}</el-button>
|
</el-row>
|
</td>
|
</tr>
|
</tbody>
|
</table>
|
</template>
|
<script setup>
|
import { ref } from 'vue';
|
|
const props = defineProps({
|
// 标题是否在图片下方
|
downTitle: Boolean,
|
title: String,
|
imgSrc: String,
|
btnName: {
|
type: String,
|
default: '修改'
|
}
|
});
|
|
// const unchangeImg = '../../../../assets/image/unchange.png'
|
|
const emit = defineEmits(['change']);
|
</script>
|
<style scoped>
|
.image {
|
width: 200px;
|
height: 210px;
|
border-radius: 4px;
|
}
|
|
table {
|
color: #333333;
|
border-color: #666666;
|
border-collapse: collapse;
|
}
|
|
tr {
|
font-size: var(--el-font-size-small);
|
}
|
|
td {
|
border: 1px solid black;
|
padding: 2px 6px;
|
/* border-width: 1px;
|
padding: 8px;
|
border-style: solid;
|
border-color: #666666; */
|
}
|
|
.image-slot {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
width: 100%;
|
height: 100%;
|
background: var(--el-fill-color-light);
|
}
|
</style>
|
