basic.vue 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. <script setup lang="tsx">
  2. import { CloudUploadOutlined, LinkOutlined } from '@ant-design/icons-vue';
  3. import { App, Button, Flex, Switch } from 'ant-design-vue';
  4. import { Sender, Attachments } from 'ant-design-x-vue';
  5. import { ref, computed, useTemplateRef } from 'vue';
  6. defineOptions({ name: 'AXAttachmentBasic' });
  7. const Demo = () => {
  8. const { message } = App.useApp();
  9. const fullScreenDrop = ref(false);
  10. const customContent = ref(true);
  11. const divRef = useTemplateRef<HTMLDivElement>('basic-container');
  12. const triggerFullScreenDrop = (v: boolean) => {
  13. fullScreenDrop.value = v
  14. }
  15. const triggerCustomContent = (v: boolean) => {
  16. customContent.value = v
  17. }
  18. const attachmentsNode = computed(() => (
  19. <Attachments
  20. beforeUpload={() => false}
  21. onChange={({ file }) => {
  22. message.info(`Mock upload: ${file.name}`);
  23. }}
  24. getDropContainer={() => (fullScreenDrop.value ? document.body : divRef.value)}
  25. placeholder={{
  26. icon: <CloudUploadOutlined />,
  27. title: 'Drag & Drop files here',
  28. description: 'Support file type: image, video, audio, document, etc.',
  29. }}
  30. children={customContent.value && <Button type="text" icon={<LinkOutlined />} />}
  31. />));
  32. return (
  33. <div ref="basic-container">
  34. <Flex vertical gap="middle" align="flex-start">
  35. <Sender prefix={attachmentsNode.value} />
  36. <Switch
  37. checked={fullScreenDrop.value}
  38. onChange={(checked) => {
  39. triggerFullScreenDrop(checked as boolean)
  40. }}
  41. checkedChildren="Full screen drop"
  42. unCheckedChildren="Full screen drop"
  43. />
  44. <Switch
  45. checked={customContent.value}
  46. onChange={(checked) => {
  47. triggerCustomContent(checked as boolean)
  48. }}
  49. checkedChildren="use default content"
  50. unCheckedChildren="custom content"
  51. />
  52. </Flex>
  53. </div>
  54. )
  55. }
  56. defineRender(() => {
  57. return (
  58. <App>
  59. <Demo />
  60. </App>
  61. )
  62. });
  63. </script>