12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970 |
- <script setup lang="ts">
- import { CloudUploadOutlined, LinkOutlined } from '@ant-design/icons-vue';
- import { App, Button, Flex, Badge } from 'ant-design-vue';
- import { Attachments, Sender } from 'ant-design-x-vue';
- import { computed, ref, h } from 'vue';
- defineOptions({ name: 'AXAttachmentWithSender' });
- const open = ref(true);
- const items = ref([]);
- const text = ref('');
- const senderRef = ref<InstanceType<typeof Sender>>(null);
- const senderHeader = computed(() =>
- h(Sender.Header, {
- title: "Attachments",
- styles: {
- content: {
- padding: 0,
- },
- },
- open: open.value,
- onOpenChange: (v: boolean) => open.value = v,
- forceRender: true
- }, {
- default: () => h(Attachments, {
- beforeUpload: () => false,
- items: items.value,
- onChange: ({ fileList }: { fileList: any[] }) => items.value = fileList,
- placeholder: (type: string) => type === 'drop'
- ? { title: 'Drop file here' }
- : {
- icon: h(CloudUploadOutlined),
- title: 'Upload files',
- description: 'Click or drag files to this area to upload',
- },
- getDropContainer: () => senderRef.value?.nativeElement
- })
- })
- );
- const badgeNode = computed(() =>
- h(Badge, { dot: items.value.length > 0 && !open.value }, {
- default: () => h(Button, {
- onClick: () => open.value = !open.value,
- icon: h(LinkOutlined)
- })
- })
- );
- </script>
- <template>
- <Flex
- style="min-height: 250px"
- align="flex-end"
- >
- <Sender
- ref="senderRef"
- :header="senderHeader"
- :prefix="badgeNode"
- :value="text"
- @change="v => text.value = v"
- @submit="() => {
- items.value = [];
- text.value = '';
- }"
- />
- </Flex>
- </template>
|