overflow.vue 2.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. <script setup lang="tsx">
  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 } 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. defineRender(() => {
  18. return (
  19. <Flex vertical gap="middle">
  20. <Flex gap="middle" align="center">
  21. <Segmented
  22. options={[
  23. { value: 'wrap', label: 'Wrap' },
  24. { value: 'scrollX', label: 'Scroll X' },
  25. { value: 'scrollY', label: 'Scroll Y' },
  26. ]}
  27. value={overflow.value}
  28. onChange={(v) => {
  29. overflow.value = v as AttachmentsProps['overflow'];
  30. }}
  31. style={{ marginInlineEnd: 'auto' }}
  32. />
  33. <Switch
  34. checked={items.value.length !== 0}
  35. onChange={() => {
  36. items.value = items.value.length ? [] : presetFiles
  37. }}
  38. checkedChildren="Data"
  39. unCheckedChildren="Data"
  40. />
  41. <Switch
  42. checked={disabled.value}
  43. onChange={(v) => {
  44. disabled.value = v as boolean;
  45. }}
  46. checkedChildren="Disabled"
  47. unCheckedChildren="Disabled"
  48. />
  49. </Flex>
  50. <Attachments
  51. overflow={overflow.value}
  52. items={items.value}
  53. onChange={(info) => {
  54. items.value = info.fileList
  55. }}
  56. beforeUpload={() => false}
  57. placeholder={{
  58. icon: <CloudUploadOutlined />,
  59. title: 'Click or Drop files here',
  60. description: 'Support file type: image, video, audio, document, etc.',
  61. }}
  62. disabled={disabled.value}
  63. />
  64. </Flex>
  65. )
  66. })
  67. </script>