From b61ff9515e498966c4985c41575171d2cfa62c71 Mon Sep 17 00:00:00 2001
From: zcj <18137693952@163.com>
Date: Sun, 30 Oct 2022 16:17:21 +0800
Subject: [PATCH 1/6] =?UTF-8?q?feat(tag-input):=20=E7=BB=84=E4=BB=B6=20cla?=
 =?UTF-8?q?ss=20=E4=BD=BF=E7=94=A8=20namespace?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../tag-input/__tests__/tag-input.spec.ts     |  39 +--
 .../devui/tag-input/src/tag-input.scss        | 244 +++++++++---------
 .../devui/tag-input/src/tag-input.tsx         |  43 ++-
 3 files changed, 158 insertions(+), 168 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 6edb124071..2b00f7d98f 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
@@ -47,11 +47,10 @@ describe('DTagInput', () => {
     });
     const wrapper = customMount(state);
     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);
+    expect(wrapper.find(ns.e('tags')).exists()).toBe(true);
+    expect(wrapper.find(ns.e('input')).exists()).toBe(true);
 
-    const itemA = wrapper.find('.devui-tag-item');
+    const itemA = wrapper.find(ns.e('tags__item'));
     expect(itemA.exists()).toBe(true);
     expect(itemA.text()).toBe('Y.Chen');
 
@@ -72,13 +71,13 @@ describe('DTagInput', () => {
       ],
     });
     const wrapper = customMount(state);
-    const input = wrapper.find('input.devui-input');
+    const input = wrapper.find(ns.e('input'));
 
-    expect(wrapper.find('.devui-suggestion-list').exists()).toBe(false);
+    expect(wrapper.find(ns.e('suggestion-list')).exists()).toBe(false);
     await input.trigger('focus');
 
     // 是否存在 devui-suggestion-list
-    const suggestionList = !!document.querySelectorAll('.devui-suggestion-list')[0];
+    const suggestionList = !!document.querySelectorAll(ns.e('suggestion-list'))[0];
     expect(suggestionList).toBe(true);
 
     wrapper.unmount();
@@ -99,14 +98,16 @@ describe('DTagInput', () => {
       },
     });
 
-    expect(wrapper.find('.devui-disabled').exists()).toBe(false);
-    expect(wrapper.find('.devui-input').isVisible()).toBe(true);
+    expect(wrapper.find('.is-disabled').exists()).toBe(false);
+    expect(wrapper.find(ns.e('input')).isVisible()).toBe(true);
 
     await wrapper.setProps({
       disabled: true,
     });
-    expect(wrapper.find('.devui-disabled').exists()).toBe(true);
-    expect(wrapper.find('.devui-input').isVisible()).toBe(false);
+
+    expect(wrapper.find('.is-disabled').exists()).toBe(true);
+    // 禁用状态下不显示input
+    expect(wrapper.find(ns.e('input_hide')).exists()).toBe(true);
     expect(wrapper.find('.remove-button').exists()).toBe(false);
 
     wrapper.unmount();
@@ -146,7 +147,7 @@ describe('DTagInput', () => {
     const wrapper = customMount(state);
     const removeSvg = wrapper.find('.remove-button');
     await removeSvg.trigger('click');
-    expect(wrapper.findAll('.devui-tag-item').length).toBe(1);
+    expect(wrapper.findAll(ns.e('tags__item')).length).toBe(1);
     expect(state.tags.length).toBe(1);
     expect(state.suggestionList.length).toBe(2);
 
@@ -196,17 +197,17 @@ describe('DTagInput', () => {
     const input = wrapper.find('input');
 
     await input.trigger('focus');
-    let suggestionList = document.querySelectorAll('.devui-suggestion-item');
+    let suggestionList = document.querySelectorAll(ns.e('suggestion-list__item'));
     expect(suggestionList.length).toBe(3);
 
     await input.setValue('xy');
     await input.trigger('input');
-    suggestionList = document.querySelectorAll('.devui-suggestion-item');
+    suggestionList = document.querySelectorAll(ns.e('suggestion-list__item'));
     expect(suggestionList.length).toBe(2);
 
     await input.setValue('xxx');
     await input.trigger('input');
-    suggestionList = document.querySelectorAll('.devui-suggestion-item');
+    suggestionList = document.querySelectorAll(ns.e('suggestion-list__item'));
     expect(suggestionList.length).toBe(1);
 
     wrapper.unmount();
@@ -226,7 +227,7 @@ describe('DTagInput', () => {
     });
     const wrapper = customMount(state);
     await wrapper.find('input').trigger('focus');
-    const suggestionList = document.querySelectorAll('.devui-suggestion-item');
+    const suggestionList = document.querySelectorAll(ns.e('suggestion-list__item'));
     const yyy = suggestionList[1];
     yyy.dispatchEvent(new Event('click'));
 
@@ -252,18 +253,18 @@ describe('DTagInput', () => {
     const wrapper = customMount(state);
     const input = wrapper.find('input');
     await input.trigger('focus');
-    let suggestionList = document.querySelectorAll('.devui-suggestion-item');
+    let suggestionList = document.querySelectorAll(ns.e('suggestion-list__item'));
     // 获取焦点默认第一个选中
     expect(suggestionList[0].className).toContain('selected');
 
     // 按下 下箭头，选中第二个数组第一个
     await input.trigger('keydown', { key: 'ArrowDown' });
-    suggestionList = document.querySelectorAll('.devui-suggestion-item');
+    suggestionList = document.querySelectorAll(ns.e('suggestion-list__item'));
     expect(suggestionList[1].className).toContain('selected');
 
     await input.trigger('keydown', { key: 'ArrowUp' });
     await input.trigger('keydown', { key: 'ArrowUp' });
-    suggestionList = document.querySelectorAll('.devui-suggestion-item');
+    suggestionList = document.querySelectorAll(ns.e('suggestion-list__item'));
     expect(suggestionList[2].className).toContain('selected');
 
     // 按下Enter选中数据
diff --git a/packages/devui-vue/devui/tag-input/src/tag-input.scss b/packages/devui-vue/devui/tag-input/src/tag-input.scss
index b79c7edc30..8c9a2b6b94 100644
--- a/packages/devui-vue/devui/tag-input/src/tag-input.scss
+++ b/packages/devui-vue/devui/tag-input/src/tag-input.scss
@@ -13,131 +13,130 @@
   &:active {
     outline: 0;
   }
-}
 
-.#{$devui-prefix}-form-control.#{$devui-prefix}-tags {
-  -moz-appearance: textfield;
-  -webkit-appearance: textfield;
-  padding: 2px 4px;
-  overflow: hidden;
-  word-wrap: break-word;
-  cursor: text;
-  background-color: $devui-base-bg;
-  border: 1px solid $devui-line;
-  border-radius: $devui-border-radius;
-  height: 100%;
-  transition: border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  .is-disabled {
+    border-color: $devui-disabled-line;
+    background-color: $devui-disabled-bg;
+    cursor: not-allowed;
 
-  &:hover {
-    border-color: $devui-list-item-hover-bg;
-  }
+    .#{$devui-prefix}-tag-input__tags {
+      min-height: 22px;
 
-  &.focused {
-    outline: 0;
-  }
+      &__item {
+        color: $devui-disabled-text;
+        background-color: $devui-disabled-bg;
+        border-color: $devui-disabled-line;
 
-  &.#{$devui-prefix}-dropdown-origin:focus-within {
-    border-color: $devui-brand;
-  }
+        span {
+          margin-right: 0;
+        }
 
-  .#{$devui-prefix}-tag-list {
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
+        .remove-button {
+          background-color: $devui-disabled-line;
+
+          svg path {
+            fill: $devui-light-text;
+          }
+        }
+      }
+    }
   }
 
-  .#{$devui-prefix}-tag-item {
-    margin: 1px;
-    padding: 0 10px;
-    display: inline-block;
-    min-height: 18px;
-    line-height: 18px;
+  // 已选择
+  &__tags__wrapper {
+    -moz-appearance: textfield;
+    -webkit-appearance: textfield;
+    padding: 2px 4px;
+    overflow: hidden;
+    word-wrap: break-word;
+    cursor: text;
+    background-color: $devui-base-bg;
+    border: 1px solid $devui-line;
     border-radius: $devui-border-radius;
-    color: $devui-text;
-    background-color: $devui-label-bg;
-    position: relative;
-    border: 1px solid $devui-label-bg;
+    height: 100%;
+    transition: border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
 
-    span {
-      line-height: 1.5;
-      margin-right: 25px;
+    &:hover {
+      border-color: $devui-list-item-hover-bg;
     }
 
-    .remove-button {
-      margin: 0 0 0 12px;
-      padding: 0;
-      border: none;
-      vertical-align: top;
-      font-size: $devui-font-size-page-title;
-      border-radius: 50%;
-      background-color: $devui-line;
-      width: 12px;
-      height: 12px;
-      display: inline-block;
-      line-height: 12px;
-      text-align: center;
-      transform: translateY(-50%);
-      position: absolute;
-      top: 50%;
-      right: 10px;
-
-      svg path {
-        fill: $devui-light-text; //TODO: Color-Question
-      }
+    &:focus-within {
+      border-color: $devui-brand;
+    }
 
-      &:hover {
-        text-decoration: none;
-      }
+    &.focused {
+      outline: 0;
     }
   }
 
-  &:not(.#{$devui-prefix}-disabled) {
-    .#{$devui-prefix}-tag-item {
-      cursor: pointer;
+  &__tags {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+
+    &__item {
+      margin: 1px;
+      padding: 0 10px;
+      display: inline-block;
+      min-height: 18px;
+      line-height: 18px;
+      border-radius: $devui-border-radius;
+      color: $devui-text;
+      background-color: $devui-label-bg;
+      position: relative;
+      border: 1px solid $devui-label-bg;
 
       span {
-        &:hover {
-          color: $devui-list-item-hover-text;
-        }
+        line-height: 1.5;
+        margin-right: 25px;
       }
 
       .remove-button {
+        margin: 0 0 0 12px;
+        padding: 0;
+        border: none;
+        vertical-align: top;
+        font-size: $devui-font-size-page-title;
+        border-radius: 50%;
+        background-color: $devui-line;
+        width: 12px;
+        height: 12px;
+        display: inline-block;
+        line-height: 12px;
+        text-align: center;
+        transform: translateY(-50%);
+        position: absolute;
+        top: 50%;
+        right: 10px;
+
+        svg path {
+          fill: $devui-light-text; //TODO: Color-Question
+        }
+
         &:hover {
-          background-color: $devui-list-item-hover-text;
+          text-decoration: none;
         }
       }
-    }
-  }
-
-  &.#{$devui-prefix}-disabled {
-    border-color: $devui-disabled-line;
-    background-color: $devui-disabled-bg;
-    cursor: not-allowed;
 
-    .#{$devui-prefix}-tag-item {
-      color: $devui-disabled-text;
-      background-color: $devui-disabled-bg;
-      border-color: $devui-disabled-line;
-
-      span {
-        margin-right: 0;
-      }
+      &:not(.is-disabled) {
+        cursor: pointer;
 
-      .remove-button {
-        background-color: $devui-disabled-line;
+        span {
+          &:hover {
+            color: $devui-list-item-hover-text;
+          }
+        }
 
-        svg path {
-          fill: $devui-light-text;
+        .remove-button {
+          &:hover {
+            background-color: $devui-list-item-hover-text;
+          }
         }
       }
     }
-
-    .#{$devui-prefix}-tag-list {
-      min-height: 22px;
-    }
   }
 
-  input.#{$devui-prefix}-input {
+  &__input {
     border: 0;
     outline: 0;
     float: left;
@@ -149,54 +148,51 @@
     &::-ms-clear {
       display: none;
     }
-  }
-}
 
-.#{$devui-prefix}-tags-autocomplete {
-  width: 100%;
-  padding: 8px;
-  border-radius: $devui-border-radius;
-  background-color: $devui-connected-overlay-bg;
-  box-shadow: $devui-shadow-length-connected-overlay $devui-shadow;
+    &_hide {
+      display: none;
+    }
+  }
 
-  .#{$devui-prefix}-suggestion-list {
+  // 建议列表
+  &__suggestion-list {
+    position: relative;
+    width: 100%;
+    max-height: 280px;
+    padding: 8px;
     margin: 0;
-    padding: 0;
+    border-radius: $devui-border-radius;
+    background-color: $devui-connected-overlay-bg;
+    box-shadow: $devui-shadow-length-connected-overlay $devui-shadow;
     list-style-type: none;
-    max-height: 280px;
     overflow-y: auto;
-    position: relative;
 
-    .#{$devui-prefix}-suggestion-item {
+    &__item {
       padding: 5px 10px;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
+      color: $devui-text;
       font-size: $devui-font-size;
       line-height: 20px;
       border-radius: $devui-border-radius;
+      transition: color $devui-animation-duration-fast $devui-animation-ease-in-smooth, background-color $devui-animation-duration-fast $devui-animation-ease-in-smooth;
+      cursor: pointer;
 
-      &:not(.#{$devui-prefix}-disabled) {
-        cursor: pointer;
-        color: $devui-text;
-        // background-color: $devui-base-bg;
-        &:hover {
-          background-color: $devui-list-item-hover-bg;
-        }
+      &:hover {
+        background-color: $devui-list-item-hover-bg;
+      }
 
-        &.selected {
-          color: $devui-brand;
-          background-color: $devui-list-item-active-bg;
-        }
+      &.selected {
+        color: $devui-brand;
+        background-color: $devui-list-item-active-bg;
       }
     }
-  }
-}
 
-.#{$devui-prefix}-tags-autocomplete {
-  .#{$devui-prefix}-suggestion-list {
-    .#{$devui-prefix}-suggestion-item {
-      transition: color $devui-animation-duration-fast $devui-animation-ease-in-smooth, background-color $devui-animation-duration-fast $devui-animation-ease-in-smooth;
+    &__no-data {
+      color: var(--devui-disabled-text, #adb0b8);
+      background-color: var(--devui-disabled-bg, #f5f5f5);
+      cursor: not-allowed;
     }
   }
 }
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 c17e48da8f..a39c252042 100644
--- a/packages/devui-vue/devui/tag-input/src/tag-input.tsx
+++ b/packages/devui-vue/devui/tag-input/src/tag-input.tsx
@@ -151,10 +151,10 @@ export default defineComponent({
 
     // 已选择 tags 列表
     const chosenTags = () => {
-      return <ul class="devui-tag-list" title={props.disabled ? props.disabledText : ''}>
+      return <ul class={ns.e('tags')} title={props.disabled ? props.disabledText : ''}>
         {selectedTags.value.map((tag, tagIdx) => {
           return (
-            <li class="devui-tag-item">
+            <li class={ns.e('tags__item')}>
               <span>{tag[props.displayProperty]}</span>
               {!props.disabled && (
                 <a class="remove-button" onClick={($event: Event) => removeTag($event, tagIdx)}>
@@ -200,7 +200,7 @@ export default defineComponent({
       const suggestionListItem = mergedSuggestions.value.map((item: Suggestion, index: number) => {
         return (
           <li
-            class={{ 'devui-suggestion-item': true, selected: index === selectIndex.value }}
+            class={{ [ns.e('suggestion-list__item')]: true, selected: index === selectIndex.value }}
             onClick={($event: Event) => {
               onSuggestionItemClick($event, index);
             }}
@@ -210,7 +210,8 @@ export default defineComponent({
         );
       });
 
-      const noDataTpl = <li class="devui-suggestion-item devui-disabled">{props.noData}</li>;
+      const noDataTplCls = `${ns.e('suggestion-list__item')} ${ns.e('suggestion-list__no-data')}`;
+      const noDataTpl = <li class={noDataTplCls}>{props.noData}</li>;
 
       return <Teleport to="body">
         <Transition name="fade">
@@ -220,44 +221,36 @@ export default defineComponent({
             v-model={isShowSuggestion.value}
             style={{ zIndex: 'var(--devui-z-index-dropdown, 1052)' }}
           >
-            <div class="devui-tags-autocomplete" style={{ width: `${dropdownWidth.value}` }}>
-              <ul class="devui-suggestion-list">
-                {showNoData ? noDataTpl : suggestionListItem}
-              </ul>
-            </div>
+            <ul class={ns.e('suggestion-list')} style={{ width: `${dropdownWidth.value}` }}>
+              {showNoData ? noDataTpl : suggestionListItem}
+            </ul>
           </FlexibleOverlay>
         </Transition>
       </Teleport>;
     };
 
-    const inputBoxCls = computed(() => {
+    const tagsWrapperCls = computed(() => {
       return {
-        'devui-tags': true,
-        'devui-form-control': true,
-        'devui-dropdown-origin': true,
-        'devui-dropdown-origin-open': isInputBoxFocus.value,
-        'devui-disabled': props.disabled,
+        [ns.e('tags__wrapper')]: true,
+        'is-disabled': props.disabled,
       };
     });
 
-    const tagInputCls = {
-      input: true,
-      'devui-input': true,
-      'invalid-tag': false,
-    };
-    const tagInputStyle = computed(() => {
-      return [`display:${props.disabled ? 'none' : 'block'};`];
+    const inputCls = computed(() => {
+      return {
+        [ns.e('input')]: true,
+        [ns.e('input_hide')]: props.disabled,
+      };
     });
 
     return () => (<div class={ns.b()} ref={origin}>
-      <div class={inputBoxCls.value}>
+      <div class={tagsWrapperCls.value}>
         {chosenTags()}
         <input
           type="text"
           ref="tagInputRef"
           value={tagInputVal.value}
-          class={tagInputCls}
-          style={tagInputStyle.value}
+          class={inputCls.value}
           onKeydown={onInputKeydown}
           onFocus={onInputFocus}
           onInput={($event: InputEvent) => onInput($event)}

From 5b99d08257290c2510c8818aeb575961fcecc1a3 Mon Sep 17 00:00:00 2001
From: zcj <18137693952@163.com>
Date: Sun, 30 Oct 2022 16:30:33 +0800
Subject: [PATCH 2/6] =?UTF-8?q?fix(tag-input):=20=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E7=BB=84=E7=BB=87=E6=B5=8B=E8=AF=95=E7=94=A8=E4=BE=8B=E9=94=99?=
 =?UTF-8?q?=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      | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 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 2b00f7d98f..ee707e2d7e 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
@@ -134,7 +134,7 @@ describe('DTagInput', () => {
     wrapper.unmount();
   });
 
-  it('tag-input removeTag work', async () => {
+  it('tag-input removeTag work', () => {
     const state = reactive({
       tags: [
         { cname: 'a' },
@@ -145,13 +145,17 @@ describe('DTagInput', () => {
       ],
     });
     const wrapper = customMount(state);
-    const removeSvg = wrapper.find('.remove-button');
-    await removeSvg.trigger('click');
-    expect(wrapper.findAll(ns.e('tags__item')).length).toBe(1);
-    expect(state.tags.length).toBe(1);
-    expect(state.suggestionList.length).toBe(2);
 
-    wrapper.unmount();
+    // todo 使用await报错 The provided value is not of type 'Element'
+    wrapper.find('.remove-button').trigger('click');
+
+    nextTick(() => {
+      expect(wrapper.findAll(ns.e('tags__item')).length).toBe(1);
+      expect(state.tags.length).toBe(1);
+      expect(state.suggestionList.length).toBe(2);
+
+      wrapper.unmount();
+    });
   });
 
   it('tag-input keydown work', async () => {

From beee511d8daefaaedcddd8605a71fe99a9fdf730 Mon Sep 17 00:00:00 2001
From: zcj <18137693952@163.com>
Date: Sun, 30 Oct 2022 16:38:49 +0800
Subject: [PATCH 3/6] =?UTF-8?q?feat(tag-input):=20=E6=B5=8B=E8=AF=95?=
 =?UTF-8?q?=E7=94=A8=E4=BE=8B=E4=B8=AD=E7=9A=84=20class=20=E5=86=99?=
 =?UTF-8?q?=E6=88=90=E5=8F=98=E9=87=8F=E6=96=B9=E4=BE=BF=E7=BB=B4=E6=8A=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../tag-input/__tests__/tag-input.spec.ts     | 32 +++++++++++--------
 1 file changed, 18 insertions(+), 14 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 ee707e2d7e..1c77d70e1a 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
@@ -14,6 +14,10 @@ jest.mock('../../locale/create', () => ({
 }));
 
 const ns = useNamespace('tag-input', true);
+const suggestionListCls = ns.e('suggestion-list');
+const suggestionListItemCls = ns.e('suggestion-list__item');
+const tagsItemCls = ns.e('tags__item');
+const inputCls = ns.e('input');
 
 const customMount = (state: StateType) => mount({
   components: { DTagInput },
@@ -48,9 +52,9 @@ describe('DTagInput', () => {
     const wrapper = customMount(state);
     expect(wrapper.find(ns.b()).exists()).toBe(true);
     expect(wrapper.find(ns.e('tags')).exists()).toBe(true);
-    expect(wrapper.find(ns.e('input')).exists()).toBe(true);
+    expect(wrapper.find(inputCls).exists()).toBe(true);
 
-    const itemA = wrapper.find(ns.e('tags__item'));
+    const itemA = wrapper.find(tagsItemCls);
     expect(itemA.exists()).toBe(true);
     expect(itemA.text()).toBe('Y.Chen');
 
@@ -71,13 +75,13 @@ describe('DTagInput', () => {
       ],
     });
     const wrapper = customMount(state);
-    const input = wrapper.find(ns.e('input'));
+    const input = wrapper.find(inputCls);
 
-    expect(wrapper.find(ns.e('suggestion-list')).exists()).toBe(false);
+    expect(wrapper.find(suggestionListCls).exists()).toBe(false);
     await input.trigger('focus');
 
     // 是否存在 devui-suggestion-list
-    const suggestionList = !!document.querySelectorAll(ns.e('suggestion-list'))[0];
+    const suggestionList = !!document.querySelectorAll(suggestionListCls)[0];
     expect(suggestionList).toBe(true);
 
     wrapper.unmount();
@@ -99,7 +103,7 @@ describe('DTagInput', () => {
     });
 
     expect(wrapper.find('.is-disabled').exists()).toBe(false);
-    expect(wrapper.find(ns.e('input')).isVisible()).toBe(true);
+    expect(wrapper.find(inputCls).isVisible()).toBe(true);
 
     await wrapper.setProps({
       disabled: true,
@@ -150,7 +154,7 @@ describe('DTagInput', () => {
     wrapper.find('.remove-button').trigger('click');
 
     nextTick(() => {
-      expect(wrapper.findAll(ns.e('tags__item')).length).toBe(1);
+      expect(wrapper.findAll(tagsItemCls).length).toBe(1);
       expect(state.tags.length).toBe(1);
       expect(state.suggestionList.length).toBe(2);
 
@@ -201,17 +205,17 @@ describe('DTagInput', () => {
     const input = wrapper.find('input');
 
     await input.trigger('focus');
-    let suggestionList = document.querySelectorAll(ns.e('suggestion-list__item'));
+    let suggestionList = document.querySelectorAll(suggestionListItemCls);
     expect(suggestionList.length).toBe(3);
 
     await input.setValue('xy');
     await input.trigger('input');
-    suggestionList = document.querySelectorAll(ns.e('suggestion-list__item'));
+    suggestionList = document.querySelectorAll(suggestionListItemCls);
     expect(suggestionList.length).toBe(2);
 
     await input.setValue('xxx');
     await input.trigger('input');
-    suggestionList = document.querySelectorAll(ns.e('suggestion-list__item'));
+    suggestionList = document.querySelectorAll(suggestionListItemCls);
     expect(suggestionList.length).toBe(1);
 
     wrapper.unmount();
@@ -231,7 +235,7 @@ describe('DTagInput', () => {
     });
     const wrapper = customMount(state);
     await wrapper.find('input').trigger('focus');
-    const suggestionList = document.querySelectorAll(ns.e('suggestion-list__item'));
+    const suggestionList = document.querySelectorAll(suggestionListItemCls);
     const yyy = suggestionList[1];
     yyy.dispatchEvent(new Event('click'));
 
@@ -257,18 +261,18 @@ describe('DTagInput', () => {
     const wrapper = customMount(state);
     const input = wrapper.find('input');
     await input.trigger('focus');
-    let suggestionList = document.querySelectorAll(ns.e('suggestion-list__item'));
+    let suggestionList = document.querySelectorAll(suggestionListItemCls);
     // 获取焦点默认第一个选中
     expect(suggestionList[0].className).toContain('selected');
 
     // 按下 下箭头，选中第二个数组第一个
     await input.trigger('keydown', { key: 'ArrowDown' });
-    suggestionList = document.querySelectorAll(ns.e('suggestion-list__item'));
+    suggestionList = document.querySelectorAll(suggestionListItemCls);
     expect(suggestionList[1].className).toContain('selected');
 
     await input.trigger('keydown', { key: 'ArrowUp' });
     await input.trigger('keydown', { key: 'ArrowUp' });
-    suggestionList = document.querySelectorAll(ns.e('suggestion-list__item'));
+    suggestionList = document.querySelectorAll(suggestionListItemCls);
     expect(suggestionList[2].className).toContain('selected');
 
     // 按下Enter选中数据

From 291f845fd4431768187f8160ee1990bf9782f600 Mon Sep 17 00:00:00 2001
From: zcj <18137693952@163.com>
Date: Sun, 30 Oct 2022 16:58:58 +0800
Subject: [PATCH 4/6] =?UTF-8?q?fix(tag-input):=20=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6ts=E7=B1=BB=E5=9E=8B=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../devui/tag-input/src/tag-input.tsx         | 24 +++++++++++--------
 1 file changed, 14 insertions(+), 10 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 a39c252042..d400355f97 100644
--- a/packages/devui-vue/devui/tag-input/src/tag-input.tsx
+++ b/packages/devui-vue/devui/tag-input/src/tag-input.tsx
@@ -48,7 +48,7 @@ export default defineComponent({
     };
 
     const tagInputVal = ref('');
-    const onInput = ($event: InputEvent) => {
+    const onInput = ($event: Event) => {
       const v = ($event.target as HTMLInputElement).value || '';
       tagInputVal.value = v.trim();
     };
@@ -64,12 +64,16 @@ export default defineComponent({
         return suggestions;
       }
 
-      // 大小写敏感
-      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);
-      }
+      return suggestions.filter((item: Suggestion) => {
+        const val = item[props.displayProperty] as string;
+
+        // 大小写敏感
+        if (props.caseSensitivity) {
+          return val.indexOf(tagInputVal.value) !== -1;
+        } else {
+          return val.toLowerCase().indexOf(tagInputVal.value.toLowerCase()) !== -1;
+        }
+      });
     });
 
     const selectIndex = ref(0);
@@ -92,7 +96,7 @@ export default defineComponent({
     };
 
     const handleEnter = () => {
-      let res = { [props.displayProperty]: tagInputVal.value };
+      let res: Suggestion = { [props.displayProperty]: tagInputVal.value };
       if (tagInputVal.value === '' && mergedSuggestions.value.length === 0) {
         return false;
       }
@@ -253,9 +257,9 @@ export default defineComponent({
           class={inputCls.value}
           onKeydown={onInputKeydown}
           onFocus={onInputFocus}
-          onInput={($event: InputEvent) => onInput($event)}
+          onInput={onInput}
           placeholder={isTagsLimit.value ? `${props.maxTagsText || t('maxTagsText')} ${props.maxTags}` : props.placeholder}
-          spellCheck={props.spellcheck}
+          spellcheck={props.spellcheck}
           disabled={isTagsLimit.value}
         />
       </div>

From e4445f413d7abcf5a3d8824d749031571d130d74 Mon Sep 17 00:00:00 2001
From: zcj <18137693952@163.com>
Date: Sun, 30 Oct 2022 17:06:01 +0800
Subject: [PATCH 5/6] =?UTF-8?q?fix(tag-input):=20=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E6=9C=AA=E4=BC=A0=E5=85=A5=20props=20noData=20=E5=AF=BC?=
 =?UTF-8?q?=E8=87=B4=E7=9A=84=E6=A0=B7=E5=BC=8F=E5=BC=82=E5=B8=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/devui-vue/devui/tag-input/src/tag-input-types.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 41ee6c497b..27987c255c 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
@@ -57,7 +57,7 @@ export const tagInputProps = {
   },
   noData: {
     type: String,
-    default: '',
+    default: '暂无数据',
   },
   caseSensitivity: {
     type: Boolean,

From 59fce03044752de112cab7857b91c645c8afa08a Mon Sep 17 00:00:00 2001
From: zcj <18137693952@163.com>
Date: Sun, 30 Oct 2022 17:10:23 +0800
Subject: [PATCH 6/6] =?UTF-8?q?fix(tag-input):=20=E4=BF=AE=E6=AD=A3?=
 =?UTF-8?q?=E6=96=87=E6=A1=A3=20props=20placeholder=E3=80=81noData=20?=
 =?UTF-8?q?=E7=9A=84=E6=95=B0=E6=8D=AE=E7=B1=BB=E5=9E=8B=20=E7=A7=BB?=
 =?UTF-8?q?=E9=99=A4showAnimation=20=E5=B1=9E=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../docs/components/tag-input/index.md        | 39 +++++++++++--------
 1 file changed, 22 insertions(+), 17 deletions(-)

diff --git a/packages/devui-vue/docs/components/tag-input/index.md b/packages/devui-vue/docs/components/tag-input/index.md
index 3a95c76e32..0fe5183925 100644
--- a/packages/devui-vue/docs/components/tag-input/index.md
+++ b/packages/devui-vue/docs/components/tag-input/index.md
@@ -118,8 +118,14 @@ import { defineComponent, reactive } from 'vue'
 export default defineComponent({
   setup() {
     const state = reactive({
-      tags: [{ name: "123" }],
-      suggestionList: [{ name: "item1" }]
+      tags: [{ name: "item1" }],
+      suggestionList: [
+        { name: "item2" },
+        { name: "item3" },
+        { name: "item4" },
+        { name: "item5" },
+        { name: "item6" }
+      ]
     })
 
     return {
@@ -134,21 +140,20 @@ export default defineComponent({
 
 ### TagInput 参数
 
-|       参数        |   类型    |          默认           |                 说明                 | 跳转 Demo             | 全局配置项 |
-|:---------------:| :-------: | :---------------------: | :----------------------------------: | :-------------------- | ---------- |
-|     v-model     |  `Array`  |           []            | 必选，记录输入的标签和选择的标签列表 | [基本用法](#基本用法) |
-| suggestionList  |  `Array`  |           []            | 可选，下拉选项，默认可选择的标签列表 | [基本用法](#基本用法) |
-| displayProperty | `string`  |         'name'          |       可选，列表项使用的属性名       | [基本用法](#基本用法) |
-|   placeholder   | `boolean` |           ''            |      可选，输入框的 placeholder      | [基本用法](#基本用法) |
-|     noData      | `boolean` |           ''            |           可选，无数据提示           | [基本用法](#基本用法) |
-|     maxTags     | `number`  | Number.MAX_SAFE_INTEGER |      可选，可输入标签的最大个数      | [标签最小长度&最大标签数](#标签最小长度-最大标签数) |
-|    minLength    | `number`  | `3` |      可选，可输入标签的最大个数      | [标签最小长度&最大标签数](#标签最小长度-最大标签数) |
-|    maxLength    | `number`  | Number.MAX_SAFE_INTEGER |      可选，可输入标签的最大个数      | [标签最小长度&最大标签数](#标签最小长度-最大标签数) |
-| caseSensitivity | `boolean` |          false          |   可选，大小写敏感，默认忽略大小写   |                       |            |
-|   spellcheck    | `boolean` |          true           | 可选，input 输入框是否开启拼写检查的 |                       |            |
-|  isAddBySpace   | `boolean` |          true           |     可选，是否支持空格键输入标签     |                       |            |
-|    disabled     | `boolean` |          false          |       可选，disabled 灰化状态        |    [disabled](#disabled)                   |
-|  showAnimation  | `boolean` |          true           |          可选，是否开启动画          |                       | ✔          |
+|       参数        |       类型       |           默认            |                 说明                 | 跳转 Demo             | 全局配置项 |
+|:---------------:|:--------------:|:-----------------------:| :----------------------------------: | :-------------------- | ---------- |
+|     v-model     |    `Array`     |           []            | 必选，记录输入的标签和选择的标签列表 | [基本用法](#基本用法) |
+| suggestionList  |    `Array`     |           []            | 可选，下拉选项，默认可选择的标签列表 | [基本用法](#基本用法) |
+| displayProperty |    `string`    |         'name'          |       可选，列表项使用的属性名       | [基本用法](#基本用法) |
+|   placeholder   |    `string`    |           ''            |      可选，输入框的 placeholder      | [基本用法](#基本用法) |
+|     noData      |    `string`    |         '暂无数据'          |           可选，无数据提示           | [基本用法](#基本用法) |
+|     maxTags     |    `number`    | Number.MAX_SAFE_INTEGER |      可选，可输入标签的最大个数      | [标签最小长度&最大标签数](#标签最小长度-最大标签数) |
+|    minLength    |    `number`    |           `3`           |      可选，可输入标签的最大个数      | [标签最小长度&最大标签数](#标签最小长度-最大标签数) |
+|    maxLength    |    `number`    | Number.MAX_SAFE_INTEGER |      可选，可输入标签的最大个数      | [标签最小长度&最大标签数](#标签最小长度-最大标签数) |
+| caseSensitivity |   `boolean`    |          false          |   可选，大小写敏感，默认忽略大小写   |                       |            |
+|   spellcheck    |   `boolean`    |          true           | 可选，input 输入框是否开启拼写检查的 |                       |            |
+|  isAddBySpace   |   `boolean`    |          true           |     可选，是否支持空格键输入标签     |                       |            |
+|    disabled     |   `boolean`    |          false          |       可选，disabled 灰化状态        |    [disabled](#disabled)                   |
 
 ### TagInput 事件