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