trigger.vue 1.4 KB

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