67 lines
1.5 KiB
Vue
67 lines
1.5 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 {
|
||
|
|
::v-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>
|