Ben Lin
2024-06-18 ebbd788fbb2c0b45d4473798efc57eec8ba74a25
src/components/Tinymce/src/ImgUpload.vue
@@ -14,70 +14,60 @@
    </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';