bkui-vue 2.0.1-beta.1 → 2.0.1-beta.100

package/lib/tag-input/index.d.ts

@@ -61,6 +61,11 @@ declare const TagInput: {
         } & {
             default: boolean;
         };
+        clearTextSpace: import("vue-types").VueTypeValidableDef<boolean> & {
+            default: boolean;
+        } & {
+            default: boolean;
+        };
         maxData: import("vue-types").VueTypeValidableDef<number> & {
             default: number;
         } & {
@@ -155,6 +160,11 @@ declare const TagInput: {
                 } & {
                     default: boolean;
                 };
+                clickContentAutoHide: import("vue-types").VueTypeValidableDef<boolean> & {
+                    default: boolean;
+                } & {
+                    default: boolean;
+                };
                 width: import("vue-types").VueTypeDef<string | number> & {
                     default: string | number;
                 };
@@ -170,14 +180,17 @@ declare const TagInput: {
                 content: import("vue-types").VueTypeDef<string | number | HTMLElement | JSX.Element> & {
                     default: string | number | (() => HTMLElement) | (() => JSX.Element);
                 };
+                renderDirective: import("vue-types").VueTypeValidableDef<"if" | "show"> & {
+                    default: "if" | "show";
+                };
                 target: import("vue-types").VueTypeDef<string | HTMLElement | PointerEvent>;
                 allowHtml: import("vue-types").VueTypeValidableDef<boolean> & {
                     default: boolean;
                 } & {
                     default: boolean;
                 };
-                placement: import("vue-types").VueTypeValidableDef<"auto" | "auto-start" | "auto-end" | "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end"> & {
-                    default: "auto" | "auto-start" | "auto-end" | "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end";
+                placement: import("vue-types").VueTypeValidableDef<"auto" | "auto-end" | "auto-start" | "bottom" | "bottom-end" | "bottom-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start"> & {
+                    default: "auto" | "auto-end" | "auto-start" | "bottom" | "bottom-end" | "bottom-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start";
                 };
                 theme: import("vue-types").VueTypeValidableDef<string> & {
                     default: string;
@@ -297,6 +310,7 @@ declare const TagInput: {
         bkTagSelectorRef: import("vue").Ref<any>;
         tagListRef: import("vue").Ref<any>;
         tagInputItemRef: import("vue").Ref<any>;
+        inputValueRef: import("vue").Ref<HTMLElement>;
         selectorListRef: import("vue").Ref<any>;
         triggerClass: import("vue").ComputedRef<{
             [x: string]: boolean;
@@ -318,7 +332,7 @@ declare const TagInput: {
         handleClear: (e: MouseEvent) => void;
         tagFocus: (e: MouseEvent) => void;
         handleKeydown: (e: KeyboardEvent) => void;
-        handlePaste: (e: ClipboardEvent) => boolean;
+        handlePaste: (e: ClipboardEvent) => void;
         resolveClassName: (cls: string) => string;
         curPage: import("vue").Ref<number>;
         totalSize: import("vue").Ref<number>;
@@ -404,6 +418,11 @@ declare const TagInput: {
         } & {
             default: boolean;
         };
+        clearTextSpace: import("vue-types").VueTypeValidableDef<boolean> & {
+            default: boolean;
+        } & {
+            default: boolean;
+        };
         maxData: import("vue-types").VueTypeValidableDef<number> & {
             default: number;
         } & {
@@ -498,6 +517,11 @@ declare const TagInput: {
                 } & {
                     default: boolean;
                 };
+                clickContentAutoHide: import("vue-types").VueTypeValidableDef<boolean> & {
+                    default: boolean;
+                } & {
+                    default: boolean;
+                };
                 width: import("vue-types").VueTypeDef<string | number> & {
                     default: string | number;
                 };
@@ -513,14 +537,17 @@ declare const TagInput: {
                 content: import("vue-types").VueTypeDef<string | number | HTMLElement | JSX.Element> & {
                     default: string | number | (() => HTMLElement) | (() => JSX.Element);
                 };
+                renderDirective: import("vue-types").VueTypeValidableDef<"if" | "show"> & {
+                    default: "if" | "show";
+                };
                 target: import("vue-types").VueTypeDef<string | HTMLElement | PointerEvent>;
                 allowHtml: import("vue-types").VueTypeValidableDef<boolean> & {
                     default: boolean;
                 } & {
                     default: boolean;
                 };
-                placement: import("vue-types").VueTypeValidableDef<"auto" | "auto-start" | "auto-end" | "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end"> & {
-                    default: "auto" | "auto-start" | "auto-end" | "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end";
+                placement: import("vue-types").VueTypeValidableDef<"auto" | "auto-end" | "auto-start" | "bottom" | "bottom-end" | "bottom-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start"> & {
+                    default: "auto" | "auto-end" | "auto-start" | "bottom" | "bottom-end" | "bottom-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start";
                 };
                 theme: import("vue-types").VueTypeValidableDef<string> & {
                     default: string;
@@ -649,6 +676,7 @@ declare const TagInput: {
         displayKey: string;
         hasDeleteIcon: boolean;
         useGroup: boolean;
+        clearTextSpace: boolean;
         maxData: number;
         maxResult: number;
         contentMaxHeight: number;
@@ -728,6 +756,11 @@ declare const TagInput: {
         } & {
             default: boolean;
         };
+        clearTextSpace: import("vue-types").VueTypeValidableDef<boolean> & {
+            default: boolean;
+        } & {
+            default: boolean;
+        };
         maxData: import("vue-types").VueTypeValidableDef<number> & {
             default: number;
         } & {
@@ -822,6 +855,11 @@ declare const TagInput: {
                 } & {
                     default: boolean;
                 };
+                clickContentAutoHide: import("vue-types").VueTypeValidableDef<boolean> & {
+                    default: boolean;
+                } & {
+                    default: boolean;
+                };
                 width: import("vue-types").VueTypeDef<string | number> & {
                     default: string | number;
                 };
@@ -837,14 +875,17 @@ declare const TagInput: {
                 content: import("vue-types").VueTypeDef<string | number | HTMLElement | JSX.Element> & {
                     default: string | number | (() => HTMLElement) | (() => JSX.Element);
                 };
+                renderDirective: import("vue-types").VueTypeValidableDef<"if" | "show"> & {
+                    default: "if" | "show";
+                };
                 target: import("vue-types").VueTypeDef<string | HTMLElement | PointerEvent>;
                 allowHtml: import("vue-types").VueTypeValidableDef<boolean> & {
                     default: boolean;
                 } & {
                     default: boolean;
                 };
-                placement: import("vue-types").VueTypeValidableDef<"auto" | "auto-start" | "auto-end" | "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end"> & {
-                    default: "auto" | "auto-start" | "auto-end" | "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end";
+                placement: import("vue-types").VueTypeValidableDef<"auto" | "auto-end" | "auto-start" | "bottom" | "bottom-end" | "bottom-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start"> & {
+                    default: "auto" | "auto-end" | "auto-start" | "bottom" | "bottom-end" | "bottom-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start";
                 };
                 theme: import("vue-types").VueTypeValidableDef<string> & {
                     default: string;
@@ -964,6 +1005,7 @@ declare const TagInput: {
         bkTagSelectorRef: import("vue").Ref<any>;
         tagListRef: import("vue").Ref<any>;
         tagInputItemRef: import("vue").Ref<any>;
+        inputValueRef: import("vue").Ref<HTMLElement>;
         selectorListRef: import("vue").Ref<any>;
         triggerClass: import("vue").ComputedRef<{
             [x: string]: boolean;
@@ -985,7 +1027,7 @@ declare const TagInput: {
         handleClear: (e: MouseEvent) => void;
         tagFocus: (e: MouseEvent) => void;
         handleKeydown: (e: KeyboardEvent) => void;
-        handlePaste: (e: ClipboardEvent) => boolean;
+        handlePaste: (e: ClipboardEvent) => void;
         resolveClassName: (cls: string) => string;
         curPage: import("vue").Ref<number>;
         totalSize: import("vue").Ref<number>;
@@ -1029,6 +1071,7 @@ declare const TagInput: {
         displayKey: string;
         hasDeleteIcon: boolean;
         useGroup: boolean;
+        clearTextSpace: boolean;
         maxData: number;
         maxResult: number;
         contentMaxHeight: number;
@@ -1105,6 +1148,11 @@ declare const TagInput: {
     } & {
         default: boolean;
     };
+    clearTextSpace: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
     maxData: import("vue-types").VueTypeValidableDef<number> & {
         default: number;
     } & {
@@ -1199,6 +1247,11 @@ declare const TagInput: {
             } & {
                 default: boolean;
             };
+            clickContentAutoHide: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            } & {
+                default: boolean;
+            };
             width: import("vue-types").VueTypeDef<string | number> & {
                 default: string | number;
             };
@@ -1214,14 +1267,17 @@ declare const TagInput: {
             content: import("vue-types").VueTypeDef<string | number | HTMLElement | JSX.Element> & {
                 default: string | number | (() => HTMLElement) | (() => JSX.Element);
             };
+            renderDirective: import("vue-types").VueTypeValidableDef<"if" | "show"> & {
+                default: "if" | "show";
+            };
             target: import("vue-types").VueTypeDef<string | HTMLElement | PointerEvent>;
             allowHtml: import("vue-types").VueTypeValidableDef<boolean> & {
                 default: boolean;
             } & {
                 default: boolean;
             };
-            placement: import("vue-types").VueTypeValidableDef<"auto" | "auto-start" | "auto-end" | "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end"> & {
-                default: "auto" | "auto-start" | "auto-end" | "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end";
+            placement: import("vue-types").VueTypeValidableDef<"auto" | "auto-end" | "auto-start" | "bottom" | "bottom-end" | "bottom-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start"> & {
+                default: "auto" | "auto-end" | "auto-start" | "bottom" | "bottom-end" | "bottom-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start";
             };
             theme: import("vue-types").VueTypeValidableDef<string> & {
                 default: string;
@@ -1341,6 +1397,7 @@ declare const TagInput: {
     bkTagSelectorRef: import("vue").Ref<any>;
     tagListRef: import("vue").Ref<any>;
     tagInputItemRef: import("vue").Ref<any>;
+    inputValueRef: import("vue").Ref<HTMLElement>;
     selectorListRef: import("vue").Ref<any>;
     triggerClass: import("vue").ComputedRef<{
         [x: string]: boolean;
@@ -1362,7 +1419,7 @@ declare const TagInput: {
     handleClear: (e: MouseEvent) => void;
     tagFocus: (e: MouseEvent) => void;
     handleKeydown: (e: KeyboardEvent) => void;
-    handlePaste: (e: ClipboardEvent) => boolean;
+    handlePaste: (e: ClipboardEvent) => void;
     resolveClassName: (cls: string) => string;
     curPage: import("vue").Ref<number>;
     totalSize: import("vue").Ref<number>;
@@ -1406,6 +1463,7 @@ declare const TagInput: {
     displayKey: string;
     hasDeleteIcon: boolean;
     useGroup: boolean;
+    clearTextSpace: boolean;
     maxData: number;
     maxResult: number;
     contentMaxHeight: number;

package/lib/tag-input/index.js

@@ -2,7 +2,6 @@ import "../styles/reset.css";
 import "./tag-input.less";
 import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__ from "../shared";
 import * as __WEBPACK_EXTERNAL_MODULE_vue__ from "vue";
-import * as __WEBPACK_EXTERNAL_MODULE_lodash_debounce_3540babe__ from "lodash/debounce";
 import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_config_provider_fe8577a3__ from "../config-provider";
 import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_directives_45d4776f__ from "../directives";
 import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__ from "../icon";
@@ -10,6 +9,8 @@ import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_loading_dcf0e69a__ from "../l
 import "../loading/loading.less";
 import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_popover_9b03f19d__ from "../popover";
 import "../popover/popover.less";
+import * as __WEBPACK_EXTERNAL_MODULE_lodash_debounce_3540babe__ from "lodash/debounce";
+import * as __WEBPACK_EXTERNAL_MODULE_lodash_trim_5cdad98c__ from "lodash/trim";
 import * as __WEBPACK_EXTERNAL_MODULE_vue_types_22de060a__ from "vue-types";
 /******/ var __webpack_modules__ = ({
 
@@ -17446,10 +17447,6 @@ function _defineProperty(obj, key, value) {
 var external_vue_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var external_vue_y = x => () => x
 const external_vue_namespaceObject = external_vue_x({ ["computed"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.computed, ["createTextVNode"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.createTextVNode, ["createVNode"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.createVNode, ["defineComponent"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.defineComponent, ["h"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.h, ["markRaw"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.markRaw, ["mergeProps"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.mergeProps, ["nextTick"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.nextTick, ["onMounted"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.onMounted, ["reactive"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.reactive, ["ref"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.ref, ["resolveDirective"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.resolveDirective, ["toRefs"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.toRefs, ["vModelText"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.vModelText, ["vShow"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.vShow, ["watch"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.watch, ["withDirectives"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.withDirectives });
-;// CONCATENATED MODULE: external "lodash/debounce"
-var debounce_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
-var debounce_y = x => () => x
-const debounce_namespaceObject = debounce_x({ ["default"]: () => __WEBPACK_EXTERNAL_MODULE_lodash_debounce_3540babe__["default"] });
 ;// CONCATENATED MODULE: external "../config-provider"
 var config_provider_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var config_provider_y = x => () => x
@@ -17478,6 +17475,14 @@ const popover_namespaceObject = popover_x({ ["default"]: () => __WEBPACK_EXTERNA
 var popover_less_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var popover_less_y = x => () => x
 const popover_less_namespaceObject = popover_less_x({  });
+;// CONCATENATED MODULE: external "lodash/debounce"
+var debounce_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var debounce_y = x => () => x
+const debounce_namespaceObject = debounce_x({ ["default"]: () => __WEBPACK_EXTERNAL_MODULE_lodash_debounce_3540babe__["default"] });
+;// CONCATENATED MODULE: external "lodash/trim"
+var trim_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var trim_y = x => () => x
+const trim_namespaceObject = trim_x({ ["default"]: () => __WEBPACK_EXTERNAL_MODULE_lodash_trim_5cdad98c__["default"] });
 ;// CONCATENATED MODULE: ../../packages/tag-input/src/common.ts
 
 
@@ -17509,7 +17514,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * IN THE SOFTWARE.
  */
 
-var INPUT_MIN_WIDTH = 12;
+var INPUT_MIN_WIDTH = 10;
 function useDebouncedRef(value) {
   var delay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 200;
   var timeout;
@@ -17776,6 +17781,7 @@ var tagProps = function tagProps() {
     searchKey: shared_namespaceObject.PropTypes.oneOfType([shared_namespaceObject.PropTypes.string, shared_namespaceObject.PropTypes.arrayOf(shared_namespaceObject.PropTypes.string)]).def('name'),
     useGroup: shared_namespaceObject.PropTypes.bool.def(false),
     allowCreate: shared_namespaceObject.PropTypes.bool.def(false),
+    clearTextSpace: shared_namespaceObject.PropTypes.bool.def(true),
     maxData: shared_namespaceObject.PropTypes.number.def(-1),
     maxResult: shared_namespaceObject.PropTypes.number.def(10),
     contentMaxHeight: shared_namespaceObject.PropTypes.number.def(300),
@@ -17909,8 +17915,8 @@ function tag_render_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
       return this.tpl(this.node, external_vue_namespaceObject.h, this);
     }
     return (0,external_vue_namespaceObject.withDirectives)((0,external_vue_namespaceObject.createVNode)("div", {
-      "class": "tag",
-      "ref": "tagRef"
+      "ref": "tagRef",
+      "class": "tag"
     }, [(0,external_vue_namespaceObject.createVNode)("span", {
       "class": "text"
     }, [this.node[this.displayKey]])]), [[(0,external_vue_namespaceObject.resolveDirective)("bk-tooltips"), this.overflowTips]]);
@@ -17964,6 +17970,7 @@ function tag_input_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
 
 
 
+
 /* harmony default export */ const tag_input = ((0,external_vue_namespaceObject.defineComponent)({
   name: 'TagInput',
   directives: {
@@ -18004,6 +18011,7 @@ function tag_input_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
     var tagListRef = (0,external_vue_namespaceObject.ref)(null);
     var tagInputItemRef = (0,external_vue_namespaceObject.ref)(null);
     var selectorListRef = (0,external_vue_namespaceObject.ref)(null);
+    var inputValueRef = (0,external_vue_namespaceObject.ref)();
     var timer = (0,external_vue_namespaceObject.ref)(null);
     // 是否展示tag close
     var showTagClose = (0,external_vue_namespaceObject.computed)(function () {
@@ -18055,15 +18063,18 @@ function tag_input_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
       if (props.useGroup) {
         var groupMap = {};
         pageState.curPageList.forEach(function (item, index) {
+          var _item$group, _item$group2, _groupMap$curGroupId;
+          var curGroupId = (_item$group = item.group) === null || _item$group === void 0 ? void 0 : _item$group.groupId;
+          var curGroupName = (_item$group2 = item.group) === null || _item$group2 === void 0 ? void 0 : _item$group2.groupName;
           item.__index__ = index;
-          if (!groupMap[item.group.groupId]) {
-            groupMap[item.group.groupId] = {
-              id: item.group.groupId,
-              name: item.group.groupName,
+          if (curGroupId && !groupMap[curGroupId]) {
+            groupMap[curGroupId] = {
+              id: curGroupId,
+              name: curGroupName,
               children: []
             };
           }
-          groupMap[item.group.groupId].children.push(item);
+          groupMap === null || groupMap === void 0 || (_groupMap$curGroupId = groupMap[curGroupId]) === null || _groupMap$curGroupId === void 0 || _groupMap$curGroupId.children.push(item);
         });
         return Object.keys(groupMap).map(function (key) {
           return groupMap[key];
@@ -18285,6 +18296,7 @@ function tag_input_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
     };
     var clearInput = function clearInput() {
       curInputValue.value = '';
+      tagInputRef.value.style.width = "".concat(INPUT_MIN_WIDTH, "px");
     };
     /**
      * 获取输入框元素位置
@@ -18295,7 +18307,10 @@ function tag_input_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
         return 0;
       }
       var childNodes = getSelectedTagNodes();
-      var index = childNodes.findIndex(function (_ref4) {
+      // 聚焦的时候会存在空节点，导致backspace需要点击多次才能删除tag
+      var index = childNodes.filter(function (item) {
+        return item.className !== '';
+      }).findIndex(function (_ref4) {
         var id = _ref4.id;
         return id === 'tagInputItem';
       });
@@ -18323,7 +18338,11 @@ function tag_input_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
         var charLen = getCharLength(value);
         if (charLen) {
           filterData(value);
-          tagInputRef.value.style.width = "".concat(charLen * INPUT_MIN_WIDTH, "px");
+          (0,external_vue_namespaceObject.nextTick)(function () {
+            // getBoundingClientRect获取宽度在中文输入法输入的时候会存在为0的情况，导致不显示输入的内容，按回车以后光标在最前面，所以需要提供默认值
+            var tagInputWidth = inputValueRef.value.getBoundingClientRect().width || charLen * INPUT_MIN_WIDTH;
+            tagInputRef.value.style.width = "".concat(tagInputWidth, "px");
+          });
         } else {
           if (trigger === 'focus') {
             filterData();
@@ -18361,8 +18380,6 @@ function tag_input_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
             // 如果是单选，且input不为空，即保留了上次的结果则恢复
             if (inputValue === oldValue && listState.selectedTagListCache.length) {
               addTag(listState.selectedTagListCache[0], 'select');
-            } else {
-              handleChange('remove');
             }
           }
           // 如果匹配，则自动选则
@@ -18480,18 +18497,22 @@ function tag_input_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
       swapElementPositions(tagInputItemRef.value, nodes[index - 1]);
       listState.selectedTagList.splice(index - 1, 1);
       focusInputTrigger();
-      var isExistInit = saveKeyMap.value[target[props.saveKey]];
+      var isExistInit = target && saveKeyMap.value[target[props.saveKey]];
       // 将删除的项加入加列表
       if ((props.allowCreate && isExistInit || !props.allowCreate) && !isSingleSelect.value) {
         listState.localList.push(target);
       }
-      tagInputRef.value = "".concat(INPUT_MIN_WIDTH, "px");
+      tagInputRef.value.style.width = "".concat(INPUT_MIN_WIDTH, "px");
       handleChange('remove');
     };
     var handleKeydown = function handleKeydown(e) {
       if (pageState.isPageLoading) {
         return;
       }
+      // 中文拼音输入事件
+      if (e.isComposing) {
+        return;
+      }
       var target;
       var val = e.target.value;
       var valLen = getCharLength(val);
@@ -18567,22 +18588,15 @@ function tag_input_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
     var defaultPasteFn = function defaultPasteFn(value) {
       var target = [];
       var textArr = value.split(';');
-      var regx = /^[a-zA-Z][a-zA-Z_]*/g;
       textArr.forEach(function (item) {
-        var matchValue = item.match(regx);
-        if (matchValue) {
-          var finalItem = matchValue.join('');
-          target.push(_defineProperty(_defineProperty({}, props.saveKey, finalItem), props.displayKey, finalItem));
+        if ((0,trim_namespaceObject["default"])(item)) {
+          target.push(_defineProperty(_defineProperty({}, props.saveKey, item), props.displayKey, item));
         }
       });
       return target;
     };
     var handlePaste = function handlePaste(e) {
       e.preventDefault();
-      // 单选禁止复制粘贴，防止粘贴多个tag
-      if (isSingleSelect.value) {
-        return false;
-      }
       var maxData = props.maxData,
         saveKey = props.saveKey,
         displayKey = props.displayKey,
@@ -18635,6 +18649,7 @@ function tag_input_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
           focusInputTrigger();
         }
       }
+      clearInput();
     };
     /**
      * 已选中标签点击
@@ -18659,7 +18674,8 @@ function tag_input_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
       var separator = props.separator,
         saveKey = props.saveKey,
         displayKey = props.displayKey,
-        createTagValidator = props.createTagValidator;
+        createTagValidator = props.createTagValidator,
+        clearTextSpace = props.clearTextSpace;
       var targetIndex = getTagInputItemSite();
       var moveCount = 1;
       var isSelected = false;
@@ -18690,7 +18706,9 @@ function tag_input_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
         } else {
           var isObject = _typeof(item) === 'object';
           newValue = isObject ? item[saveKey] : item.trim();
-          newValue = newValue.replace(/\s+/g, '');
+          if (clearTextSpace) {
+            newValue = newValue.replace(/\s+/g, '');
+          }
           if (newValue !== undefined && !tagList.value.includes(newValue) && validateTag(newValue)) {
             var localItem = saveKeyMap.value[newValue] || (isObject ? item : _defineProperty(_defineProperty({}, saveKey, newValue), displayKey, newValue));
             listState.selectedTagList.splice(targetIndex, 0, localItem);
@@ -18769,6 +18787,7 @@ function tag_input_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
       bkTagSelectorRef: bkTagSelectorRef,
       tagListRef: tagListRef,
       tagInputItemRef: tagInputItemRef,
+      inputValueRef: inputValueRef,
       selectorListRef: selectorListRef,
       triggerClass: triggerClass,
       overflowTagIndex: overflowTagIndex,
@@ -18791,8 +18810,8 @@ function tag_input_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
   render: function render() {
     var _this = this;
     return (0,external_vue_namespaceObject.createVNode)("div", {
-      "class": "".concat(this.resolveClassName('tag-input')),
       "ref": "bkTagSelectorRef",
+      "class": "".concat(this.resolveClassName('tag-input')),
       "onClick": this.focusInputTrigger,
       "onMouseenter": function onMouseenter() {
         return _this.isHover = true;
@@ -18801,54 +18820,55 @@ function tag_input_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
         return _this.isHover = false;
       }
     }, [(0,external_vue_namespaceObject.createVNode)(popover_namespaceObject["default"], (0,external_vue_namespaceObject.mergeProps)({
-      "theme": "light ".concat(this.resolveClassName('tag-input-popover-content')),
-      "trigger": "manual",
+      "arrow": false,
       "placement": "bottom-start",
-      "arrow": false
+      "theme": "light ".concat(this.resolveClassName('tag-input-popover-content')),
+      "trigger": "manual"
     }, this.popoverProps), {
       "default": function _default() {
         var _this$$slots$suffix, _this$$slots, _this$$slots$suffix2;
         return (0,external_vue_namespaceObject.createVNode)("div", {
           "class": _this.triggerClass
         }, [(0,external_vue_namespaceObject.createVNode)("ul", {
-          "class": "tag-list",
           "ref": "tagListRef",
           "style": {
             marginLeft: "".concat(_this.leftSpace, "px")
-          }
+          },
+          "class": "tag-list"
         }, [_this.selectedTagList.map(function (item, index) {
           var isOverflow = _this.localCollapseTags && _this.overflowTagIndex && index >= _this.overflowTagIndex;
           return (0,external_vue_namespaceObject.createVNode)("li", {
-            "class": "tag-item",
             "style": {
               display: isOverflow ? 'none' : ''
             },
+            "class": "tag-item",
             "onClick": _this.tagFocus
           }, [(0,external_vue_namespaceObject.createVNode)(tag_render, {
-            "node": item,
-            "tpl": _this.tagTpl,
             "displayKey": _this.displayKey,
+            "node": item,
+            "tagOverflowTips": _this.tagOverflowTips,
             "tooltipKey": _this.tooltipKey || _this.displayKey,
-            "tagOverflowTips": _this.tagOverflowTips
+            "tpl": _this.tagTpl
           }, null), _this.showTagClose && (0,external_vue_namespaceObject.createVNode)(icon_namespaceObject.Error, {
             "class": "remove-tag",
             "onClick": _this.handleTagRemove.bind(_this, item, index)
           }, null)]);
         }), (0,external_vue_namespaceObject.withDirectives)((0,external_vue_namespaceObject.createVNode)("li", {
-          "ref": "tagInputItemRef",
           "id": "tagInputItem",
+          "ref": "tagInputItemRef",
           "class": "tag-input-item",
           "role": "input"
         }, [(0,external_vue_namespaceObject.withDirectives)((0,external_vue_namespaceObject.createVNode)("input", {
-          "type": "text",
-          "class": "tag-input",
           "ref": "tagInputRef",
+          "class": "tag-input",
           "onUpdate:modelValue": function onUpdateModelValue($event) {
             return _this.curInputValue = $event;
           },
-          "onInput": _this.handleInput,
-          "onFocus": _this.handleFocus,
+          "spellcheck": "false",
+          "type": "text",
           "onBlur": _this.handleBlur,
+          "onFocus": _this.handleFocus,
+          "onInput": _this.handleInput,
           "onKeydown": _this.handleKeydown,
           "onPaste": _this.handlePaste
         }, null), [[external_vue_namespaceObject.vModelText, _this.curInputValue]])]), [[external_vue_namespaceObject.vShow, _this.isEdit]]), !!_this.overflowTagIndex && _this.localCollapseTags && (0,external_vue_namespaceObject.withDirectives)((0,external_vue_namespaceObject.createVNode)("li", {
@@ -18857,7 +18877,11 @@ function tag_input_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
           "class": "tag"
         }, [(0,external_vue_namespaceObject.createVNode)("span", {
           "class": "text"
-        }, [(0,external_vue_namespaceObject.createTextVNode)("+"), _this.selectedTagList.length - _this.overflowTagIndex])])]), [[(0,external_vue_namespaceObject.resolveDirective)("bk-tooltips"), _this.collapseTooltip.join(', ')]])]), (0,external_vue_namespaceObject.withDirectives)((0,external_vue_namespaceObject.createVNode)("p", {
+        }, [(0,external_vue_namespaceObject.createTextVNode)("+"), _this.selectedTagList.length - _this.overflowTagIndex])])]), [[(0,external_vue_namespaceObject.resolveDirective)("bk-tooltips"), _this.collapseTooltip.join(', ')]]), (0,external_vue_namespaceObject.createVNode)("div", {
+          "key": "inputValuePlaceholder",
+          "ref": "inputValueRef",
+          "style": "position: absolute; white-space: nowrap; border-box; visibility: hidden; z-index: 1"
+        }, [_this.curInputValue])]), (0,external_vue_namespaceObject.withDirectives)((0,external_vue_namespaceObject.createVNode)("p", {
           "class": "placeholder"
         }, [_this.placeholderText]), [[external_vue_namespaceObject.vShow, _this.isShowPlaceholder]]), (_this$$slots$suffix = (_this$$slots = _this.$slots) === null || _this$$slots === void 0 || (_this$$slots$suffix2 = _this$$slots.suffix) === null || _this$$slots$suffix2 === void 0 ? void 0 : _this$$slots$suffix2.call(_this$$slots)) !== null && _this$$slots$suffix !== void 0 ? _this$$slots$suffix : _this.isShowClear && (0,external_vue_namespaceObject.createVNode)(icon_namespaceObject.Close, {
           "class": "clear-icon",
@@ -18887,12 +18911,12 @@ function tag_input_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
               }, _this.activeClass(item, index)],
               "onClick": _this.handleTagSelected.bind(_this, item, 'select')
             }, [(0,external_vue_namespaceObject.createVNode)(list_tag_render, {
-              "node": item,
+              "disabled": item.disabled,
               "displayKey": _this.displayKey,
-              "tpl": _this.tpl,
+              "node": item,
               "searchKey": _this.searchKey,
               "searchKeyword": _this.curInputValue,
-              "disabled": item.disabled
+              "tpl": _this.tpl
             }, null)]);
           })])]) : (0,external_vue_namespaceObject.createVNode)("li", {
             "class": ["".concat(_this.resolveClassName('selector-list-item')), {
@@ -18900,18 +18924,18 @@ function tag_input_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
             }, _this.activeClass(group, index)],
             "onClick": _this.handleTagSelected.bind(_this, group, 'select')
           }, [(0,external_vue_namespaceObject.createVNode)(list_tag_render, {
-            "node": group,
+            "disabled": group.disabled,
             "displayKey": _this.displayKey,
-            "tpl": _this.tpl,
+            "node": group,
             "searchKey": _this.searchKey,
             "searchKeyword": _this.curInputValue,
-            "disabled": group.disabled
+            "tpl": _this.tpl
           }, null)]);
         }), _this.isPageLoading ? (0,external_vue_namespaceObject.createVNode)("li", {
           "class": "".concat(_this.resolveClassName('selector-list-item'), " loading")
         }, [(0,external_vue_namespaceObject.createVNode)(loading_namespaceObject["default"], {
-          "theme": "primary",
-          "size": loading_namespaceObject.BkLoadingSize.Small
+          "size": loading_namespaceObject.BkLoadingSize.Small,
+          "theme": "primary"
         }, null)]) : null])]);
       }
     })]);