-
+ return () => (
+
+ {chosenTags()}
onInput($event)}
placeholder={isTagsLimit.value ? `${props.maxTagsText || t('maxTagsText')} ${props.maxTags}` : props.placeholder}
@@ -203,36 +280,7 @@ export default defineComponent({
disabled={isTagsLimit.value}
/>
-
-
-
-
-
-
-
-
+ {suggestionList()}
);
},
});
From 4e0e786f749db95f469871c080375296b3d74640 Mon Sep 17 00:00:00 2001
From: zcj <18137693952@163.com>
Date: Mon, 12 Sep 2022 21:53:28 +0800
Subject: [PATCH 5/8] =?UTF-8?q?test(tag-input):=20=E4=BF=AE=E5=A4=8D?=
=?UTF-8?q?=E5=9B=A0=E4=B8=BA=E9=80=BB=E8=BE=91=E6=9B=B4=E6=94=B9=E5=AF=BC?=
=?UTF-8?q?=E8=87=B4=E7=9A=84=E6=B5=8B=E8=AF=95=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../tag-input/__tests__/tag-input.spec.ts | 101 ++++++++++++------
1 file changed, 67 insertions(+), 34 deletions(-)
diff --git a/packages/devui-vue/devui/tag-input/__tests__/tag-input.spec.ts b/packages/devui-vue/devui/tag-input/__tests__/tag-input.spec.ts
index 8779faef3d..88ef01256b 100644
--- a/packages/devui-vue/devui/tag-input/__tests__/tag-input.spec.ts
+++ b/packages/devui-vue/devui/tag-input/__tests__/tag-input.spec.ts
@@ -1,24 +1,28 @@
import { mount } from '@vue/test-utils';
import { reactive, nextTick } from 'vue';
import DTagInput from '../src/tag-input';
+import { useNamespace } from '../../shared/hooks/use-namespace';
jest.mock('../../locale/create', () => ({
createI18nTranslate: () => jest.fn(),
}));
+const ns = useNamespace('tag-input', true);
+
const customMount = (state) => mount({
components: { DTagInput },
template: `
+ displayProperty="cname"
+ >
`,
- setup () {
+ setup() {
return {
- state
+ state,
};
- }
+ },
});
describe('DTagInput', () => {
@@ -27,17 +31,16 @@ describe('DTagInput', () => {
tags: [
{ cname: 'Y.Chen' },
{ cname: 'b' },
- { cname: 'c' }
+ { cname: 'c' },
],
suggestionList: [
{ cname: 'd' },
{ cname: 'e' },
{ cname: 'f' },
- ]
+ ],
});
const wrapper = customMount(state);
-
- expect(wrapper.find('.devui-tags-host').exists()).toBe(true);
+ expect(wrapper.find(ns.b()).exists()).toBe(true);
expect(wrapper.find('.devui-tags').exists()).toBe(true);
expect(wrapper.find('.devui-tag-list').exists()).toBe(true);
expect(wrapper.find('.devui-input').exists()).toBe(true);
@@ -49,6 +52,8 @@ describe('DTagInput', () => {
state.tags[0] = { cname: 'X.Zhang' };
await nextTick();
expect(itemA.text()).toBe('X.Zhang');
+
+ wrapper.unmount();
});
it('tag-input show suggestion work', async () => {
@@ -58,14 +63,19 @@ describe('DTagInput', () => {
],
suggestionList: [
{ cname: 'b' },
- ]
+ ],
});
const wrapper = customMount(state);
const input = wrapper.find('input.devui-input');
expect(wrapper.find('.devui-suggestion-list').exists()).toBe(false);
await input.trigger('focus');
- expect(wrapper.find('.devui-suggestion-list').exists()).toBe(true);
+
+ // 是否存在 devui-suggestion-list
+ const suggestionList = !!document.querySelectorAll('.devui-suggestion-list')[0];
+ expect(suggestionList).toBe(true);
+
+ wrapper.unmount();
});
it('tag-input disabled work', async () => {
@@ -79,19 +89,21 @@ describe('DTagInput', () => {
props: {
tags,
suggestionList,
- disabled: false
- }
+ disabled: false,
+ },
});
expect(wrapper.find('.devui-disabled').exists()).toBe(false);
expect(wrapper.find('.devui-input').isVisible()).toBe(true);
await wrapper.setProps({
- disabled: true
+ disabled: true,
});
expect(wrapper.find('.devui-disabled').exists()).toBe(true);
expect(wrapper.find('.devui-input').isVisible()).toBe(false);
expect(wrapper.find('.remove-button').exists()).toBe(false);
+
+ wrapper.unmount();
});
it('tag-input maxTags work', () => {
@@ -106,11 +118,13 @@ describe('DTagInput', () => {
props: {
tags,
suggestionList,
- maxTags: 1
- }
+ maxTags: 1,
+ },
});
expect(wrapper.find('input').attributes('disabled')).toBe('');
+
+ wrapper.unmount();
});
it('tag-input removeTag work', async () => {
@@ -121,14 +135,16 @@ describe('DTagInput', () => {
],
suggestionList: [
{ cname: 'c' },
- ]
+ ],
});
const wrapper = customMount(state);
const removeSvg = wrapper.find('.remove-button');
- await removeSvg.trigger('mousedown');
+ await removeSvg.trigger('click');
expect(wrapper.findAll('.devui-tag-item').length).toBe(1);
expect(state.tags.length).toBe(1);
expect(state.suggestionList.length).toBe(2);
+
+ wrapper.unmount();
});
it('tag-input keydown work', async () => {
@@ -139,8 +155,8 @@ describe('DTagInput', () => {
],
suggestionList: [
{ cname: 'c' },
- { cname: 'xyz' }
- ]
+ { cname: 'xyz' },
+ ],
});
const wrapper = customMount(state);
const input = wrapper.find('input');
@@ -154,6 +170,8 @@ describe('DTagInput', () => {
expect(state.tags.length).toBe(4);
expect(state.tags[3].cname).toBe('xyz');
expect(state.suggestionList.length).toBe(1);
+
+ wrapper.unmount();
});
it('tag-input filter suggestion work', async () => {
@@ -165,22 +183,27 @@ describe('DTagInput', () => {
suggestionList: [
{ cname: 'x' },
{ cname: 'xy' },
- { cname: 'xyz' }
- ]
+ { cname: 'xyz' },
+ ],
});
const wrapper = customMount(state);
const input = wrapper.find('input');
await input.trigger('focus');
- expect(wrapper.findAll('.devui-suggestion-item').length).toBe(3);
+ let suggestionList = document.querySelectorAll('.devui-suggestion-item');
+ expect(suggestionList.length).toBe(3);
await input.setValue('xy');
await input.trigger('input');
- expect(wrapper.findAll('.devui-suggestion-item').length).toBe(2);
+ suggestionList = document.querySelectorAll('.devui-suggestion-item');
+ expect(suggestionList.length).toBe(2);
await input.setValue('xxx');
await input.trigger('input');
- expect(wrapper.findAll('.devui-suggestion-item.devui-disabled').length).toBe(1);
+ suggestionList = document.querySelectorAll('.devui-suggestion-item');
+ expect(suggestionList.length).toBe(1);
+
+ wrapper.unmount();
});
it('tag-input click suggestion work', async () => {
@@ -192,17 +215,20 @@ describe('DTagInput', () => {
suggestionList: [
{ cname: 'x' },
{ cname: 'yyy' },
- { cname: 'xyz' }
- ]
+ { cname: 'xyz' },
+ ],
});
const wrapper = customMount(state);
await wrapper.find('input').trigger('focus');
- const yyy = wrapper.findAll('.devui-suggestion-item')[1];
+ const suggestionList = document.querySelectorAll('.devui-suggestion-item');
+ const yyy = suggestionList[1];
+ yyy.dispatchEvent(new Event('click'));
- await yyy.trigger('mousedown');
expect(state.tags.length).toBe(3);
expect(state.tags[2].cname).toBe('yyy');
expect(state.suggestionList.length).toBe(2);
+
+ wrapper.unmount();
});
it('tag-input arrow work', async () => {
@@ -214,24 +240,31 @@ describe('DTagInput', () => {
suggestionList: [
{ cname: 'x' },
{ cname: 'yyy' },
- { cname: 'xyz' }
- ]
+ { cname: 'xyz' },
+ ],
});
const wrapper = customMount(state);
const input = wrapper.find('input');
await input.trigger('focus');
+ let suggestionList = document.querySelectorAll('.devui-suggestion-item');
+ // 获取焦点默认第一个选中
+ expect(suggestionList[0].className).toContain('selected');
- expect(wrapper.findAll('.devui-suggestion-item')[0].classes()).toContain('selected');
-
+ // 按下 下箭头，选中第二个数组第一个
await input.trigger('keydown', { key: 'ArrowDown' });
- expect(wrapper.findAll('.devui-suggestion-item')[1].classes()).toContain('selected');
+ suggestionList = document.querySelectorAll('.devui-suggestion-item');
+ expect(suggestionList[1].className).toContain('selected');
await input.trigger('keydown', { key: 'ArrowUp' });
await input.trigger('keydown', { key: 'ArrowUp' });
- expect(wrapper.findAll('.devui-suggestion-item')[2].classes()).toContain('selected');
+ suggestionList = document.querySelectorAll('.devui-suggestion-item');
+ expect(suggestionList[2].className).toContain('selected');
+ // 按下Enter选中数据
await input.trigger('keydown', { key: 'Enter' });
expect(state.tags[2].cname).toBe('xyz');
expect(state.suggestionList.length).toBe(2);
+
+ wrapper.unmount();
});
});
From 42c9b065ac66a14a55a8933644224b127352f710 Mon Sep 17 00:00:00 2001
From: zcj <18137693952@163.com>
Date: Tue, 13 Sep 2022 10:16:20 +0800
Subject: [PATCH 6/8] feat(tag-input): add useInputKeydown
---
.../src/composables/use-input-keydown.ts | 38 +++++++++++++++++++
.../devui/tag-input/src/tag-input-types.ts | 8 ++++
.../devui/tag-input/src/tag-input.tsx | 30 +--------------
3 files changed, 48 insertions(+), 28 deletions(-)
create mode 100644 packages/devui-vue/devui/tag-input/src/composables/use-input-keydown.ts
diff --git a/packages/devui-vue/devui/tag-input/src/composables/use-input-keydown.ts b/packages/devui-vue/devui/tag-input/src/composables/use-input-keydown.ts
new file mode 100644
index 0000000000..02da1ed97d
--- /dev/null
+++ b/packages/devui-vue/devui/tag-input/src/composables/use-input-keydown.ts
@@ -0,0 +1,38 @@
+import { TagInputProps, HandleEnter, OnSelectIndexChange, UseInputKeydownReturnTypes } from '../tag-input-types';
+
+export const useInputKeydown = (
+ props: TagInputProps,
+ handleEnter: HandleEnter,
+ onSelectIndexChange: OnSelectIndexChange): UseInputKeydownReturnTypes => {
+
+ const KEYS_MAP = {
+ tab: 'Tab',
+ down: 'ArrowDown',
+ up: 'ArrowUp',
+ enter: 'Enter',
+ space: ' ',
+ } as const;
+
+ const onInputKeydown = ($event: KeyboardEvent) => {
+ switch ($event.key) {
+ case KEYS_MAP.tab:
+ case KEYS_MAP.enter:
+ case KEYS_MAP.space:
+ if (!props.isAddBySpace && KEYS_MAP.space) {
+ return;
+ }
+ handleEnter();
+ break;
+ case KEYS_MAP.down:
+ onSelectIndexChange(true);
+ break;
+ case KEYS_MAP.up:
+ onSelectIndexChange(false);
+ break;
+ default:
+ break;
+ }
+ };
+
+ return { onInputKeydown };
+};
diff --git a/packages/devui-vue/devui/tag-input/src/tag-input-types.ts b/packages/devui-vue/devui/tag-input/src/tag-input-types.ts
index 1e18ceef34..b06ad9c5ca 100644
--- a/packages/devui-vue/devui/tag-input/src/tag-input-types.ts
+++ b/packages/devui-vue/devui/tag-input/src/tag-input-types.ts
@@ -2,6 +2,7 @@ import type { ExtractPropTypes, PropType } from 'vue';
export interface Suggestion {
__index?: number;
+
[x: string]: unknown;
}
@@ -65,3 +66,10 @@ export const tagInputProps = {
} as const;
export type TagInputProps = ExtractPropTypes
;
+
+export type HandleEnter = () => void;
+export type OnSelectIndexChange = (isUp: boolean) => void;
+
+export interface UseInputKeydownReturnTypes {
+ onInputKeydown: (e: KeyboardEvent) => void;
+}
diff --git a/packages/devui-vue/devui/tag-input/src/tag-input.tsx b/packages/devui-vue/devui/tag-input/src/tag-input.tsx
index 5899b91361..0923c89f0b 100644
--- a/packages/devui-vue/devui/tag-input/src/tag-input.tsx
+++ b/packages/devui-vue/devui/tag-input/src/tag-input.tsx
@@ -18,14 +18,7 @@ import { useNamespace } from '../../shared/hooks/use-namespace';
import removeBtnSvg from './components/icon-remove';
import { Suggestion, TagInputProps, tagInputProps } from './tag-input-types';
import './tag-input.scss';
-
-const KEYS_MAP = {
- tab: 'Tab',
- down: 'ArrowDown',
- up: 'ArrowUp',
- enter: 'Enter',
- space: ' ',
-} as const;
+import { useInputKeydown } from './composables/use-input-keydown';
export default defineComponent({
name: 'DTagInput',
@@ -126,26 +119,7 @@ export default defineComponent({
mergedSuggestions.value.length === 0 && (tagInputVal.value = '');
};
- const onInputKeydown = ($event: KeyboardEvent) => {
- switch ($event.key) {
- case KEYS_MAP.tab:
- case KEYS_MAP.enter:
- case KEYS_MAP.space:
- if (!props.isAddBySpace && KEYS_MAP.space) {
- return;
- }
- handleEnter();
- break;
- case KEYS_MAP.down:
- onSelectIndexChange(true);
- break;
- case KEYS_MAP.up:
- onSelectIndexChange();
- break;
- default:
- break;
- }
- };
+ const { onInputKeydown } = useInputKeydown(props, handleEnter, onSelectIndexChange);
const removeTag = ($event: Event, tagIdx: number) => {
$event.preventDefault();
From ba1aa5be2b67182dd007c66f10c31f5a24508404 Mon Sep 17 00:00:00 2001
From: zcj <18137693952@163.com>
Date: Tue, 13 Sep 2022 11:00:20 +0800
Subject: [PATCH 7/8] =?UTF-8?q?feat(tag-input):=20v-model:tags=20=E4=BF=AE?=
=?UTF-8?q?=E6=94=B9=E4=B8=BA=20v-model=EF=BC=8C=E6=9B=B4=E6=96=B0?=
=?UTF-8?q?=E6=96=87=E6=A1=A3=E3=80=81=E6=B5=8B=E8=AF=95=E7=94=A8=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../tag-input/__tests__/tag-input.spec.ts | 12 ++++--
.../devui/tag-input/src/tag-input-types.ts | 2 +-
.../devui/tag-input/src/tag-input.tsx | 33 ++++++++++-------
.../docs/components/tag-input/index.md | 37 +++++++++++++------
4 files changed, 54 insertions(+), 30 deletions(-)
diff --git a/packages/devui-vue/devui/tag-input/__tests__/tag-input.spec.ts b/packages/devui-vue/devui/tag-input/__tests__/tag-input.spec.ts
index 88ef01256b..6edb124071 100644
--- a/packages/devui-vue/devui/tag-input/__tests__/tag-input.spec.ts
+++ b/packages/devui-vue/devui/tag-input/__tests__/tag-input.spec.ts
@@ -2,6 +2,12 @@ import { mount } from '@vue/test-utils';
import { reactive, nextTick } from 'vue';
import DTagInput from '../src/tag-input';
import { useNamespace } from '../../shared/hooks/use-namespace';
+import { Suggestion } from '../src/tag-input-types';
+
+interface StateType {
+ tags: Array;
+ suggestionList: Array;
+}
jest.mock('../../locale/create', () => ({
createI18nTranslate: () => jest.fn(),
@@ -9,11 +15,11 @@ jest.mock('../../locale/create', () => ({
const ns = useNamespace('tag-input', true);
-const customMount = (state) => mount({
+const customMount = (state: StateType) => mount({
components: { DTagInput },
template: `
@@ -116,7 +122,7 @@ describe('DTagInput', () => {
]);
const wrapper = mount(DTagInput, {
props: {
- tags,
+ modelValue: tags,
suggestionList,
maxTags: 1,
},
diff --git a/packages/devui-vue/devui/tag-input/src/tag-input-types.ts b/packages/devui-vue/devui/tag-input/src/tag-input-types.ts
index b06ad9c5ca..41ee6c497b 100644
--- a/packages/devui-vue/devui/tag-input/src/tag-input-types.ts
+++ b/packages/devui-vue/devui/tag-input/src/tag-input-types.ts
@@ -7,7 +7,7 @@ export interface Suggestion {
}
export const tagInputProps = {
- tags: {
+ modelValue: {
type: Array as PropType,
default: (): [] => [],
},
diff --git a/packages/devui-vue/devui/tag-input/src/tag-input.tsx b/packages/devui-vue/devui/tag-input/src/tag-input.tsx
index 0923c89f0b..c4512517a6 100644
--- a/packages/devui-vue/devui/tag-input/src/tag-input.tsx
+++ b/packages/devui-vue/devui/tag-input/src/tag-input.tsx
@@ -26,13 +26,18 @@ export default defineComponent({
ClickOutside,
},
props: tagInputProps,
- emits: ['update:tags', 'update:suggestionList', 'change'],
+ emits: ['update:modelValue', 'update:suggestionList', 'change'],
setup(props: TagInputProps, ctx: SetupContext) {
const app = getCurrentInstance();
const t = createI18nTranslate('DTagInput', app);
const ns = useNamespace('tag-input');
+ const selectedTags = ref>([]);
+ watch(() => props.modelValue, () => {
+ selectedTags.value = props.modelValue;
+ }, { immediate: true, deep: true });
+
const add = (arr: Suggestion[], target: Suggestion) => {
const res = Object.assign({}, target);
delete res.__index;
@@ -96,7 +101,7 @@ export default defineComponent({
if (tagInputVal.value === '' && mergedSuggestions.value.length === 0) {
return false;
}
- if (props.tags.findIndex((item) => item[props.displayProperty] === tagInputVal.value) > -1) {
+ if (selectedTags.value.findIndex((item) => item[props.displayProperty] === tagInputVal.value) > -1) {
tagInputVal.value = '';
return false;
}
@@ -113,9 +118,9 @@ export default defineComponent({
ctx.emit('update:suggestionList', remove(props.suggestionList, target.__index));
}
- const newTags = add(props.tags, res);
- ctx.emit('change', props.tags, newTags);
- ctx.emit('update:tags', newTags);
+ const newTags = add(selectedTags.value, res);
+ ctx.emit('change', selectedTags.value, newTags);
+ ctx.emit('update:modelValue', newTags);
mergedSuggestions.value.length === 0 && (tagInputVal.value = '');
};
@@ -123,10 +128,10 @@ export default defineComponent({
const removeTag = ($event: Event, tagIdx: number) => {
$event.preventDefault();
- ctx.emit('update:suggestionList', add(props.suggestionList, props.tags[tagIdx]));
- const newTags = remove(props.tags, tagIdx);
- ctx.emit('change', props.tags, newTags);
- ctx.emit('update:tags', newTags);
+ ctx.emit('update:suggestionList', add(props.suggestionList, selectedTags.value[tagIdx]));
+ const newTags = remove(selectedTags.value, tagIdx);
+ ctx.emit('change', selectedTags.value, newTags);
+ ctx.emit('update:modelValue', newTags);
nextTick(() => {
tagInputRef.value?.focus();
@@ -137,14 +142,14 @@ export default defineComponent({
const onSuggestionItemClick = ($event: Event, itemIndex: number) => {
$event.preventDefault();
const target = mergedSuggestions.value[itemIndex];
- const newTags = add(props.tags, target);
+ const newTags = add(selectedTags.value, target);
const newSuggestions = remove(props.suggestionList, target.__index);
- ctx.emit('change', props.tags, newTags);
- ctx.emit('update:tags', newTags);
+ ctx.emit('change', selectedTags.value, newTags);
+ ctx.emit('update:modelValue', newTags);
ctx.emit('update:suggestionList', newSuggestions);
};
- const isTagsLimit = computed(() => props.maxTags <= props.tags.length);
+ const isTagsLimit = computed(() => props.maxTags <= selectedTags.value.length);
const isShowSuggestion = computed(() => {
return !props.disabled && !isTagsLimit.value && isInputBoxFocus.value;
});
@@ -153,7 +158,7 @@ export default defineComponent({
// 已选择 tags 列表
const chosenTags = () => {
return
- {props.tags.map((tag, tagIdx) => {
+ {selectedTags.value.map((tag, tagIdx) => {
return (
-
{tag[props.displayProperty]}
diff --git a/packages/devui-vue/docs/components/tag-input/index.md b/packages/devui-vue/docs/components/tag-input/index.md
index 6a24099df1..3a95c76e32 100644
--- a/packages/devui-vue/docs/components/tag-input/index.md
+++ b/packages/devui-vue/docs/components/tag-input/index.md
@@ -11,14 +11,15 @@
:::demo
```vue
+
{
console.log(val)
@@ -54,15 +55,18 @@ export default defineComponent({
})
```
+
:::
### disabled
+
:::demo
```vue
+
@@ -74,7 +78,14 @@ export default defineComponent({
setup() {
const state = reactive({
tags: [{ name: "123" }],
- suggestionList: [{ name: "item1" }]
+ suggestionList: [
+ { name: "item1" },
+ { name: "item2" },
+ { name: "item3" },
+ { name: "item4" },
+ { name: "item5" },
+ { name: "item6" }
+ ]
})
return {
@@ -86,13 +97,16 @@ export default defineComponent({
```
:::
+
### 标签最小长度&最大标签数
+
:::demo
```vue
+
Date: Tue, 13 Sep 2022 11:27:57 +0800
Subject: [PATCH 8/8] =?UTF-8?q?fix(tag-input):=20=E9=80=89=E6=8B=A9?=
=?UTF-8?q?=E5=BB=BA=E8=AE=AE=E9=9D=A2=E6=9D=BF=20=E9=80=89=E6=8B=A9?=
=?UTF-8?q?=E5=8D=95=E4=B8=AA=E4=B8=8D=E5=BA=94=E8=AF=A5=E8=A2=AB=E5=85=B3?=
=?UTF-8?q?=E9=97=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../devui/tag-input/src/tag-input.tsx | 45 +++++++++++--------
1 file changed, 26 insertions(+), 19 deletions(-)
diff --git a/packages/devui-vue/devui/tag-input/src/tag-input.tsx b/packages/devui-vue/devui/tag-input/src/tag-input.tsx
index c4512517a6..c17e48da8f 100644
--- a/packages/devui-vue/devui/tag-input/src/tag-input.tsx
+++ b/packages/devui-vue/devui/tag-input/src/tag-input.tsx
@@ -12,19 +12,16 @@ import {
onUnmounted,
} from 'vue';
import { createI18nTranslate } from '../../locale/create';
-import ClickOutside from '../../shared/devui-directive/clickoutside';
import { FlexibleOverlay } from '../../overlay/src/flexible-overlay';
import { useNamespace } from '../../shared/hooks/use-namespace';
import removeBtnSvg from './components/icon-remove';
import { Suggestion, TagInputProps, tagInputProps } from './tag-input-types';
import './tag-input.scss';
import { useInputKeydown } from './composables/use-input-keydown';
+import { onClickOutside } from '@vueuse/core';
export default defineComponent({
name: 'DTagInput',
- directives: {
- ClickOutside,
- },
props: tagInputProps,
emits: ['update:modelValue', 'update:suggestionList', 'change'],
setup(props: TagInputProps, ctx: SetupContext) {
@@ -57,7 +54,7 @@ export default defineComponent({
};
const mergedSuggestions = computed(() => {
- let suggestions = props.suggestionList.map((item, index: number) => {
+ const suggestions = props.suggestionList.map((item, index: number) => {
return {
__index: index,
...item,
@@ -67,9 +64,12 @@ export default defineComponent({
return suggestions;
}
- return (suggestions = props.caseSensitivity
- ? suggestions.filter((item) => item[props.displayProperty].indexOf(tagInputVal.value) !== -1)
- : suggestions.filter((item) => item[props.displayProperty].toLowerCase().indexOf(tagInputVal.value.toLowerCase()) !== -1));
+ // 大小写敏感
+ if (props.caseSensitivity) {
+ return suggestions.filter((item) => item[props.displayProperty].indexOf(tagInputVal.value) !== -1);
+ } else {
+ return suggestions.filter((item) => item[props.displayProperty].toLowerCase().indexOf(tagInputVal.value.toLowerCase()) !== -1);
+ }
});
const selectIndex = ref(0);
@@ -91,11 +91,6 @@ export default defineComponent({
isInputBoxFocus.value = true;
};
- // 点击元素外部区域关闭Suggestion选择
- const closeSuggestion = () => {
- isInputBoxFocus.value = false;
- };
-
const handleEnter = () => {
let res = { [props.displayProperty]: tagInputVal.value };
if (tagInputVal.value === '' && mergedSuggestions.value.length === 0) {
@@ -115,7 +110,7 @@ export default defineComponent({
if (mergedSuggestions.value.length) {
const target = mergedSuggestions.value[selectIndex.value];
res = target;
- ctx.emit('update:suggestionList', remove(props.suggestionList, target.__index));
+ ctx.emit('update:suggestionList', remove(props.suggestionList, target.__index as number));
}
const newTags = add(selectedTags.value, res);
@@ -128,10 +123,10 @@ export default defineComponent({
const removeTag = ($event: Event, tagIdx: number) => {
$event.preventDefault();
- ctx.emit('update:suggestionList', add(props.suggestionList, selectedTags.value[tagIdx]));
const newTags = remove(selectedTags.value, tagIdx);
ctx.emit('change', selectedTags.value, newTags);
ctx.emit('update:modelValue', newTags);
+ ctx.emit('update:suggestionList', add(props.suggestionList, selectedTags.value[tagIdx]));
nextTick(() => {
tagInputRef.value?.focus();
@@ -143,7 +138,7 @@ export default defineComponent({
$event.preventDefault();
const target = mergedSuggestions.value[itemIndex];
const newTags = add(selectedTags.value, target);
- const newSuggestions = remove(props.suggestionList, target.__index);
+ const newSuggestions = remove(props.suggestionList, target.__index as number);
ctx.emit('change', selectedTags.value, newTags);
ctx.emit('update:modelValue', newTags);
ctx.emit('update:suggestionList', newSuggestions);
@@ -154,7 +149,6 @@ export default defineComponent({
return !props.disabled && !isTagsLimit.value && isInputBoxFocus.value;
});
-
// 已选择 tags 列表
const chosenTags = () => {
return
@@ -173,9 +167,9 @@ export default defineComponent({
;
};
- const noDataTpl = - {props.noData}
;
const origin = ref();
+ // 获取容器宽度
const dropdownWidth = ref('0');
const updateDropdownWidth = () => {
dropdownWidth.value = origin?.value?.clientWidth ? origin.value.clientWidth + 'px' : '100%';
@@ -190,6 +184,16 @@ export default defineComponent({
window.removeEventListener('resize', updateDropdownWidth);
});
+ const dropdownRef = ref();
+ // 点击外部关闭suggestionList
+ onClickOutside(
+ dropdownRef,
+ () => {
+ isInputBoxFocus.value = false;
+ },
+ { ignore: [origin] },
+ );
+
// 选择建议列表
const suggestionList = () => {
const showNoData = mergedSuggestions.value.length === 0;
@@ -206,9 +210,12 @@ export default defineComponent({
);
});
+ const noDataTpl = - {props.noData}
;
+
return
(