|
|
|
@ -29,7 +29,16 @@ |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<script lang="ts"> |
|
|
|
import { defineComponent, computed, CSSProperties, unref, ref, watchEffect, watch } from 'vue'; |
|
|
|
import { |
|
|
|
defineComponent, |
|
|
|
computed, |
|
|
|
CSSProperties, |
|
|
|
unref, |
|
|
|
ref, |
|
|
|
watchEffect, |
|
|
|
watch, |
|
|
|
PropType, |
|
|
|
} from 'vue'; |
|
|
|
import CopperModal from './CopperModal.vue'; |
|
|
|
import { useDesign } from '/@/hooks/web/useDesign'; |
|
|
|
import { useModal } from '/@/components/Modal'; |
|
|
|
@ -42,7 +51,7 @@ |
|
|
|
width: { type: [String, Number], default: '200px' }, |
|
|
|
value: { type: String }, |
|
|
|
showBtn: { type: Boolean, default: true }, |
|
|
|
btnProps: { type: Object as ButtonProps }, |
|
|
|
btnProps: { type: Object as PropType<ButtonProps> }, |
|
|
|
btnText: { type: String, default: '' }, |
|
|
|
uploadApi: { type: Function as PropType<({ file: Blob, name: string }) => Promise<void>> }, |
|
|
|
}; |
|
|
|
@ -52,10 +61,10 @@ |
|
|
|
components: { CopperModal, Icon }, |
|
|
|
props, |
|
|
|
emits: ['update:value', 'change'], |
|
|
|
setup(props, { emit }) { |
|
|
|
setup(props, { emit, expose }) { |
|
|
|
const sourceValue = ref(props.value || ''); |
|
|
|
const { prefixCls } = useDesign('cropper-avatar'); |
|
|
|
const [register, { openModal }] = useModal(); |
|
|
|
const [register, { openModal, closeModal }] = useModal(); |
|
|
|
const { createMessage } = useMessage(); |
|
|
|
const { t } = useI18n(); |
|
|
|
|
|
|
|
@ -72,7 +81,7 @@ |
|
|
|
); |
|
|
|
|
|
|
|
watchEffect(() => { |
|
|
|
sourceValue.value = props.value; |
|
|
|
sourceValue.value = props.value || ''; |
|
|
|
}); |
|
|
|
|
|
|
|
watch( |
|
|
|
@ -88,6 +97,8 @@ |
|
|
|
createMessage.success(t('component.cropper.uploadSuccess')); |
|
|
|
} |
|
|
|
|
|
|
|
expose({ openModal: openModal.bind(null, true), closeModal }); |
|
|
|
|
|
|
|
return { |
|
|
|
t, |
|
|
|
prefixCls, |
|
|
|
|