basic.vue 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. <script setup lang="tsx">
  2. import { RedditOutlined } from '@ant-design/icons-vue';
  3. import { Sender, Suggestion, type SuggestionProps } from 'ant-design-x-vue';
  4. import { ref } from 'vue';
  5. defineOptions({ name: 'AXSuggestionBasic' });
  6. type SuggestionItems = Exclude<SuggestionProps['items'], () => void>;
  7. const suggestions: SuggestionItems = [
  8. { label: 'Write a report', value: 'report' },
  9. { label: 'Draw a picture', value: 'draw' },
  10. {
  11. label: 'Check some knowledge',
  12. value: 'knowledge',
  13. icon: <RedditOutlined />,
  14. children: [
  15. {
  16. label: 'About React',
  17. value: 'react',
  18. },
  19. {
  20. label: 'About Ant Design',
  21. value: 'antd',
  22. },
  23. ],
  24. },
  25. ];
  26. const Demo = () => {
  27. const value = ref('')
  28. const updateValue = (v: string) => {
  29. value.value = v
  30. }
  31. return (
  32. <Suggestion
  33. items={suggestions}
  34. onSelect={(itemVal) => {
  35. updateValue(`[${itemVal}]:`);
  36. }}
  37. children={({ onTrigger, onKeyDown }) => {
  38. return (
  39. <Sender
  40. value={value.value}
  41. onChange={(nextVal) => {
  42. if (nextVal === '/') {
  43. onTrigger();
  44. } else if (!nextVal) {
  45. onTrigger(false);
  46. }
  47. updateValue(nextVal);
  48. }}
  49. onKeyDown={onKeyDown}
  50. placeholder="输入 / 获取建议"
  51. />
  52. );
  53. }}
  54. />
  55. );
  56. };
  57. defineRender(() => {
  58. return (
  59. <Demo />
  60. )
  61. });
  62. </script>