trigger.vue 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546
  1. <script setup lang="ts">
  2. import { Select } from 'ant-design-vue';
  3. import { Suggestion } from 'ant-design-x-vue';
  4. import { ref } from 'vue';
  5. defineOptions({ name: 'AXSuggestionTriggerSetup' });
  6. const uuid = ref(0);
  7. const tags = ref<string[]>([]);
  8. const value = ref('');
  9. </script>
  10. <template>
  11. <Suggestion
  12. :items="(info) => [{ label: `Trigger by '${info}'`, value: String(info) }]"
  13. @select="(info) => {
  14. uuid += 1;
  15. tags = [...tags, `Cell_${uuid}`];
  16. value = value.replace(info, '');
  17. }"
  18. >
  19. <template #default="{ onTrigger, onKeyDown }">
  20. <Select
  21. :value="tags"
  22. :style="{ width: '100%' }"
  23. mode="tags"
  24. :open="false"
  25. :search-value="value"
  26. placeholder="可任意输入 / 与 # 多次获取建议"
  27. @change="(nextTags) => {
  28. if ((nextTags as string[]).length < tags.length) {
  29. tags = nextTags as string[];
  30. }
  31. }"
  32. @search="(nextVal) => {
  33. value = nextVal;
  34. }"
  35. @keydown="(e) => {
  36. if (e.key === '/' || e.key === '#') {
  37. onTrigger(e.key);
  38. }
  39. onKeyDown(e);
  40. }"
  41. />
  42. </template>
  43. </Suggestion>
  44. </template>