| 提交 | 用户 | age | ||
| 3ad1a4 | 1 | <template> |
| 39d629 | 2 | <div :class="[prefixCls, { fullscreen }]"> |
| 3ad1a4 | 3 | <Upload |
| V | 4 | name="file" |
| 5 | multiple | |
| 6 | @change="handleChange" | |
| 7 | :action="uploadUrl" | |
| 8 | :showUploadList="false" | |
| 170f4d | 9 | :accept="accept" |
| 3ad1a4 | 10 | > |
| 170f4d | 11 | <a-button type="text" size='small' v-bind="{ ...getButtonProps }"> |
| 128809 | 12 | <PictureOutlined /> {{ title }} |
| 9edc28 | 13 | </a-button> |
| 3ad1a4 | 14 | </Upload> |
| V | 15 | </div> |
| 16 | </template> | |
| bab28a | 17 | <script lang="ts" setup> |
| X | 18 | import { computed } from 'vue'; |
| 128809 | 19 | import {PictureOutlined } from '@ant-design/icons-vue'; |
| 3ad1a4 | 20 | import { Upload } from 'ant-design-vue'; |
| bab28a | 21 | import { useDesign } from '@/hooks/web/useDesign'; |
| X | 22 | import { useGlobSetting } from '@/hooks/setting'; |
| 23 | import { useI18n } from '@/hooks/web/useI18n'; | |
| 3ad1a4 | 24 | |
| bab28a | 25 | defineOptions({ name: 'TinymceImageUpload' }); |
| X | 26 | |
| 27 | const props = defineProps({ | |
| 28 | fullscreen: { | |
| 29 | type: Boolean, | |
| 39d629 | 30 | }, |
| bab28a | 31 | disabled: { |
| X | 32 | type: Boolean, |
| 33 | default: false, | |
| 3ad1a4 | 34 | }, |
| 170f4d | 35 | accept:{ |
| H | 36 | type: String, |
| 37 | default: '.jpg,.jpeg,.gif,.png,.webp' | |
| 38 | }, | |
| 39 | title:{ | |
| 40 | type: String, | |
| 41 | default: '图片' | |
| 42 | } | |
| 3ad1a4 | 43 | }); |
| bab28a | 44 | |
| X | 45 | const emit = defineEmits(['uploading', 'done', 'error']); |
| 46 | ||
| 47 | let uploading = false; | |
| 48 | ||
| 49 | const { uploadUrl } = useGlobSetting(); | |
| 50 | const { t } = useI18n(); | |
| 51 | const { prefixCls } = useDesign('tinymce-img-upload'); | |
| 52 | ||
| 53 | const getButtonProps = computed(() => { | |
| 54 | const { disabled } = props; | |
| 55 | return { | |
| 56 | disabled, | |
| 57 | }; | |
| 58 | }); | |
| 59 | ||
| 60 | function handleChange(info: Record<string, any>) { | |
| 61 | const file = info.file; | |
| 62 | const status = file?.status; | |
| 63 | const url = file?.response?.url; | |
| 64 | const name = file?.name; | |
| 65 | ||
| 66 | if (status === 'uploading') { | |
| 67 | if (!uploading) { | |
| 68 | emit('uploading', name); | |
| 69 | uploading = true; | |
| 70 | } | |
| 71 | } else if (status === 'done') { | |
| 72 | emit('done', name, url); | |
| 73 | uploading = false; | |
| 74 | } else if (status === 'error') { | |
| 75 | emit('error'); | |
| 76 | uploading = false; | |
| 77 | } | |
| 78 | } | |
| 3ad1a4 | 79 | </script> |
| V | 80 | <style lang="less" scoped> |
| 81 | @prefix-cls: ~'@{namespace}-tinymce-img-upload'; | |
| 82 | ||
| 83 | .@{prefix-cls} { | |
| 170f4d | 84 | // position: absolute; |
| ba2415 | 85 | z-index: 20; |
| 3ad1a4 | 86 | top: 4px; |
| V | 87 | right: 10px; |
| 39d629 | 88 | |
| V | 89 | &.fullscreen { |
| 90 | position: fixed; | |
| 91 | z-index: 10000; | |
| 92 | } | |
| 3ad1a4 | 93 | } |
| V | 94 | </style> |
