bkui-vue 2.0.1-beta.72 → 2.0.1-beta.73

package/lib/cascader/index.js

@@ -674,7 +674,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 common_useDebouncedRef(value) {
   var delay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 200;
   var timeout;

package/lib/index.js

@@ -4,5 +4,5 @@ export { default } from './preset';
 export * from './config-provider';
 export * from './directives';
 export * as plugins from './plugins';
-export const version = "2.0.1-beta.72";
+export const version = "2.0.1-beta.73";
 window.__bkui_vue_version__ = version;

package/lib/modal/index.d.ts

@@ -32,8 +32,8 @@ declare const BkModal: {
         } & {
             default: boolean;
         };
-        transfer: import("vue-types").VueTypeDef<string | boolean | HTMLElement> & {
-            default: string | boolean | (() => HTMLElement);
+        transfer: import("vue-types").VueTypeDef<string | boolean> & {
+            default: string | boolean;
         };
         zIndex: import("vue-types").VueTypeDef<string | number>;
         animateType: import("vue-types").VueTypeValidableDef<string> & {
@@ -98,8 +98,8 @@ declare const BkModal: {
         } & {
             default: boolean;
         };
-        transfer: import("vue-types").VueTypeDef<string | boolean | HTMLElement> & {
-            default: string | boolean | (() => HTMLElement);
+        transfer: import("vue-types").VueTypeDef<string | boolean> & {
+            default: string | boolean;
         };
         zIndex: import("vue-types").VueTypeDef<string | number>;
         animateType: import("vue-types").VueTypeValidableDef<string> & {
@@ -137,7 +137,7 @@ declare const BkModal: {
         left: string;
         top: string;
         isShow: boolean;
-        transfer: string | boolean | HTMLElement;
+        transfer: string | boolean;
         backgroundColor: string;
         renderDirective: "show" | "if";
         fullscreen: boolean;
@@ -186,8 +186,8 @@ declare const BkModal: {
         } & {
             default: boolean;
         };
-        transfer: import("vue-types").VueTypeDef<string | boolean | HTMLElement> & {
-            default: string | boolean | (() => HTMLElement);
+        transfer: import("vue-types").VueTypeDef<string | boolean> & {
+            default: string | boolean;
         };
         zIndex: import("vue-types").VueTypeDef<string | number>;
         animateType: import("vue-types").VueTypeValidableDef<string> & {
@@ -225,7 +225,7 @@ declare const BkModal: {
         left: string;
         top: string;
         isShow: boolean;
-        transfer: string | boolean | HTMLElement;
+        transfer: string | boolean;
         backgroundColor: string;
         renderDirective: "show" | "if";
         fullscreen: boolean;
@@ -271,8 +271,8 @@ declare const BkModal: {
     } & {
         default: boolean;
     };
-    transfer: import("vue-types").VueTypeDef<string | boolean | HTMLElement> & {
-        default: string | boolean | (() => HTMLElement);
+    transfer: import("vue-types").VueTypeDef<string | boolean> & {
+        default: string | boolean;
     };
     zIndex: import("vue-types").VueTypeDef<string | number>;
     animateType: import("vue-types").VueTypeValidableDef<string> & {
@@ -310,7 +310,7 @@ declare const BkModal: {
     left: string;
     top: string;
     isShow: boolean;
-    transfer: string | boolean | HTMLElement;
+    transfer: string | boolean;
     backgroundColor: string;
     renderDirective: "show" | "if";
     fullscreen: boolean;
@@ -353,8 +353,8 @@ declare const BkModal: {
         } & {
             default: boolean;
         };
-        transfer: import("vue-types").VueTypeDef<string | boolean | HTMLElement> & {
-            default: string | boolean | (() => HTMLElement);
+        transfer: import("vue-types").VueTypeDef<string | boolean> & {
+            default: string | boolean;
         };
         zIndex: import("vue-types").VueTypeDef<string | number>;
         animateType: import("vue-types").VueTypeValidableDef<string> & {

package/lib/modal/index.js

@@ -88,7 +88,7 @@ function _defineProperty(obj, key, value) {
 ;// CONCATENATED MODULE: external "vue"
 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({ ["Teleport"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.Teleport, ["Transition"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.Transition, ["computed"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.computed, ["createVNode"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.createVNode, ["defineComponent"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.defineComponent, ["isVNode"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.isVNode, ["mergeProps"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.mergeProps, ["nextTick"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.nextTick, ["onBeforeUnmount"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.onBeforeUnmount, ["onMounted"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.onMounted, ["ref"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.ref, ["useAttrs"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.useAttrs, ["useSlots"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.useSlots, ["vShow"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.vShow, ["watch"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.watch, ["withDirectives"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.withDirectives });
+const external_vue_namespaceObject = external_vue_x({ ["Teleport"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.Teleport, ["Transition"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.Transition, ["computed"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.computed, ["createVNode"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.createVNode, ["defineComponent"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.defineComponent, ["mergeProps"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.mergeProps, ["onBeforeUnmount"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.onBeforeUnmount, ["onMounted"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.onMounted, ["ref"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.ref, ["useAttrs"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.useAttrs, ["useSlots"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.useSlots, ["vShow"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.vShow, ["watch"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.watch, ["withDirectives"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.withDirectives });
 ;// 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
@@ -146,9 +146,8 @@ var useContentResize = function useContentResize(root, resizeTarget, props) {
     var footerMarginTop = 32;
     isContentScroll.value = windowInnerHeight < headerHeight + contentHeight + footerHeight + footerMarginTop;
     if (isContentScroll.value || props.fullscreen) {
-      var fixedFooterHeight = 48;
       contentStyles.value = {
-        height: "".concat(windowInnerHeight - headerHeight - fixedFooterHeight, "px"),
+        height: "".concat(windowInnerHeight - headerHeight - footerHeight, "px"),
         overflow: 'auto',
         'scrollbar-gutter': 'stable'
       };
@@ -163,7 +162,8 @@ var useContentResize = function useContentResize(root, resizeTarget, props) {
   }, function () {
     var observer;
     if (props.isShow) {
-      (0,external_vue_namespaceObject.nextTick)(function () {
+      // 有动画效果导致 resizeTarget DOM 找不到
+      setTimeout(function () {
         if (!resizeTarget.value) {
           return;
         }
@@ -172,7 +172,7 @@ var useContentResize = function useContentResize(root, resizeTarget, props) {
         });
         observer.observe(resizeTarget.value);
         calcContentScroll();
-      });
+      }, 100);
     } else {
       if (observer) {
         observer.disconnect();
@@ -309,7 +309,7 @@ var propsMixin = {
   // 是否允许点击遮罩关闭弹窗
   quickClose: shared_namespaceObject.PropTypes.bool.def(true),
   // 是否显示在body内（即与id#app同级
-  transfer: shared_namespaceObject.PropTypes.oneOfType([Boolean, String, HTMLElement]).def(true),
+  transfer: shared_namespaceObject.PropTypes.oneOfType([Boolean, String]).def(true),
   // 弹出层z-index，实际显示的值会自动+1。为了抱证在遮罩上正常显示
   zIndex: shared_namespaceObject.PropTypes.oneOfType([String, Number]),
   // 动画类型
@@ -361,9 +361,6 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 
 
 
-function _isSlot(s) {
-  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !(0,external_vue_namespaceObject.isVNode)(s);
-}
 /* harmony default export */ const modal = ((0,external_vue_namespaceObject.defineComponent)({
   name: 'Modal',
   props: _objectSpread({}, propsMixin),
@@ -390,15 +387,6 @@ function _isSlot(s) {
         top: props.top
       };
     });
-    var teleportTo = (0,external_vue_namespaceObject.computed)(function () {
-      if (props.transfer) {
-        if (typeof props.transfer === 'boolean') {
-          return 'body';
-        }
-        return props.transfer;
-      }
-      return '';
-    });
     (0,external_vue_namespaceObject.watch)(function () {
       return props.isShow;
     }, function () {
@@ -497,48 +485,27 @@ function _isSlot(s) {
           "onClick": handleClose
         }, [(_slots$close = slots.close) === null || _slots$close === void 0 ? void 0 : _slots$close.call(slots)])]);
       };
-      var renderModalContent = function renderModalContent() {
-        return (0,external_vue_namespaceObject.createVNode)("div", (0,external_vue_namespaceObject.mergeProps)({
-          "ref": rootRef
-        }, attrs, {
-          "class": [resolveClassName('modal'), props.extCls || '']
-        }), [renderMask(), (0,external_vue_namespaceObject.createVNode)(external_vue_namespaceObject.Transition, {
-          "name": "modal-".concat(props.animateType)
-        }, {
-          "default": function _default() {
-            return [(0,external_vue_namespaceObject.withDirectives)((0,external_vue_namespaceObject.createVNode)("div", {
-              "style": modalWrapperStyles.value,
-              "class": resolveClassName('modal-wrapper')
-            }, [renderContent()]), [[external_vue_namespaceObject.vShow, localShow.value]])];
-          }
-        })]);
-      };
-      // 判断传入的是不是css选择器或者HTMLElement
-      var isValidTeleport = function isValidTeleport(selector) {
-        try {
-          if (typeof selector === 'boolean') {
-            return selector;
-          }
-          if (typeof selector === 'string') {
-            return document.querySelector(selector) !== null;
-          }
-          return selector instanceof HTMLElement;
-        } catch (err) {
-          return false;
+      return (0,external_vue_namespaceObject.createVNode)(external_vue_namespaceObject.Teleport, {
+        "disabled": !props.transfer,
+        "to": typeof props.transfer === 'string' && Boolean(props.transfer) ? props.transfer : 'body'
+      }, {
+        "default": function _default() {
+          return [(0,external_vue_namespaceObject.createVNode)("div", (0,external_vue_namespaceObject.mergeProps)({
+            "ref": rootRef
+          }, attrs, {
+            "class": [resolveClassName('modal'), props.extCls || '']
+          }), [renderMask(), (0,external_vue_namespaceObject.createVNode)(external_vue_namespaceObject.Transition, {
+            "name": "modal-".concat(props.animateType)
+          }, {
+            "default": function _default() {
+              return [(0,external_vue_namespaceObject.withDirectives)((0,external_vue_namespaceObject.createVNode)("div", {
+                "style": modalWrapperStyles.value,
+                "class": resolveClassName('modal-wrapper')
+              }, [renderContent()]), [[external_vue_namespaceObject.vShow, localShow.value]])];
+            }
+          })])];
         }
-      };
-      if (teleportTo.value === 'body' || isValidTeleport(props.transfer)) {
-        var _slot;
-        return (0,external_vue_namespaceObject.createVNode)(external_vue_namespaceObject.Teleport, {
-          "disabled": !props.transfer,
-          "to": teleportTo.value
-        }, _isSlot(_slot = renderModalContent()) ? _slot : {
-          "default": function _default() {
-            return [_slot];
-          }
-        });
-      }
-      return renderModalContent();
+      });
     };
   }
 }));

package/lib/modal/modal.d.ts

@@ -33,8 +33,8 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: boolean;
     };
-    transfer: import("vue-types").VueTypeDef<string | boolean | HTMLElement> & {
-        default: string | boolean | (() => HTMLElement);
+    transfer: import("vue-types").VueTypeDef<string | boolean> & {
+        default: string | boolean;
     };
     zIndex: import("vue-types").VueTypeDef<string | number>;
     animateType: import("vue-types").VueTypeValidableDef<string> & {
@@ -94,8 +94,8 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: boolean;
     };
-    transfer: import("vue-types").VueTypeDef<string | boolean | HTMLElement> & {
-        default: string | boolean | (() => HTMLElement);
+    transfer: import("vue-types").VueTypeDef<string | boolean> & {
+        default: string | boolean;
     };
     zIndex: import("vue-types").VueTypeDef<string | number>;
     animateType: import("vue-types").VueTypeValidableDef<string> & {
@@ -133,7 +133,7 @@ declare const _default: import("vue").DefineComponent<{
     left: string;
     top: string;
     isShow: boolean;
-    transfer: string | boolean | HTMLElement;
+    transfer: string | boolean;
     backgroundColor: string;
     renderDirective: "show" | "if";
     fullscreen: boolean;

package/lib/modal/props.mixin.d.ts

@@ -30,8 +30,8 @@ export declare const propsMixin: {
     } & {
         default: boolean;
     };
-    transfer: import("vue-types").VueTypeDef<string | boolean | HTMLElement> & {
-        default: string | boolean | (() => HTMLElement);
+    transfer: import("vue-types").VueTypeDef<string | boolean> & {
+        default: string | boolean;
     };
     zIndex: import("vue-types").VueTypeDef<string | number>;
     animateType: import("vue-types").VueTypeValidableDef<string> & {

package/lib/sideslider/index.d.ts

@@ -41,8 +41,8 @@ declare const BkSideslider: {
         } & {
             default: boolean;
         };
-        transfer: import("vue-types").VueTypeDef<string | boolean | HTMLElement> & {
-            default: string | boolean | (() => HTMLElement);
+        transfer: import("vue-types").VueTypeDef<string | boolean> & {
+            default: string | boolean;
         };
         zIndex: import("vue-types").VueTypeDef<string | number>;
         animateType: import("vue-types").VueTypeValidableDef<string> & {
@@ -118,8 +118,8 @@ declare const BkSideslider: {
         } & {
             default: boolean;
         };
-        transfer: import("vue-types").VueTypeDef<string | boolean | HTMLElement> & {
-            default: string | boolean | (() => HTMLElement);
+        transfer: import("vue-types").VueTypeDef<string | boolean> & {
+            default: string | boolean;
         };
         zIndex: import("vue-types").VueTypeDef<string | number>;
         animateType: import("vue-types").VueTypeValidableDef<string> & {
@@ -159,7 +159,7 @@ declare const BkSideslider: {
         left: string;
         top: string;
         isShow: boolean;
-        transfer: string | boolean | HTMLElement;
+        transfer: string | boolean;
         direction: string;
         backgroundColor: string;
         renderDirective: "show" | "if";
@@ -219,8 +219,8 @@ declare const BkSideslider: {
         } & {
             default: boolean;
         };
-        transfer: import("vue-types").VueTypeDef<string | boolean | HTMLElement> & {
-            default: string | boolean | (() => HTMLElement);
+        transfer: import("vue-types").VueTypeDef<string | boolean> & {
+            default: string | boolean;
         };
         zIndex: import("vue-types").VueTypeDef<string | number>;
         animateType: import("vue-types").VueTypeValidableDef<string> & {
@@ -260,7 +260,7 @@ declare const BkSideslider: {
         left: string;
         top: string;
         isShow: boolean;
-        transfer: string | boolean | HTMLElement;
+        transfer: string | boolean;
         direction: string;
         backgroundColor: string;
         renderDirective: "show" | "if";
@@ -317,8 +317,8 @@ declare const BkSideslider: {
     } & {
         default: boolean;
     };
-    transfer: import("vue-types").VueTypeDef<string | boolean | HTMLElement> & {
-        default: string | boolean | (() => HTMLElement);
+    transfer: import("vue-types").VueTypeDef<string | boolean> & {
+        default: string | boolean;
     };
     zIndex: import("vue-types").VueTypeDef<string | number>;
     animateType: import("vue-types").VueTypeValidableDef<string> & {
@@ -358,7 +358,7 @@ declare const BkSideslider: {
     left: string;
     top: string;
     isShow: boolean;
-    transfer: string | boolean | HTMLElement;
+    transfer: string | boolean;
     direction: string;
     backgroundColor: string;
     renderDirective: "show" | "if";

package/lib/sideslider/sideslider.d.ts

@@ -40,8 +40,8 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: boolean;
     };
-    transfer: import("vue-types").VueTypeDef<string | boolean | HTMLElement> & {
-        default: string | boolean | (() => HTMLElement);
+    transfer: import("vue-types").VueTypeDef<string | boolean> & {
+        default: string | boolean;
     };
     zIndex: import("vue-types").VueTypeDef<string | number>;
     animateType: import("vue-types").VueTypeValidableDef<string> & {
@@ -111,8 +111,8 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: boolean;
     };
-    transfer: import("vue-types").VueTypeDef<string | boolean | HTMLElement> & {
-        default: string | boolean | (() => HTMLElement);
+    transfer: import("vue-types").VueTypeDef<string | boolean> & {
+        default: string | boolean;
     };
     zIndex: import("vue-types").VueTypeDef<string | number>;
     animateType: import("vue-types").VueTypeValidableDef<string> & {
@@ -152,7 +152,7 @@ declare const _default: import("vue").DefineComponent<{
     left: string;
     top: string;
     isShow: boolean;
-    transfer: string | boolean | HTMLElement;
+    transfer: string | boolean;
     direction: string;
     backgroundColor: string;
     renderDirective: "show" | "if";

package/lib/table/props.d.ts

@@ -124,12 +124,12 @@ export type Field = {
 export type LabelFunctionString = ((_column: any, _index: any) => JSX.Element | boolean | number | string) | boolean | number | string;
 export declare const LabelFunctionStringType: import("vue-types").VueTypeDef<LabelFunctionString>;
 export type HeadRenderArgs = {
-    cell?: unknown;
-    data?: unknown;
-    row?: Record<string, unknown>;
+    cell?: any;
+    data?: any;
+    row?: Record<string, any>;
     column?: Column;
     index?: number;
-    rows?: Record<string, unknown>[];
+    rows?: Record<string, any>[];
 };
 export type RenderFunctionString = (args: HeadRenderArgs) => JSX.Element | boolean | number | string;
 export declare const RenderFunctionStringType: import("vue-types").VueTypeDef<RenderFunctionString>;

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

@@ -1,6 +1,6 @@
 import { Ref } from 'vue';
 import type { TagProps } from './tag-props';
-export declare const INPUT_MIN_WIDTH = 12;
+export declare const INPUT_MIN_WIDTH = 10;
 export declare function useDebouncedRef<T>(value: any, delay?: number): Ref<T>;
 export declare function usePage(pageSize: Ref<number>): {
     pageState: {

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

@@ -297,6 +297,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;
@@ -964,6 +965,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;
@@ -1341,6 +1343,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;

package/lib/tag-input/index.js

@@ -17509,7 +17509,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;
@@ -18004,6 +18004,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 () {
@@ -18323,12 +18324,12 @@ 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 / 2), "px");
+          (0,external_vue_namespaceObject.nextTick)(function () {
+            tagInputRef.value.style.width = "".concat(inputValueRef.value.getBoundingClientRect().width, "px");
+          });
         } else {
           if (trigger === 'focus') {
             filterData();
-            tagInputRef.value.style.width = "".concat(INPUT_MIN_WIDTH, "px");
           }
         }
       } else {
@@ -18773,6 +18774,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,
@@ -18849,6 +18851,7 @@ function tag_input_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
           "onUpdate:modelValue": function onUpdateModelValue($event) {
             return _this.curInputValue = $event;
           },
+          "spellcheck": "false",
           "type": "text",
           "onBlur": _this.handleBlur,
           "onFocus": _this.handleFocus,
@@ -18861,7 +18864,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",

package/lib/tag-input/tag-input.css

@@ -135,6 +135,8 @@
 .bk-tag-input .bk-tag-input-trigger {
   position: relative;
   display: flex;
+  align-items: center;
+  justify-content: space-between;
   min-height: 32px;
   padding: 0 0 0 5px;
   overflow: hidden;
@@ -143,8 +145,6 @@
   background: var(--white-color);
   border: 1px solid var(--light-gray);
   border-radius: 2px;
-  align-items: center;
-  justify-content: space-between;
 }
 .bk-tag-input .bk-tag-input-trigger.active {
   border-color: var(--primary-color);
@@ -156,22 +156,22 @@
 }
 .bk-tag-input .bk-tag-input-trigger .tag-list {
   display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
   max-height: 135px;
   padding: 0;
   margin: 0;
   overflow: auto;
-  align-items: center;
-  flex-wrap: wrap;
 }
 .bk-tag-input .bk-tag-input-trigger .tag-list > li {
   display: inline-flex;
+  align-items: center;
   height: 22px;
   margin: 4px 5px 4px 0;
   overflow: hidden;
   font-size: 12px;
   border: solid 1px transparent;
   border-radius: 2px;
-  align-items: center;
 }
 .bk-tag-input .bk-tag-input-trigger .tag-list > li.tag-item {
   background: #f0f1f5;
@@ -184,32 +184,32 @@
   line-height: 0;
 }
 .bk-tag-input .bk-tag-input-trigger .tag-list .tag {
+  flex: 1;
   max-width: 190px;
   overflow: hidden;
   text-overflow: ellipsis;
   word-break: break-all;
   white-space: nowrap;
-  flex: 1;
 }
 .bk-tag-input .bk-tag-input-trigger .tag-list .text {
+  box-sizing: border-box;
   padding: 0 5px;
   line-height: 20px;
   color: var(--default-color);
   background-color: #f0f1f5;
   border-radius: 2px;
-  box-sizing: border-box;
 }
 .bk-tag-input .bk-tag-input-trigger .tag-list .text:hover {
   background-color: #dcdee5;
 }
 .bk-tag-input .bk-tag-input-trigger .tag-list .tag-input {
+  box-sizing: border-box;
   width: 10px;
-  height: 22px;
   max-width: 295px;
+  height: 22px;
   padding: 0;
   border: 0;
   outline: none;
-  box-sizing: border-box;
 }
 .bk-tag-input .bk-tag-input-trigger .placeholder {
   position: absolute;

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

@@ -274,13 +274,7 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     tagOverflowTips: {
-        type: import("vue").PropType<Partial<import("../directives/tooltips").IOptions>>; /**
-         * 不显示条件：
-         * 1. 设置不可清除
-         * 2. 禁用时
-         * 3. tag标签为空时
-         * 4. 设置了showClearOnlyHover，且没有hover的时候
-         */
+        type: import("vue").PropType<Partial<import("../directives/tooltips").IOptions>>;
         default: () => {};
     };
 }, {
@@ -294,6 +288,7 @@ declare const _default: import("vue").DefineComponent<{
     bkTagSelectorRef: Ref<any>;
     tagListRef: Ref<any>;
     tagInputItemRef: Ref<any>;
+    inputValueRef: Ref<HTMLElement>;
     selectorListRef: Ref<any>;
     triggerClass: import("vue").ComputedRef<{
         [x: string]: boolean;
@@ -614,13 +609,7 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     tagOverflowTips: {
-        type: import("vue").PropType<Partial<import("../directives/tooltips").IOptions>>; /**
-         * 不显示条件：
-         * 1. 设置不可清除
-         * 2. 禁用时
-         * 3. tag标签为空时
-         * 4. 设置了showClearOnlyHover，且没有hover的时候
-         */
+        type: import("vue").PropType<Partial<import("../directives/tooltips").IOptions>>;
         default: () => {};
     };
 }>> & {