basic.vue 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. <script setup lang="ts">
  2. import { RedditOutlined } from '@ant-design/icons-vue';
  3. import { Sender, Suggestion, type SuggestionProps } from 'ant-design-x-vue';
  4. import { ref, h } from 'vue';
  5. defineOptions({ name: 'AXSuggestionBasicSetup' });
  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: h(RedditOutlined, { displayName: '' }),
  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 value = ref('')
  27. const updateValue = (v: string) => {
  28. value.value = v
  29. }
  30. </script>
  31. <template>
  32. <Suggestion
  33. :items="suggestions"
  34. @select="(itemVal) => {
  35. updateValue(`[${itemVal}]:`);
  36. }"
  37. >
  38. <template #default="{ onTrigger, onKeyDown }">
  39. <Sender
  40. :value="value"
  41. @change="(nextVal) => {
  42. if (nextVal === '/') {
  43. onTrigger();
  44. } else if (!nextVal) {
  45. onTrigger(false);
  46. }
  47. updateValue(nextVal);
  48. }"
  49. @keydown="onKeyDown"
  50. placeholder="输入 / 获取建议"
  51. />
  52. </template>
  53. </Suggestion>
  54. </template>