72 lines
1.8 KiB
Vue
72 lines
1.8 KiB
Vue
<template>
|
|
<div class="uploadImg" :style="`width:${width}px;height:${width}px`">
|
|
<el-upload
|
|
:disabled="disable"
|
|
class="avatar-uploader"
|
|
action="#"
|
|
:show-file-list="false"
|
|
:on-change="handleAvatarSuccess"
|
|
>
|
|
<img v-if="imageUrl" :src="imageUrl" @click="clickImg" class="avatar" />
|
|
<!-- <el-icon v-else class="avatar-uploader-icon" :style="`line-height: ${width}px`"><Plus /></el-icon>-->
|
|
<el-icon v-else class="avatar-uploader-icon">
|
|
<Plus />
|
|
</el-icon>
|
|
</el-upload>
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { ref } from 'vue'
|
|
import { Plus } from '@element-plus/icons-vue'
|
|
|
|
const props = defineProps(['disable', 'width'])
|
|
const imageUrl = ref('')
|
|
|
|
const handleAvatarSuccess = (res, file) => {
|
|
imageUrl.value = URL.createObjectURL(res.raw)
|
|
}
|
|
|
|
const emit = defineEmits(['onClick'])
|
|
|
|
const clickImg = () => {
|
|
if (!props.disable) {
|
|
emit('onClick', {
|
|
...this.file,
|
|
baseUrl: this.imageUrl,
|
|
})
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.uploadImg {
|
|
:deep .avatar-uploader {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 1px solid #dfdfdf;
|
|
overflow: hidden;
|
|
|
|
.el-upload--text {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
.avatar-uploader-icon {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.avatar {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
}
|
|
</style>
|