controlled-mode.vue 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. <script setup lang="tsx">
  2. import { Button, Flex, theme } from 'ant-design-vue';
  3. import { Conversations, type ConversationsProps } from 'ant-design-x-vue';
  4. import { computed, ref } from 'vue';
  5. defineOptions({ name: 'AXConversationsControlledMode' });
  6. const items: ConversationsProps['items'] = Array.from({ length: 3 }).map((_, index) => ({
  7. key: `item${index + 1}`,
  8. label: `Conversation Item ${index + 1}`,
  9. }));
  10. const activeKey = ref('item1');
  11. const updateActiveKey = (v: string) => activeKey.value = v;
  12. const { token } = theme.useToken();
  13. // Customize the style of the container
  14. const style = computed(() => ({
  15. width: '256px',
  16. background: token.value.colorBgContainer,
  17. borderRadius: token.value.borderRadius,
  18. }));
  19. defineRender(() => {
  20. return (
  21. <Flex vertical gap="small" align="flex-start">
  22. <Conversations
  23. activeKey={activeKey.value}
  24. onActiveChange={(v) => updateActiveKey(v)}
  25. items={items}
  26. style={style.value}
  27. />
  28. <Flex gap="small">
  29. <Button
  30. onClick={() => {
  31. updateActiveKey('item1');
  32. }}
  33. >
  34. Active First
  35. </Button>
  36. <Button
  37. onClick={() => {
  38. updateActiveKey('item3');
  39. }}
  40. >
  41. Active Last
  42. </Button>
  43. </Flex>
  44. </Flex>
  45. )
  46. });
  47. </script>