vxe-pc-ui 4.20.9 → 4.20.11

package/lib/select/src/select.js

@@ -15,6 +15,21 @@ var _log = require("../../ui/src/log");
 var _input = _interopRequireDefault(require("../../input"));
 var _button = _interopRequireDefault(require("../../button"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const {
+  getConfig,
+  getIcon,
+  getI18n,
+  baseUtils,
+  domUtils,
+  globalEvents,
+  GLOBAL_EVENT_KEYS,
+  globalResize,
+  createEvent,
+  renderEmptyElement
+} = _ui.VxeUI;
+const {
+  getDefVal
+} = baseUtils;
 const {
   errLog
 } = (0, _log.createComponentLog)('select');
@@ -36,6 +51,9 @@ function createReactData() {
     currentOption: null,
     searchValue: '',
     searchLoading: false,
+    // 滚动条
+    yThumbHeight: 0,
+    xThumbWidth: 0,
     panelIndex: 0,
     panelStyle: {},
     panelPlacement: null,
@@ -55,8 +73,14 @@ function createInternalData() {
     optGroupKeyMaps: {},
     optFullValMaps: {},
     remoteValMaps: {},
-    lastScrollLeft: 0,
+    // 滚动条
+    // scrollObserver: undefined,
+    // isThumbDrag: false,
+    thumbDragOffset: 0,
+    yThumbTop: 0,
+    xThumbLeft: 0,
     lastScrollTop: 0,
+    lastScrollLeft: 0,
     scrollYStore: {
       startIndex: 0,
       endIndex: 0,
@@ -75,11 +99,11 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     defaultConfig: Object,
     emptyValue: {
       type: [String, Number, Boolean, Array],
-      default: () => (0, _ui.getConfig)().select.emptyValue
+      default: () => getConfig().select.emptyValue
     },
     clearable: {
       type: Boolean,
-      default: () => (0, _ui.getConfig)().select.clearable
+      default: () => getConfig().select.clearable
     },
     placeholder: String,
     readonly: {
@@ -94,12 +118,12 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     multiple: Boolean,
     multiCharOverflow: {
       type: [Number, String],
-      default: () => (0, _ui.getConfig)().select.multiCharOverflow
+      default: () => getConfig().select.multiCharOverflow
     },
     prefixIcon: String,
     allowCreate: {
       type: Boolean,
-      default: () => (0, _ui.getConfig)().select.allowCreate
+      default: () => getConfig().select.allowCreate
     },
     placement: String,
     lazyOptions: Array,
@@ -121,12 +145,12 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     },
     showRadio: {
       type: Boolean,
-      default: () => (0, _ui.getConfig)().select.showRadio
+      default: () => getConfig().select.showRadio
     },
     radioConfig: Object,
     showCheckbox: {
       type: Boolean,
-      default: () => (0, _ui.getConfig)().select.showCheckedButton
+      default: () => getConfig().select.showCheckedButton
     },
     checkboxConfig: Object,
     /**
@@ -136,7 +160,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     zIndex: Number,
     size: {
       type: String,
-      default: () => (0, _ui.getConfig)().select.size || (0, _ui.getConfig)().size
+      default: () => getConfig().select.size || getConfig().size
     },
     filterable: Boolean,
     /**
@@ -150,27 +174,27 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     emptyText: String,
     checkedClosable: {
       type: Boolean,
-      default: () => (0, _ui.getConfig)().select.checkedClosable
+      default: () => getConfig().select.checkedClosable
     },
     clearClosable: {
       type: Boolean,
-      default: () => (0, _ui.getConfig)().select.clearClosable
+      default: () => getConfig().select.clearClosable
     },
     showCloseButton: {
       type: Boolean,
-      default: () => (0, _ui.getConfig)().select.showCloseButton
+      default: () => getConfig().select.showCloseButton
     },
     showTotalButton: {
       type: Boolean,
-      default: () => (0, _ui.getConfig)().select.showTotalButton
+      default: () => getConfig().select.showTotalButton
     },
     showCheckedButton: {
       type: Boolean,
-      default: () => (0, _ui.getConfig)().select.showCheckedButton
+      default: () => getConfig().select.showCheckedButton
     },
     showClearButton: {
       type: Boolean,
-      default: () => (0, _ui.getConfig)().select.showClearButton
+      default: () => getConfig().select.showClearButton
     },
     transfer: {
       type: Boolean,
@@ -179,6 +203,11 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     popupConfig: Object,
     virtualYConfig: Object,
     scrollY: Object,
+    useScrollbar: {
+      type: Boolean,
+      default: () => getDefVal(getConfig().select.useScrollbar, getConfig().useScrollbar)
+    },
+    scrollbarConfig: Object,
     /**
      * 已废弃，被 remote-config.queryMethod 替换
      * @deprecated
@@ -190,7 +219,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
      */
     optionId: {
       type: String,
-      default: () => (0, _ui.getConfig)().select.optionId
+      default: () => getConfig().select.optionId
     },
     /**
      * 已废弃，被 option-config.useKey 替换
@@ -216,10 +245,14 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     const refInpSearch = (0, _vue.ref)();
     const refVirtualWrapper = (0, _vue.ref)();
     const refOptionPanel = (0, _vue.ref)();
+    const refVirtualSpaceElem = (0, _vue.ref)();
     const refVirtualBody = (0, _vue.ref)();
     const {
       computeSize
-    } = (0, _ui.useSize)(props);
+    } = _ui.useFns.useSize(props);
+    const {
+      computeIsVScrollbar
+    } = _ui.useFns.useVScrollbar(props);
     const reactData = (0, _vue.reactive)(createReactData());
     const internalData = createInternalData();
     const refMaps = {
@@ -233,6 +266,21 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       internalData,
       getRefMaps: () => refMaps
     };
+    const {
+      refTrackXElem,
+      refTrackYElem,
+      refThumbXElem,
+      refThumbYElem,
+      updateThumbSize,
+      updateThumbOffset,
+      clickTrackXEvent,
+      clickTrackYEvent,
+      pointerdownThumbXEvent,
+      pointermoveThumbXEvent,
+      cleatPointerThumbEvent,
+      pointerdownThumbYEvent,
+      pointermoveThumbYEvent
+    } = _ui.useFns.useInitVScrollbar($xeSelect);
     const computeFormReadonly = (0, _vue.computed)(() => {
       const {
         readonly
@@ -266,7 +314,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         return popupOpts.transfer;
       }
       if (transfer === null) {
-        const globalTransfer = (0, _ui.getConfig)().select.transfer;
+        const globalTransfer = getConfig().select.transfer;
         if (_xeUtils.default.isBoolean(globalTransfer)) {
           return globalTransfer;
         }
@@ -283,11 +331,11 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       if (placeholder) {
         return (0, _utils.getFuncText)(placeholder);
       }
-      const globalPlaceholder = (0, _ui.getConfig)().select.placeholder;
+      const globalPlaceholder = getConfig().select.placeholder;
       if (globalPlaceholder) {
         return (0, _utils.getFuncText)(globalPlaceholder);
       }
-      return (0, _ui.getI18n)('vxe.base.pleaseSelect');
+      return getI18n('vxe.base.pleaseSelect');
     });
     const computeDefaultOpts = (0, _vue.computed)(() => {
       return Object.assign({}, props.defaultConfig);
@@ -319,25 +367,25 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       return checkMaxLimit(selectVals);
     });
     const computePopupOpts = (0, _vue.computed)(() => {
-      return Object.assign({}, (0, _ui.getConfig)().select.popupConfig, props.popupConfig);
+      return Object.assign({}, getConfig().select.popupConfig, props.popupConfig);
     });
     const computeVirtualYOpts = (0, _vue.computed)(() => {
-      return Object.assign({}, (0, _ui.getConfig)().select.virtualYConfig || (0, _ui.getConfig)().select.scrollY, props.virtualYConfig || props.scrollY);
+      return Object.assign({}, getConfig().select.virtualYConfig || getConfig().select.scrollY, props.virtualYConfig || props.scrollY);
     });
     const computeRemoteOpts = (0, _vue.computed)(() => {
-      return Object.assign({}, (0, _ui.getConfig)().select.remoteConfig, props.remoteConfig);
+      return Object.assign({}, getConfig().select.remoteConfig, props.remoteConfig);
     });
     const computeFilterOpts = (0, _vue.computed)(() => {
-      return Object.assign({}, (0, _ui.getConfig)().select.filterConfig, props.filterConfig);
+      return Object.assign({}, getConfig().select.filterConfig, props.filterConfig);
     });
     const computeOptionOpts = (0, _vue.computed)(() => {
-      return Object.assign({}, (0, _ui.getConfig)().select.optionConfig, props.optionConfig);
+      return Object.assign({}, getConfig().select.optionConfig, props.optionConfig);
     });
     const computeRadioOpts = (0, _vue.computed)(() => {
-      return Object.assign({}, (0, _ui.getConfig)().select.radioConfig, props.radioConfig);
+      return Object.assign({}, getConfig().select.radioConfig, props.radioConfig);
     });
     const computeCheckboxOpts = (0, _vue.computed)(() => {
-      return Object.assign({}, (0, _ui.getConfig)().select.checkboxConfig, props.checkboxConfig);
+      return Object.assign({}, getConfig().select.checkboxConfig, props.checkboxConfig);
     });
     const computeMultiMaxCharNum = (0, _vue.computed)(() => {
       return _xeUtils.default.toNumber(props.multiCharOverflow);
@@ -419,6 +467,71 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       }
       return labels.join(', ');
     });
+    const computeScrollbarOpts = (0, _vue.computed)(() => {
+      return Object.assign({}, getConfig().tree.scrollbarConfig, props.scrollbarConfig);
+    });
+    const computeScrollbarXOpts = (0, _vue.computed)(() => {
+      const scrollbarOpts = computeScrollbarOpts.value;
+      return Object.assign({}, getConfig().scrollbar.xConfig, scrollbarOpts.xConfig, {
+        visible: false
+      });
+    });
+    const computeScrollbarYOpts = (0, _vue.computed)(() => {
+      const scrollbarOpts = computeScrollbarOpts.value;
+      return Object.assign({}, getConfig().scrollbar.yConfig, scrollbarOpts.yConfig);
+    });
+    const computeScrollXHeight = (0, _vue.computed)(() => {
+      const scrollbarOpts = computeScrollbarOpts.value;
+      const scrollbarXOpts = computeScrollbarXOpts.value;
+      return getDefVal(getDefVal(scrollbarXOpts.height, scrollbarOpts.height), getConfig().scrollbar.height);
+    });
+    const computeScrollYWidth = (0, _vue.computed)(() => {
+      const scrollbarOpts = computeScrollbarOpts.value;
+      const scrollbarYOpts = computeScrollbarYOpts.value;
+      return getDefVal(getDefVal(scrollbarYOpts.width, scrollbarOpts.width), getConfig().scrollbar.width);
+    });
+    const computeScrollXVisible = (0, _vue.computed)(() => {
+      const scrollbarOpts = computeScrollbarOpts.value;
+      const scrollbarXOpts = computeScrollbarXOpts.value;
+      return getDefVal(scrollbarXOpts.visible, scrollbarOpts.visible);
+    });
+    const computeScrollYVisible = (0, _vue.computed)(() => {
+      const scrollbarOpts = computeScrollbarOpts.value;
+      const scrollbarYOpts = computeScrollbarYOpts.value;
+      return getDefVal(scrollbarYOpts.visible, scrollbarOpts.visible);
+    });
+    const computeScrollXAutoHide = (0, _vue.computed)(() => {
+      const scrollbarOpts = computeScrollbarOpts.value;
+      const scrollbarXOpts = computeScrollbarXOpts.value;
+      return getDefVal(getDefVal(scrollbarXOpts.autoHide, scrollbarOpts.autoHide), getConfig().scrollbar.autoHide);
+    });
+    const computeScrollYAutoHide = (0, _vue.computed)(() => {
+      const scrollbarOpts = computeScrollbarOpts.value;
+      const scrollbarYOpts = computeScrollbarYOpts.value;
+      return getDefVal(getDefVal(scrollbarYOpts.autoHide, scrollbarOpts.autoHide), getConfig().scrollbar.autoHide);
+    });
+    const computeScrollbarWrapperClss = (0, _vue.computed)(() => {
+      const {
+        yThumbHeight,
+        xThumbWidth
+      } = reactData;
+      const scrollbarXToTop = computeScrollbarXToTop.value;
+      const scrollbarYToLeft = computeScrollbarYToLeft.value;
+      const scrollXVisible = computeScrollXVisible.value;
+      const scrollYVisible = computeScrollYVisible.value;
+      return domUtils.buildClass(['vxe-scrollbar is--virtual', `ov-x--${scrollXVisible === false ? 'hidden' : 'visible'}`, `ov-y--${scrollYVisible === false ? 'hidden' : 'visible'}`, `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}`, `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}`], {
+        'overflow-y': yThumbHeight,
+        'overflow-x': xThumbWidth
+      });
+    });
+    const computeScrollbarXToTop = (0, _vue.computed)(() => {
+      const scrollbarXOpts = computeScrollbarXOpts.value;
+      return scrollbarXOpts.position === 'top';
+    });
+    const computeScrollbarYToLeft = (0, _vue.computed)(() => {
+      const scrollbarYOpts = computeScrollbarYOpts.value;
+      return scrollbarYOpts.position === 'left';
+    });
     const callSlot = (slotFunc, params) => {
       if (slotFunc) {
         if (_xeUtils.default.isString(slotFunc)) {
@@ -431,7 +544,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       return [];
     };
     const dispatchEvent = (type, params, evnt) => {
-      emit(type, (0, _ui.createEvent)(evnt, {
+      emit(type, createEvent(evnt, {
         $select: $xeSelect
       }, params));
     };
@@ -780,7 +893,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
           if (checkMaxLimit(currVlas)) {
             if (_ui.VxeUI) {
               _ui.VxeUI.modal.message({
-                content: (0, _ui.getI18n)('vxe.select.overSizeErr', [max]),
+                content: getI18n('vxe.select.overSizeErr', [max]),
                 status: 'warning'
               });
             }
@@ -965,12 +1078,12 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         trigger
       } = popupOpts;
       if (!isDisabled) {
-        const isTab = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.TAB);
-        const isEnter = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ENTER);
-        const isEsc = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ESCAPE);
-        const isUpArrow = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ARROW_UP);
-        const isDwArrow = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ARROW_DOWN);
-        const isDel = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.DELETE);
+        const isTab = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.TAB);
+        const isEnter = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ENTER);
+        const isEsc = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ESCAPE);
+        const isUpArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_UP);
+        const isDwArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_DOWN);
+        const isDel = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.DELETE);
         if (isTab) {
           reactData.isActivated = false;
         }
@@ -1336,13 +1449,25 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         }
       });
     };
+    const updateScrollbar = () => {
+      const isVScrollbar = computeIsVScrollbar.value;
+      if (isVScrollbar) {
+        return (0, _vue.nextTick)().then(() => {
+          updateThumbSize();
+          updateThumbOffset();
+        });
+      }
+      return Promise.resolve();
+    };
     /**
      * 重新计算列表
      */
     const recalculate = () => {
       const el = refElem.value;
       if (el && el.clientWidth && el.clientHeight) {
-        return computeScrollLoad();
+        return computeScrollLoad().then(() => {
+          return updateScrollbar();
+        });
       }
       return Promise.resolve();
     };
@@ -1384,6 +1509,10 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       const scrollLeft = scrollBodyElem.scrollLeft;
       const isX = scrollLeft !== internalData.lastScrollLeft;
       const isY = scrollTop !== internalData.lastScrollTop;
+      const isVScrollbar = computeIsVScrollbar.value;
+      if (isVScrollbar) {
+        updateThumbOffset();
+      }
       internalData.lastScrollTop = scrollTop;
       internalData.lastScrollLeft = scrollLeft;
       if (reactData.scrollYLoad) {
@@ -1471,6 +1600,10 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     };
     const selectMethods = {
       dispatchEvent,
+      getScrollViewElem() {
+        const viewEl = refVirtualWrapper.value;
+        return viewEl || null;
+      },
       loadData,
       reloadData(datas) {
         internalData.isLoaded = false;
@@ -1524,6 +1657,28 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       recalculate,
       clearScroll
     };
+    const bindScrollbarResize = () => {
+      const isVScrollbar = computeIsVScrollbar.value;
+      const {
+        scrollObserver
+      } = internalData;
+      if (isVScrollbar) {
+        if (!scrollObserver) {
+          const el = refElem.value;
+          const viewInnerEl = refVirtualSpaceElem.value;
+          const scrollObserver = globalResize.create(() => {
+            reScrollFlag.value++;
+          });
+          if (el) {
+            scrollObserver.observe(el);
+          }
+          if (viewInnerEl) {
+            scrollObserver.observe(viewInnerEl);
+          }
+          internalData.scrollObserver = scrollObserver;
+        }
+      }
+    };
     Object.assign($xeSelect, selectMethods);
     const renderRadio = (option, isOptGroup, isChecked, isDisabled) => {
       const radioOpts = computeRadioOpts.value;
@@ -1532,7 +1687,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         trigger
       } = radioOpts;
       if (isOptGroup || showIcon === false) {
-        return (0, _ui.renderEmptyElement)($xeSelect);
+        return renderEmptyElement($xeSelect);
       }
       const ons = {};
       if (!trigger || trigger === 'default') {
@@ -1549,7 +1704,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
           'is--disabled': isDisabled
         }]
       }, ons), [(0, _vue.h)('span', {
-        class: ['vxe-radio--icon', isChecked ? (0, _ui.getIcon)().RADIO_CHECKED : isDisabled ? (0, _ui.getIcon)().RADIO_DISABLED_UNCHECKED : (0, _ui.getIcon)().RADIO_UNCHECKED]
+        class: ['vxe-radio--icon', isChecked ? getIcon().RADIO_CHECKED : isDisabled ? getIcon().RADIO_DISABLED_UNCHECKED : getIcon().RADIO_UNCHECKED]
       })]);
     };
     const renderCheckbox = (option, isOptGroup, isChecked, isDisabled) => {
@@ -1559,7 +1714,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         trigger
       } = checkboxOpts;
       if (isOptGroup || showIcon === false) {
-        return (0, _ui.renderEmptyElement)($xeSelect);
+        return renderEmptyElement($xeSelect);
       }
       const ons = {};
       if (!trigger || trigger === 'default') {
@@ -1576,7 +1731,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
           'is--disabled': isDisabled
         }]
       }, ons), [(0, _vue.h)('span', {
-        class: ['vxe-checkbox--icon', isChecked ? (0, _ui.getIcon)().CHECKBOX_CHECKED : isDisabled ? (0, _ui.getIcon)().CHECKBOX_DISABLED_UNCHECKED : (0, _ui.getIcon)().CHECKBOX_UNCHECKED]
+        class: ['vxe-checkbox--icon', isChecked ? getIcon().CHECKBOX_CHECKED : isDisabled ? getIcon().CHECKBOX_DISABLED_UNCHECKED : getIcon().CHECKBOX_UNCHECKED]
       })]);
     };
     const renderOption = list => {
@@ -1685,8 +1840,8 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
           key: 2,
           class: 'vxe-select-option--add-icon'
         }, [(0, _vue.h)('i', {
-          class: (0, _ui.getIcon)().SELECT_ADD_OPTION
-        })]) : (0, _ui.renderEmptyElement)($xeSelect)] : optVNs) : (0, _ui.renderEmptyElement)($xeSelect);
+          class: getIcon().SELECT_ADD_OPTION
+        })]) : renderEmptyElement($xeSelect)] : optVNs) : renderEmptyElement($xeSelect);
       });
     };
     const renderOpts = () => {
@@ -1698,17 +1853,17 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         return [(0, _vue.h)('div', {
           class: 'vxe-select--search-loading'
         }, [(0, _vue.h)('i', {
-          class: ['vxe-select--search-icon', (0, _ui.getIcon)().SELECT_LOADED]
+          class: ['vxe-select--search-icon', getIcon().SELECT_LOADED]
         }), (0, _vue.h)('span', {
           class: 'vxe-select--search-text'
-        }, (0, _ui.getI18n)('vxe.select.loadingText'))])];
+        }, getI18n('vxe.select.loadingText'))])];
       }
       if (optList.length) {
         return renderOption(optList);
       }
       return [(0, _vue.h)('div', {
         class: 'vxe-select--empty-placeholder'
-      }, props.emptyText || (0, _ui.getI18n)('vxe.select.emptyText'))];
+      }, props.emptyText || getI18n('vxe.select.emptyText'))];
     };
     const renderVN = () => {
       const {
@@ -1728,9 +1883,12 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         optList,
         visiblePanel,
         bodyHeight,
-        topSpaceHeight
+        topSpaceHeight,
+        xThumbWidth,
+        yThumbHeight
       } = reactData;
       const vSize = computeSize.value;
+      const isVScrollbar = computeIsVScrollbar.value;
       const isDisabled = computeIsDisabled.value;
       const selectLabel = computeSelectLabel.value;
       const fullLabel = computeFullLabel.value;
@@ -1761,6 +1919,14 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         appendTo
       } = popupOpts;
       const ppClassName = popupOpts.className || props.popupClassName;
+      const scrollbarOpts = computeScrollbarOpts.value;
+      const scrollXVisible = computeScrollXVisible.value;
+      const scrollYVisible = computeScrollYVisible.value;
+      const scrollbarXToTop = computeScrollbarXToTop.value;
+      const scrollbarYToLeft = computeScrollbarYToLeft.value;
+      const scrollXAutoHide = computeScrollXAutoHide.value;
+      const scrollYAutoHide = computeScrollYAutoHide.value;
+      const scrollbarWrapperClss = computeScrollbarWrapperClss.value;
       return (0, _vue.h)('div', {
         ref: refElem,
         class: ['vxe-select', className ? _xeUtils.default.isFunction(className) ? className({
@@ -1785,7 +1951,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         disabled: isDisabled,
         type: 'text',
         prefixIcon: props.prefixIcon,
-        suffixIcon: loading ? (0, _ui.getIcon)().SELECT_LOADED : visiblePanel ? (0, _ui.getIcon)().SELECT_OPEN : (0, _ui.getIcon)().SELECT_CLOSE,
+        suffixIcon: loading ? getIcon().SELECT_LOADED : visiblePanel ? getIcon().SELECT_OPEN : getIcon().SELECT_CLOSE,
         autoFocus: false,
         title: fullLabel,
         modelValue: selectLabel,
@@ -1824,33 +1990,41 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         clearable: true,
         disabled: false,
         readonly: false,
-        placeholder: (0, _ui.getI18n)('vxe.select.search'),
-        prefixIcon: (0, _ui.getIcon)().INPUT_SEARCH,
+        placeholder: getI18n('vxe.select.search'),
+        prefixIcon: getIcon().INPUT_SEARCH,
         'onUpdate:modelValue': modelSearchEvent,
         onFocus: focusSearchEvent,
         onChange: triggerSearchEvent,
         onSearch: triggerSearchEvent
-      })]) : (0, _ui.renderEmptyElement)($xeSelect), showCheckedButton && multiple || showClearButton || headerSlot ? (0, _vue.h)('div', {
+      })]) : renderEmptyElement($xeSelect), showCheckedButton && multiple || showClearButton || headerSlot ? (0, _vue.h)('div', {
         class: 'vxe-select--panel-header'
       }, headerSlot ? callSlot(headerSlot, {}) : [(0, _vue.h)('div', {
         class: 'vxe-select--header-button'
       }, [(0, _vue.h)('div', {
         class: 'vxe-select--header-btns'
       }, [showCheckedButton && multiple ? (0, _vue.h)(_button.default, {
-        content: (0, _ui.getI18n)('vxe.select.allChecked'),
+        content: getI18n('vxe.select.allChecked'),
         mode: 'text',
         onClick: allCheckedPanelEvent
-      }) : (0, _ui.renderEmptyElement)($xeSelect), showClearButton ? (0, _vue.h)(_button.default, {
-        content: (0, _ui.getI18n)('vxe.select.clear'),
+      }) : renderEmptyElement($xeSelect), showClearButton ? (0, _vue.h)(_button.default, {
+        content: getI18n('vxe.select.clear'),
         mode: 'text',
         onClick: clearCheckedPanelEvent
-      }) : (0, _ui.renderEmptyElement)($xeSelect)])])]) : (0, _ui.renderEmptyElement)($xeSelect), (0, _vue.h)('div', {
-        class: 'vxe-select--panel-body'
+      }) : renderEmptyElement($xeSelect)])])]) : renderEmptyElement($xeSelect), (0, _vue.h)('div', {
+        class: ['vxe-select--panel-body', isVScrollbar ? `ov-x--${scrollXVisible === false ? 'hidden' : 'visible'}` : '', isVScrollbar ? `ov-y--${scrollYVisible === false ? 'hidden' : 'visible'}` : '', isVScrollbar ? `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}` : '', isVScrollbar ? `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}` : '', {
+          'is--virtual-scrollbar': isVScrollbar,
+          'ov-padding': isVScrollbar && scrollbarOpts.padding,
+          'ov-x--auto-hide': isVScrollbar && scrollXAutoHide,
+          'ov-y--auto-hide': isVScrollbar && scrollYAutoHide,
+          'overflow-y': yThumbHeight,
+          'overflow-x': xThumbWidth
+        }]
       }, [(0, _vue.h)('div', {
         ref: refVirtualWrapper,
         class: 'vxe-select-option--wrapper',
         onScroll: scrollEvent
       }, [(0, _vue.h)('div', {
+        ref: refVirtualSpaceElem,
         class: 'vxe-select--y-space',
         style: {
           height: bodyHeight ? `${bodyHeight}px` : ''
@@ -1861,19 +2035,49 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         style: {
           marginTop: `${topSpaceHeight}px`
         }
-      }, renderOpts())])]), footerSlot || showTotalButton || showCloseButton && multiple ? (0, _vue.h)('div', {
+      }, renderOpts())]),
+      /**
+       * 滚动条
+       */
+      isVScrollbar ? (0, _vue.h)('div', {
+        class: scrollbarWrapperClss
+      }, [scrollXVisible === false ? renderEmptyElement($xeSelect) : (0, _vue.h)('div', {
+        ref: refTrackXElem,
+        class: 'vxe-scrollbar--track-x',
+        onClick: clickTrackXEvent
+      }, [(0, _vue.h)('div', {
+        ref: refThumbXElem,
+        class: 'vxe-scrollbar--thumb-x',
+        onPointerdown: pointerdownThumbXEvent,
+        onPointermove: pointermoveThumbXEvent,
+        onPointerup: cleatPointerThumbEvent,
+        onPointercancel: cleatPointerThumbEvent,
+        onLostpointercapture: cleatPointerThumbEvent
+      })]), scrollYVisible === false ? renderEmptyElement($xeSelect) : (0, _vue.h)('div', {
+        ref: refTrackYElem,
+        class: 'vxe-scrollbar--track-y',
+        onClick: clickTrackYEvent
+      }, [(0, _vue.h)('div', {
+        ref: refThumbYElem,
+        class: 'vxe-scrollbar--thumb-y',
+        onPointerdown: pointerdownThumbYEvent,
+        onPointermove: pointermoveThumbYEvent,
+        onPointerup: cleatPointerThumbEvent,
+        onPointercancel: cleatPointerThumbEvent,
+        onLostpointercapture: cleatPointerThumbEvent
+      })])]) : renderEmptyElement($xeSelect)]), footerSlot || showTotalButton || showCloseButton && multiple ? (0, _vue.h)('div', {
         class: 'vxe-select--panel-footer'
       }, footerSlot ? callSlot(footerSlot, {}) : [(0, _vue.h)('div', {
         class: 'vxe-select--footer-button'
       }, [showTotalButton ? (0, _vue.h)('div', {
         class: 'vxe-select--total-btns'
-      }, (0, _ui.getI18n)('vxe.select.total', [selectVals.length, optList.length])) : (0, _ui.renderEmptyElement)($xeSelect), showCloseButton && multiple ? (0, _vue.h)('div', {
+      }, getI18n('vxe.select.total', [selectVals.length, optList.length])) : renderEmptyElement($xeSelect), showCloseButton && multiple ? (0, _vue.h)('div', {
         class: 'vxe-select--oper-btns'
       }, [(0, _vue.h)(_button.default, {
-        content: (0, _ui.getI18n)('vxe.select.close'),
+        content: getI18n('vxe.select.close'),
         mode: 'text',
         onClick: closePanelEvent
-      })]) : (0, _ui.renderEmptyElement)($xeSelect)])]) : (0, _ui.renderEmptyElement)($xeSelect)])] : [])])]);
+      })]) : renderEmptyElement($xeSelect)])]) : renderEmptyElement($xeSelect)])] : [])])]);
     };
     (0, _vue.watch)(() => reactData.staticOptions, val => {
       loadData(val);
@@ -1884,6 +2088,42 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     (0, _vue.watch)(() => props.optionGroups, val => {
       loadData(val || []);
     });
+    const reScrollFlag = (0, _vue.ref)(0);
+    const reLayoutFlag = (0, _vue.ref)(0);
+    (0, _vue.watch)(computeIsVScrollbar, () => {
+      (0, _vue.nextTick)(() => {
+        bindScrollbarResize();
+        (0, _vue.nextTick)(() => {
+          reLayoutFlag.value++;
+        });
+      });
+    });
+    (0, _vue.watch)(computeScrollYWidth, () => {
+      reLayoutFlag.value++;
+    });
+    (0, _vue.watch)(computeScrollXHeight, () => {
+      reLayoutFlag.value++;
+    });
+    (0, _vue.watch)(computeScrollXVisible, () => {
+      (0, _vue.nextTick)(() => {
+        reLayoutFlag.value++;
+      });
+    });
+    (0, _vue.watch)(computeScrollYVisible, () => {
+      (0, _vue.nextTick)(() => {
+        reLayoutFlag.value++;
+      });
+    });
+    (0, _vue.watch)(reLayoutFlag, () => {
+      recalculate().then(() => {
+        recalculate();
+      });
+    });
+    (0, _vue.watch)(reScrollFlag, () => {
+      updateScrollbar().then(() => {
+        updateScrollbar();
+      });
+    });
     (0, _vue.onMounted)(() => {
       (0, _vue.nextTick)(() => {
         const {
@@ -1896,18 +2136,28 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
           loadData(options);
         }
       });
-      _ui.globalEvents.on($xeSelect, 'mousedown', handleGlobalMousedownEvent);
-      _ui.globalEvents.on($xeSelect, 'keydown', handleGlobalKeydownEvent);
-      _ui.globalEvents.on($xeSelect, 'blur', handleGlobalBlurEvent);
-      _ui.globalEvents.on($xeSelect, 'resize', handleGlobalResizeEvent);
-      _ui.globalEvents.on($xeSelect, 'scroll', handleGlobalScrollEvent);
+      reLayoutFlag.value++;
+      bindScrollbarResize();
+      globalEvents.on($xeSelect, 'mousedown', handleGlobalMousedownEvent);
+      globalEvents.on($xeSelect, 'keydown', handleGlobalKeydownEvent);
+      globalEvents.on($xeSelect, 'blur', handleGlobalBlurEvent);
+      globalEvents.on($xeSelect, 'resize', handleGlobalResizeEvent);
+      globalEvents.on($xeSelect, 'scroll', handleGlobalScrollEvent);
+    });
+    (0, _vue.onBeforeUnmount)(() => {
+      const {
+        scrollObserver
+      } = internalData;
+      if (scrollObserver) {
+        scrollObserver.disconnect();
+      }
     });
     (0, _vue.onUnmounted)(() => {
-      _ui.globalEvents.off($xeSelect, 'mousedown');
-      _ui.globalEvents.off($xeSelect, 'keydown');
-      _ui.globalEvents.off($xeSelect, 'blur');
-      _ui.globalEvents.off($xeSelect, 'resize');
-      _ui.globalEvents.off($xeSelect, 'scroll');
+      globalEvents.off($xeSelect, 'mousedown');
+      globalEvents.off($xeSelect, 'keydown');
+      globalEvents.off($xeSelect, 'blur');
+      globalEvents.off($xeSelect, 'resize');
+      globalEvents.off($xeSelect, 'scroll');
       _xeUtils.default.assign(reactData, createReactData());
       _xeUtils.default.assign(internalData, createInternalData());
     });