1234567891011121314151617181920212223242526272829 |
- <script setup lang="tsx">
- import { theme } from 'ant-design-vue';
- import { Conversations } from 'ant-design-x-vue';
- import type { ConversationsProps } from 'ant-design-x-vue';
- import { computed } from 'vue';
- defineOptions({ name: 'AXConversationsBasic' });
- const items: ConversationsProps['items'] = Array.from({ length: 4 }).map((_, index) => ({
- key: `item${index + 1}`,
- label: `Conversation Item ${index + 1}`,
- disabled: index === 3,
- }));
- const { token } = theme.useToken();
- // Customize the style of the container
- const style = computed(() => ({
- width: '256px',
- background: token.value.colorBgContainer,
- borderRadius: token.value.borderRadius,
- }));
- defineRender(() => {
- return (
- <Conversations items={items} defaultActiveKey="item1" style={style.value} />
- )
- })
- </script>
|