fix: 个人中心头像为空时不能修改
This commit is contained in:
parent
e8dce93d66
commit
e6a9dd0e4c
@ -1,6 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="user-info-head" @click="open()">
|
<div class="user-info-head" @click="open()">
|
||||||
<img v-if="sourceValue" :src="sourceValue" alt="avatar" class="img-circle img-lg" />
|
<img v-if="sourceValue" :src="sourceValue" alt="avatar" class="img-circle img-lg" />
|
||||||
|
<img v-if="!sourceValue" :src="avatar" alt="avatar" class="img-circle img-lg" />
|
||||||
<el-button v-if="showBtn" :class="`${prefixCls}-upload-btn`" @click="open()">
|
<el-button v-if="showBtn" :class="`${prefixCls}-upload-btn`" @click="open()">
|
||||||
{{ btnText ? btnText : t('cropper.selectImage') }}
|
{{ btnText ? btnText : t('cropper.selectImage') }}
|
||||||
</el-button>
|
</el-button>
|
||||||
@ -17,6 +18,7 @@ import { useDesign } from '@/hooks/web/useDesign'
|
|||||||
import { propTypes } from '@/utils/propTypes'
|
import { propTypes } from '@/utils/propTypes'
|
||||||
import { useI18n } from 'vue-i18n'
|
import { useI18n } from 'vue-i18n'
|
||||||
import CopperModal from './CopperModal.vue'
|
import CopperModal from './CopperModal.vue'
|
||||||
|
import avatar from '@/assets/imgs/avatar.jpg'
|
||||||
|
|
||||||
defineOptions({ name: 'CropperAvatar' })
|
defineOptions({ name: 'CropperAvatar' })
|
||||||
|
|
||||||
|
@ -4,7 +4,7 @@
|
|||||||
ref="cropperRef"
|
ref="cropperRef"
|
||||||
:btnProps="{ preIcon: 'ant-design:cloud-upload-outlined' }"
|
:btnProps="{ preIcon: 'ant-design:cloud-upload-outlined' }"
|
||||||
:showBtn="false"
|
:showBtn="false"
|
||||||
:value="avatar"
|
:value="img"
|
||||||
width="120px"
|
width="120px"
|
||||||
@change="handelUpload"
|
@change="handelUpload"
|
||||||
/>
|
/>
|
||||||
@ -13,15 +13,13 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { propTypes } from '@/utils/propTypes'
|
import { propTypes } from '@/utils/propTypes'
|
||||||
import { uploadAvatar } from '@/api/system/user/profile'
|
import { uploadAvatar } from '@/api/system/user/profile'
|
||||||
|
import { CropperAvatar } from '@/components/Cropper'
|
||||||
|
|
||||||
defineOptions({ name: 'UserAvatar' })
|
defineOptions({ name: 'UserAvatar' })
|
||||||
|
|
||||||
const props = defineProps({
|
defineProps({
|
||||||
img: propTypes.string.def('')
|
img: propTypes.string.def('')
|
||||||
})
|
})
|
||||||
const avatar = computed(() => {
|
|
||||||
return props.img
|
|
||||||
})
|
|
||||||
|
|
||||||
const cropperRef = ref()
|
const cropperRef = ref()
|
||||||
const handelUpload = async ({ data }) => {
|
const handelUpload = async ({ data }) => {
|
||||||
|
Loading…
Reference in New Issue
Block a user