| | |
| | | </Upload> |
| | | </div> |
| | | </template> |
| | | <script lang="ts"> |
| | | import { defineComponent, computed } from 'vue'; |
| | | <script lang="ts" setup> |
| | | import { computed } from 'vue'; |
| | | |
| | | import { Upload } from 'ant-design-vue'; |
| | | import { useDesign } from '/@/hooks/web/useDesign'; |
| | | import { useGlobSetting } from '/@/hooks/setting'; |
| | | import { useI18n } from '/@/hooks/web/useI18n'; |
| | | import { useDesign } from '@/hooks/web/useDesign'; |
| | | import { useGlobSetting } from '@/hooks/setting'; |
| | | import { useI18n } from '@/hooks/web/useI18n'; |
| | | |
| | | export default defineComponent({ |
| | | name: 'TinymceImageUpload', |
| | | components: { Upload }, |
| | | props: { |
| | | fullscreen: { |
| | | type: Boolean, |
| | | }, |
| | | disabled: { |
| | | type: Boolean, |
| | | default: false, |
| | | }, |
| | | defineOptions({ name: 'TinymceImageUpload' }); |
| | | |
| | | const props = defineProps({ |
| | | fullscreen: { |
| | | type: Boolean, |
| | | }, |
| | | emits: ['uploading', 'done', 'error'], |
| | | setup(props, { emit }) { |
| | | let uploading = false; |
| | | |
| | | const { uploadUrl } = useGlobSetting(); |
| | | const { t } = useI18n(); |
| | | const { prefixCls } = useDesign('tinymce-img-upload'); |
| | | |
| | | const getButtonProps = computed(() => { |
| | | const { disabled } = props; |
| | | return { |
| | | disabled, |
| | | }; |
| | | }); |
| | | |
| | | function handleChange(info: Record<string, any>) { |
| | | const file = info.file; |
| | | const status = file?.status; |
| | | const url = file?.response?.url; |
| | | const name = file?.name; |
| | | |
| | | if (status === 'uploading') { |
| | | if (!uploading) { |
| | | emit('uploading', name); |
| | | uploading = true; |
| | | } |
| | | } else if (status === 'done') { |
| | | emit('done', name, url); |
| | | uploading = false; |
| | | } else if (status === 'error') { |
| | | emit('error'); |
| | | uploading = false; |
| | | } |
| | | } |
| | | |
| | | return { |
| | | prefixCls, |
| | | handleChange, |
| | | uploadUrl, |
| | | t, |
| | | getButtonProps, |
| | | }; |
| | | disabled: { |
| | | type: Boolean, |
| | | default: false, |
| | | }, |
| | | }); |
| | | |
| | | const emit = defineEmits(['uploading', 'done', 'error']); |
| | | |
| | | let uploading = false; |
| | | |
| | | const { uploadUrl } = useGlobSetting(); |
| | | const { t } = useI18n(); |
| | | const { prefixCls } = useDesign('tinymce-img-upload'); |
| | | |
| | | const getButtonProps = computed(() => { |
| | | const { disabled } = props; |
| | | return { |
| | | disabled, |
| | | }; |
| | | }); |
| | | |
| | | function handleChange(info: Record<string, any>) { |
| | | const file = info.file; |
| | | const status = file?.status; |
| | | const url = file?.response?.url; |
| | | const name = file?.name; |
| | | |
| | | if (status === 'uploading') { |
| | | if (!uploading) { |
| | | emit('uploading', name); |
| | | uploading = true; |
| | | } |
| | | } else if (status === 'done') { |
| | | emit('done', name, url); |
| | | uploading = false; |
| | | } else if (status === 'error') { |
| | | emit('error'); |
| | | uploading = false; |
| | | } |
| | | } |
| | | </script> |
| | | <style lang="less" scoped> |
| | | @prefix-cls: ~'@{namespace}-tinymce-img-upload'; |