overflow.vue 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. <script setup lang="ts">
  2. import { CloudUploadOutlined } from '@ant-design/icons-vue';
  3. import { Flex, Segmented, Switch } from 'ant-design-vue';
  4. import { Attachments, type AttachmentsProps } from 'ant-design-x-vue';
  5. import { ref, h, computed } from 'vue';
  6. defineOptions({ name: 'AXAttachmentOverflow' });
  7. const presetFiles: AttachmentsProps['items'] = Array.from({ length: 30 }).map((_, index) => ({
  8. uid: String(index),
  9. name: `file-${index}.jpg`,
  10. status: 'done',
  11. thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
  12. url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
  13. }));
  14. const overflow = ref<AttachmentsProps['overflow']>('wrap');
  15. const items = ref<AttachmentsProps['items']>(presetFiles);
  16. const disabled = ref(false);
  17. // 使用计算属性来处理 items.length !== 0
  18. const hasItems = computed({
  19. get: () => items.value.length !== 0,
  20. set: (value) => {
  21. items.value = value ? presetFiles : [];
  22. }
  23. });
  24. </script>
  25. <template>
  26. <Flex
  27. vertical
  28. :gap="'middle'"
  29. >
  30. <Flex
  31. :gap="'middle'"
  32. :align="'center'"
  33. >
  34. <Segmented
  35. v-model:value="overflow"
  36. :options="[
  37. { value: 'wrap', label: 'Wrap' },
  38. { value: 'scrollX', label: 'Scroll X' },
  39. { value: 'scrollY', label: 'Scroll Y' },
  40. ]"
  41. style="margin-inline-end: auto"
  42. />
  43. <Switch
  44. v-model:checked="hasItems"
  45. checked-children="Data"
  46. un-checked-children="Data"
  47. />
  48. <Switch
  49. v-model:checked="disabled"
  50. checked-children="Disabled"
  51. un-checked-children="Disabled"
  52. />
  53. </Flex>
  54. <Attachments
  55. :overflow="overflow"
  56. :items="items"
  57. :before-upload="() => false"
  58. :placeholder="{
  59. icon: h(CloudUploadOutlined),
  60. title: 'Click or Drop files here',
  61. description: 'Support file type: image, video, audio, document, etc.',
  62. }"
  63. :disabled="disabled"
  64. @change="(info) => items = info.fileList"
  65. />
  66. </Flex>
  67. </template>