block.vue 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  1. <script setup lang="tsx">
  2. import { Sender, Suggestion, type SuggestionProps } from 'ant-design-x-vue';
  3. import { ref } from 'vue';
  4. defineOptions({ name: 'AXSuggestionBlock' });
  5. type SuggestionItems = Exclude<SuggestionProps['items'], () => void>;
  6. const suggestions: SuggestionItems = [
  7. { label: 'Write a report', value: 'report' },
  8. { label: 'Draw a picture', value: 'draw' },
  9. {
  10. label: 'Check some knowledge',
  11. value: 'knowledge',
  12. extra: 'Extra Info',
  13. },
  14. ];
  15. const value = ref('');
  16. defineRender(() => {
  17. return (
  18. <Suggestion
  19. items={suggestions}
  20. onSelect={(itemVal) => {
  21. value.value = `[${itemVal}]:`;
  22. }}
  23. block
  24. children={({ onTrigger, onKeyDown }) => {
  25. return (
  26. <Sender
  27. value={value.value}
  28. onChange={(nextVal) => {
  29. if (nextVal === '/') {
  30. onTrigger();
  31. } else if (!nextVal) {
  32. onTrigger(false);
  33. }
  34. value.value = nextVal;
  35. }}
  36. onKeyDown={onKeyDown}
  37. placeholder="输入 / 获取建议"
  38. />
  39. );
  40. }}
  41. />
  42. )
  43. });
  44. </script>