attachments.vue 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. <script setup lang="tsx">
  2. import SemanticPreview from '../.vitepress/vitepress/components/semantic/preview.vue'
  3. import { Attachments, type AttachmentsProps } from 'ant-design-x-vue'
  4. import { Button, Flex, Space } from 'ant-design-vue';
  5. import {CloudUploadOutlined} from '@ant-design/icons-vue'
  6. const items: AttachmentsProps['items'] = Array.from({ length: 3 }).map((_, index) => ({
  7. uid: String(index),
  8. name: `file-${index}.jpg`,
  9. status: 'done',
  10. thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
  11. url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
  12. }));
  13. defineRender(() => {
  14. return (
  15. <Flex vertical>
  16. <SemanticPreview semantics={[
  17. { name: 'placeholder', desc: '占位符' },
  18. ]}
  19. >
  20. {({ classNames }) => {
  21. return (
  22. <Attachments
  23. classNames={classNames}
  24. placeholder={{
  25. icon: <CloudUploadOutlined />,
  26. title: 'Upload File',
  27. description: 'Drag or click to upload file.',
  28. }}
  29. />
  30. )
  31. }
  32. }
  33. </SemanticPreview>
  34. <SemanticPreview semantics={[
  35. { name: 'list', desc: '列表容器' },
  36. { name: 'item', desc: '列表项' },
  37. ]}
  38. >
  39. {({ classNames }) => {
  40. return (
  41. <Attachments classNames={classNames} items={items} />
  42. )
  43. }
  44. }
  45. </SemanticPreview>
  46. </Flex>
  47. )
  48. })
  49. </script>