with-menu.vue 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. <script setup lang="tsx">
  2. import { DeleteOutlined, EditOutlined, StopOutlined } from '@ant-design/icons-vue';
  3. import { App, theme } from 'ant-design-vue';
  4. import { Conversations, type ConversationsProps } from 'ant-design-x-vue';
  5. import { computed } from 'vue';
  6. defineOptions({ name: 'AXConversationsWithMenu' })
  7. const items: ConversationsProps['items'] = Array.from({ length: 4 }).map((_, index) => ({
  8. key: `item${index + 1}`,
  9. label: `Conversation Item ${index + 1}`,
  10. disabled: index === 3,
  11. }));
  12. const { message } = App.useApp();
  13. const { token } = theme.useToken();
  14. const style = computed(() => ({
  15. width: '256px',
  16. background: token.value.colorBgContainer,
  17. borderRadius: token.value.borderRadius,
  18. }));
  19. const Demo = () => {
  20. const menuConfig: ConversationsProps['menu'] = (conversation) => ({
  21. items: [
  22. {
  23. label: 'Operation 1',
  24. key: 'operation1',
  25. icon: <EditOutlined />,
  26. },
  27. {
  28. label: 'Operation 2',
  29. key: 'operation2',
  30. icon: <StopOutlined />,
  31. disabled: true,
  32. },
  33. {
  34. label: 'Operation 3',
  35. key: 'operation3',
  36. icon: <DeleteOutlined />,
  37. danger: true,
  38. },
  39. ],
  40. onClick: (menuInfo) => {
  41. message.info(`Click ${conversation.key} - ${menuInfo.key}`);
  42. },
  43. });
  44. return <Conversations defaultActiveKey="item1" menu={menuConfig} items={items} style={style.value} />
  45. }
  46. defineRender(() => {
  47. return (
  48. <App>
  49. <Demo />
  50. </App>
  51. )
  52. })
  53. </script>