block.vue 1.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445
  1. <script setup lang="ts">
  2. import { Sender, Suggestion, type SuggestionProps } from 'ant-design-x-vue';
  3. import { ref } from 'vue';
  4. defineOptions({ name: 'AXSuggestionBlockSetup' });
  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. </script>
  17. <template>
  18. <Suggestion
  19. :items="suggestions"
  20. block
  21. @select="(itemVal) => {
  22. value = `[${itemVal}]:`;
  23. }"
  24. >
  25. <template #default="{ onTrigger, onKeyDown }">
  26. <Sender
  27. :value="value"
  28. :on-change="(nextVal) => {
  29. if (nextVal === '/') {
  30. onTrigger();
  31. } else if (!nextVal) {
  32. onTrigger(false);
  33. }
  34. value = nextVal;
  35. }"
  36. :on-keydown="onKeyDown"
  37. placeholder="输入 / 获取建议"
  38. />
  39. </template>
  40. </Suggestion>
  41. </template>