vxe-pc-ui 3.0.0 → 3.0.2

package/lib/select/src/select.js

@@ -0,0 +1,1330 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _comp = require("../../ui/src/comp");
+var _xeUtils = _interopRequireDefault(require("xe-utils"));
+var _ui = require("../../ui");
+var _dom = require("../../ui/src/dom");
+var _utils = require("../../ui/src/utils");
+var _input = _interopRequireDefault(require("../../input/src/input"));
+var _vn = require("../../ui/src/vn");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function isOptionVisible(option) {
+  return option.visible !== false;
+}
+function getOptUniqueId() {
+  return _xeUtils.default.uniqueId('opt_');
+}
+var _default2 = exports.default = (0, _comp.defineVxeComponent)({
+  name: 'VxeSelect',
+  mixins: [_ui.globalMixins.sizeMixin],
+  model: {
+    prop: 'value',
+    event: 'modelValue'
+  },
+  props: {
+    value: [String, Number, Boolean, Array],
+    clearable: Boolean,
+    placeholder: String,
+    readonly: {
+      type: Boolean,
+      default: null
+    },
+    loading: Boolean,
+    disabled: {
+      type: Boolean,
+      default: null
+    },
+    multiple: Boolean,
+    multiCharOverflow: {
+      type: [Number, String],
+      default: function _default() {
+        return (0, _ui.getConfig)().select.multiCharOverflow;
+      }
+    },
+    prefixIcon: String,
+    placement: String,
+    options: Array,
+    optionProps: Object,
+    optionGroups: Array,
+    optionGroupProps: Object,
+    optionConfig: Object,
+    className: [String, Function],
+    popupClassName: [String, Function],
+    max: {
+      type: [String, Number],
+      default: null
+    },
+    size: {
+      type: String,
+      default: function _default() {
+        return (0, _ui.getConfig)().select.size || (0, _ui.getConfig)().size;
+      }
+    },
+    filterable: Boolean,
+    filterMethod: Function,
+    remote: Boolean,
+    remoteMethod: Function,
+    emptyText: String,
+    transfer: {
+      type: Boolean,
+      default: null
+    },
+    // 已废弃，被 option-config.keyField 替换
+    optionId: {
+      type: String,
+      default: function _default() {
+        return (0, _ui.getConfig)().select.optionId;
+      }
+    },
+    // 已废弃，被 option-config.useKey 替换
+    optionKey: Boolean
+  },
+  inject: {
+    $xeModal: {
+      default: null
+    },
+    $xeDrawer: {
+      default: null
+    },
+    $xeTable: {
+      default: null
+    },
+    $xeForm: {
+      default: null
+    },
+    formItemInfo: {
+      from: 'xeFormItemInfo',
+      default: null
+    }
+  },
+  provide: function provide() {
+    var $xeSelect = this;
+    return {
+      $xeSelect: $xeSelect
+    };
+  },
+  data: function data() {
+    var xID = _xeUtils.default.uniqueId();
+    var reactData = {
+      initialized: false,
+      staticOptions: [],
+      fullGroupList: [],
+      fullOptionList: [],
+      visibleGroupList: [],
+      visibleOptionList: [],
+      remoteValueList: [],
+      panelIndex: 0,
+      panelStyle: {},
+      panelPlacement: null,
+      currentOption: null,
+      currentValue: null,
+      triggerFocusPanel: false,
+      visiblePanel: false,
+      isAniVisible: false,
+      isActivated: false,
+      searchValue: '',
+      searchLoading: false
+    };
+    var internalData = {
+      hpTimeout: undefined
+    };
+    return {
+      xID: xID,
+      reactData: reactData,
+      internalData: internalData
+    };
+  },
+  computed: Object.assign(Object.assign({}, {}), {
+    computeFormReadonly: function computeFormReadonly() {
+      var $xeSelect = this;
+      var props = $xeSelect;
+      var $xeForm = $xeSelect.$xeForm;
+      var readonly = props.readonly;
+      if (readonly === null) {
+        if ($xeForm) {
+          return $xeForm.readonly;
+        }
+        return false;
+      }
+      return readonly;
+    },
+    computeIsDisabled: function computeIsDisabled() {
+      var $xeSelect = this;
+      var props = $xeSelect;
+      var $xeForm = $xeSelect.$xeForm;
+      var disabled = props.disabled;
+      if (disabled === null) {
+        if ($xeForm) {
+          return $xeForm.disabled;
+        }
+        return false;
+      }
+      return disabled;
+    },
+    computeBtnTransfer: function computeBtnTransfer() {
+      var $xeSelect = this;
+      var props = $xeSelect;
+      var $xeTable = $xeSelect.$xeTable;
+      var $xeModal = $xeSelect.$xeModal;
+      var $xeDrawer = $xeSelect.$xeDrawer;
+      var $xeForm = $xeSelect.$xeForm;
+      var transfer = props.transfer;
+      if (transfer === null) {
+        var globalTransfer = (0, _ui.getConfig)().select.transfer;
+        if (_xeUtils.default.isBoolean(globalTransfer)) {
+          return globalTransfer;
+        }
+        if ($xeTable || $xeModal || $xeDrawer || $xeForm) {
+          return true;
+        }
+      }
+      return transfer;
+    },
+    computeInpPlaceholder: function computeInpPlaceholder() {
+      var $xeSelect = this;
+      var props = $xeSelect;
+      var placeholder = props.placeholder;
+      if (placeholder) {
+        return (0, _utils.getFuncText)(placeholder);
+      }
+      var globalPlaceholder = (0, _ui.getConfig)().select.placeholder;
+      if (globalPlaceholder) {
+        return (0, _utils.getFuncText)(globalPlaceholder);
+      }
+      return (0, _ui.getI18n)('vxe.base.pleaseSelect');
+    },
+    computePropsOpts: function computePropsOpts() {
+      var $xeSelect = this;
+      var props = $xeSelect;
+      return Object.assign({}, props.optionProps);
+    },
+    computeGroupPropsOpts: function computeGroupPropsOpts() {
+      var $xeSelect = this;
+      var props = $xeSelect;
+      return Object.assign({}, props.optionGroupProps);
+    },
+    computeLabelField: function computeLabelField() {
+      var $xeSelect = this;
+      var propsOpts = $xeSelect.computePropsOpts;
+      return propsOpts.label || 'label';
+    },
+    computeValueField: function computeValueField() {
+      var $xeSelect = this;
+      var propsOpts = $xeSelect.computePropsOpts;
+      return propsOpts.value || 'value';
+    },
+    computeGroupLabelField: function computeGroupLabelField() {
+      var $xeSelect = this;
+      var groupPropsOpts = $xeSelect.computeGroupPropsOpts;
+      return groupPropsOpts.label || 'label';
+    },
+    computeGroupOptionsField: function computeGroupOptionsField() {
+      var $xeSelect = this;
+      var groupPropsOpts = $xeSelect.computeGroupPropsOpts;
+      return groupPropsOpts.options || 'options';
+    },
+    computeIsMaximize: function computeIsMaximize() {
+      var $xeSelect = this;
+      var props = $xeSelect;
+      var value = props.value,
+        multiple = props.multiple,
+        max = props.max;
+      if (multiple && max) {
+        return (_xeUtils.default.isArray(value) ? value.length : _xeUtils.default.eqNull(value) ? 0 : 1) >= _xeUtils.default.toNumber(max);
+      }
+      return false;
+    },
+    computeOptionOpts: function computeOptionOpts() {
+      var $xeSelect = this;
+      var props = $xeSelect;
+      return Object.assign({}, (0, _ui.getConfig)().select.optionConfig, props.optionConfig);
+    },
+    computeIsGroup: function computeIsGroup() {
+      var $xeSelect = this;
+      var reactData = $xeSelect.reactData;
+      return reactData.fullGroupList.some(function (item) {
+        return item.options && item.options.length;
+      });
+    },
+    computeMultiMaxCharNum: function computeMultiMaxCharNum() {
+      var $xeSelect = this;
+      var props = $xeSelect;
+      return _xeUtils.default.toNumber(props.multiCharOverflow);
+    },
+    computeSelectLabel: function computeSelectLabel() {
+      var $xeSelect = this;
+      var props = $xeSelect;
+      var value = props.value,
+        multiple = props.multiple,
+        remote = props.remote;
+      var multiMaxCharNum = $xeSelect.computeMultiMaxCharNum;
+      if (value && multiple) {
+        var vals = _xeUtils.default.isArray(value) ? value : [value];
+        if (remote) {
+          return vals.map(function (val) {
+            return $xeSelect.getRemoteSelectLabel(val);
+          }).join(', ');
+        }
+        return vals.map(function (val) {
+          var label = $xeSelect.getSelectLabel(val);
+          if (multiMaxCharNum > 0 && label.length > multiMaxCharNum) {
+            return "".concat(label.substring(0, multiMaxCharNum), "...");
+          }
+          return label;
+        }).join(', ');
+      }
+      if (remote) {
+        return $xeSelect.getRemoteSelectLabel(value);
+      }
+      return $xeSelect.getSelectLabel(value);
+    }
+  }),
+  methods: {
+    //
+    // Method
+    //
+    dispatchEvent: function dispatchEvent(type, params, evnt) {
+      var $xeSelect = this;
+      $xeSelect.$emit(type, (0, _ui.createEvent)(evnt, {
+        $select: $xeSelect
+      }, params));
+    },
+    emitModel: function emitModel(value) {
+      var $xeSelect = this;
+      $xeSelect.$emit('modelValue', value);
+    },
+    isPanelVisible: function isPanelVisible() {
+      var $xeSelect = this;
+      var reactData = $xeSelect.reactData;
+      return reactData.visiblePanel;
+    },
+    togglePanel: function togglePanel() {
+      var $xeSelect = this;
+      var reactData = $xeSelect.reactData;
+      if (reactData.visiblePanel) {
+        $xeSelect.hideOptionPanel();
+      } else {
+        $xeSelect.showOptionPanel();
+      }
+      return $xeSelect.$nextTick();
+    },
+    hidePanel: function hidePanel() {
+      var $xeSelect = this;
+      var reactData = $xeSelect.reactData;
+      if (reactData.visiblePanel) {
+        $xeSelect.hideOptionPanel();
+      }
+      return $xeSelect.$nextTick();
+    },
+    showPanel: function showPanel() {
+      var $xeSelect = this;
+      var reactData = $xeSelect.reactData;
+      if (!reactData.visiblePanel) {
+        $xeSelect.showOptionPanel();
+      }
+      return $xeSelect.$nextTick();
+    },
+    focus: function focus() {
+      var $xeSelect = this;
+      var reactData = $xeSelect.reactData;
+      var $input = $xeSelect.$refs.refInput;
+      reactData.isActivated = true;
+      $input.blur();
+      return $xeSelect.$nextTick();
+    },
+    blur: function blur() {
+      var $xeSelect = this;
+      var reactData = $xeSelect.reactData;
+      var $input = $xeSelect.$refs.refInput;
+      $input.blur();
+      reactData.isActivated = false;
+      return $xeSelect.$nextTick();
+    },
+    callSlot: function callSlot(slotFunc, params) {
+      var $xeSelect = this;
+      var slots = $xeSelect.$scopedSlots;
+      if (slotFunc) {
+        if (_xeUtils.default.isString(slotFunc)) {
+          slotFunc = slots[slotFunc] || null;
+        }
+        if (_xeUtils.default.isFunction(slotFunc)) {
+          return (0, _vn.getSlotVNs)(slotFunc(params));
+        }
+      }
+      return [];
+    },
+    findOption: function findOption(optionValue) {
+      var $xeSelect = this;
+      var reactData = $xeSelect.reactData;
+      var fullOptionList = reactData.fullOptionList,
+        fullGroupList = reactData.fullGroupList;
+      var isGroup = $xeSelect.computeIsGroup;
+      var valueField = $xeSelect.computeValueField;
+      if (isGroup) {
+        for (var gIndex = 0; gIndex < fullGroupList.length; gIndex++) {
+          var group = fullGroupList[gIndex];
+          if (group.options) {
+            for (var index = 0; index < group.options.length; index++) {
+              var option = group.options[index];
+              if (optionValue === option[valueField]) {
+                return option;
+              }
+            }
+          }
+        }
+      }
+      return fullOptionList.find(function (item) {
+        return optionValue === item[valueField];
+      });
+    },
+    findVisibleOption: function findVisibleOption(optionValue) {
+      var $xeSelect = this;
+      var reactData = $xeSelect.reactData;
+      var visibleOptionList = reactData.visibleOptionList,
+        visibleGroupList = reactData.visibleGroupList;
+      var isGroup = $xeSelect.computeIsGroup;
+      var valueField = $xeSelect.computeValueField;
+      if (isGroup) {
+        for (var gIndex = 0; gIndex < visibleGroupList.length; gIndex++) {
+          var group = visibleGroupList[gIndex];
+          if (group.options) {
+            for (var index = 0; index < group.options.length; index++) {
+              var option = group.options[index];
+              if (optionValue === option[valueField]) {
+                return option;
+              }
+            }
+          }
+        }
+      }
+      return visibleOptionList.find(function (item) {
+        return optionValue === item[valueField];
+      });
+    },
+    getRemoteSelectLabel: function getRemoteSelectLabel(value) {
+      var $xeSelect = this;
+      var reactData = $xeSelect.reactData;
+      var remoteValueList = reactData.remoteValueList;
+      var labelField = $xeSelect.computeLabelField;
+      var remoteItem = remoteValueList.find(function (item) {
+        return value === item.key;
+      });
+      var item = remoteItem ? remoteItem.result : null;
+      return _xeUtils.default.toValueString(item ? item[labelField] : value);
+    },
+    getSelectLabel: function getSelectLabel(value) {
+      var $xeSelect = this;
+      var labelField = $xeSelect.computeLabelField;
+      var item = $xeSelect.findOption(value);
+      return _xeUtils.default.toValueString(item ? item[labelField] : value);
+    },
+    getOptkey: function getOptkey() {
+      var $xeSelect = this;
+      var props = $xeSelect;
+      var optionOpts = $xeSelect.computeOptionOpts;
+      return optionOpts.keyField || props.optionId || '_X_OPTION_KEY';
+    },
+    getOptid: function getOptid(option) {
+      var $xeSelect = this;
+      var optid = option[$xeSelect.getOptkey()];
+      return optid ? encodeURIComponent(optid) : '';
+    },
+    /**
+     * 刷新选项，当选项被动态显示/隐藏时可能会用到
+     */
+    refreshOption: function refreshOption() {
+      var $xeSelect = this;
+      var props = $xeSelect;
+      var reactData = $xeSelect.reactData;
+      var filterable = props.filterable,
+        filterMethod = props.filterMethod;
+      var fullOptionList = reactData.fullOptionList,
+        fullGroupList = reactData.fullGroupList,
+        searchValue = reactData.searchValue;
+      var isGroup = $xeSelect.computeIsGroup;
+      var groupLabelField = $xeSelect.computeGroupLabelField;
+      var labelField = $xeSelect.computeLabelField;
+      var searchStr = "".concat(searchValue || '').toLowerCase();
+      if (isGroup) {
+        if (filterable && filterMethod) {
+          reactData.visibleGroupList = fullGroupList.filter(function (group) {
+            return isOptionVisible(group) && filterMethod({
+              group: group,
+              option: null,
+              searchValue: searchStr
+            });
+          });
+        } else if (filterable) {
+          reactData.visibleGroupList = fullGroupList.filter(function (group) {
+            return isOptionVisible(group) && (!searchStr || "".concat(group[groupLabelField]).toLowerCase().indexOf(searchStr) > -1);
+          });
+        } else {
+          reactData.visibleGroupList = fullGroupList.filter(isOptionVisible);
+        }
+      } else {
+        if (filterable && filterMethod) {
+          reactData.visibleOptionList = fullOptionList.filter(function (option) {
+            return isOptionVisible(option) && filterMethod({
+              group: null,
+              option: option,
+              searchValue: searchStr
+            });
+          });
+        } else if (filterable) {
+          reactData.visibleOptionList = fullOptionList.filter(function (option) {
+            return isOptionVisible(option) && (!searchStr || "".concat(option[labelField]).toLowerCase().indexOf(searchStr) > -1);
+          });
+        } else {
+          reactData.visibleOptionList = fullOptionList.filter(isOptionVisible);
+        }
+      }
+      return $xeSelect.$nextTick();
+    },
+    cacheItemMap: function cacheItemMap() {
+      var $xeSelect = this;
+      var reactData = $xeSelect.reactData;
+      var fullOptionList = reactData.fullOptionList,
+        fullGroupList = reactData.fullGroupList;
+      var groupOptionsField = $xeSelect.computeGroupOptionsField;
+      var key = $xeSelect.getOptkey();
+      var handleOptis = function handleOptis(item) {
+        if (!$xeSelect.getOptid(item)) {
+          item[key] = getOptUniqueId();
+        }
+      };
+      if (fullGroupList.length) {
+        fullGroupList.forEach(function (group) {
+          handleOptis(group);
+          if (group[groupOptionsField]) {
+            group[groupOptionsField].forEach(handleOptis);
+          }
+        });
+      } else if (fullOptionList.length) {
+        fullOptionList.forEach(handleOptis);
+      }
+      $xeSelect.refreshOption();
+    },
+    setCurrentOption: function setCurrentOption(option) {
+      var $xeSelect = this;
+      var reactData = $xeSelect.reactData;
+      var valueField = $xeSelect.computeValueField;
+      if (option) {
+        reactData.currentOption = option;
+        reactData.currentValue = option[valueField];
+      }
+    },
+    scrollToOption: function scrollToOption(option, isAlignBottom) {
+      var $xeSelect = this;
+      return $xeSelect.$nextTick().then(function () {
+        if (option) {
+          var optWrapperElem = $xeSelect.$refs.refOptionWrapper;
+          var panelElem = $xeSelect.$refs.refOptionPanel;
+          var optElem = panelElem.querySelector("[optid='".concat($xeSelect.getOptid(option), "']"));
+          if (optWrapperElem && optElem) {
+            var wrapperHeight = optWrapperElem.offsetHeight;
+            var offsetPadding = 5;
+            if (isAlignBottom) {
+              if (optElem.offsetTop + optElem.offsetHeight - optWrapperElem.scrollTop > wrapperHeight) {
+                optWrapperElem.scrollTop = optElem.offsetTop + optElem.offsetHeight - wrapperHeight;
+              }
+            } else {
+              if (optElem.offsetTop + offsetPadding < optWrapperElem.scrollTop || optElem.offsetTop + offsetPadding > optWrapperElem.scrollTop + optWrapperElem.clientHeight) {
+                optWrapperElem.scrollTop = optElem.offsetTop - offsetPadding;
+              }
+            }
+          }
+        }
+      });
+    },
+    updateZindex: function updateZindex() {
+      var $xeSelect = this;
+      var reactData = $xeSelect.reactData;
+      if (reactData.panelIndex < (0, _utils.getLastZIndex)()) {
+        reactData.panelIndex = (0, _utils.nextZIndex)();
+      }
+    },
+    updatePlacement: function updatePlacement() {
+      var $xeSelect = this;
+      var props = $xeSelect;
+      var reactData = $xeSelect.reactData;
+      return $xeSelect.$nextTick().then(function () {
+        var placement = props.placement;
+        var panelIndex = reactData.panelIndex;
+        var el = $xeSelect.$refs.refElem;
+        var panelElem = $xeSelect.$refs.refOptionPanel;
+        var btnTransfer = $xeSelect.computeBtnTransfer;
+        if (panelElem && el) {
+          var targetHeight = el.offsetHeight;
+          var targetWidth = el.offsetWidth;
+          var panelHeight = panelElem.offsetHeight;
+          var panelWidth = panelElem.offsetWidth;
+          var marginSize = 5;
+          var panelStyle = {
+            zIndex: panelIndex
+          };
+          var _getAbsolutePos = (0, _dom.getAbsolutePos)(el),
+            boundingTop = _getAbsolutePos.boundingTop,
+            boundingLeft = _getAbsolutePos.boundingLeft,
+            visibleHeight = _getAbsolutePos.visibleHeight,
+            visibleWidth = _getAbsolutePos.visibleWidth;
+          var panelPlacement = 'bottom';
+          if (btnTransfer) {
+            var left = boundingLeft;
+            var top = boundingTop + targetHeight;
+            if (placement === 'top') {
+              panelPlacement = 'top';
+              top = boundingTop - panelHeight;
+            } else if (!placement) {
+              // 如果下面不够放，则向上
+              if (top + panelHeight + marginSize > visibleHeight) {
+                panelPlacement = 'top';
+                top = boundingTop - panelHeight;
+              }
+              // 如果上面不够放，则向下（优先）
+              if (top < marginSize) {
+                panelPlacement = 'bottom';
+                top = boundingTop + targetHeight;
+              }
+            }
+            // 如果溢出右边
+            if (left + panelWidth + marginSize > visibleWidth) {
+              left -= left + panelWidth + marginSize - visibleWidth;
+            }
+            // 如果溢出左边
+            if (left < marginSize) {
+              left = marginSize;
+            }
+            Object.assign(panelStyle, {
+              left: "".concat(left, "px"),
+              top: "".concat(top, "px"),
+              minWidth: "".concat(targetWidth, "px")
+            });
+          } else {
+            if (placement === 'top') {
+              panelPlacement = 'top';
+              panelStyle.bottom = "".concat(targetHeight, "px");
+            } else if (!placement) {
+              // 如果下面不够放，则向上
+              if (boundingTop + targetHeight + panelHeight > visibleHeight) {
+                // 如果上面不够放，则向下（优先）
+                if (boundingTop - targetHeight - panelHeight > marginSize) {
+                  panelPlacement = 'top';
+                  panelStyle.bottom = "".concat(targetHeight, "px");
+                }
+              }
+            }
+          }
+          reactData.panelStyle = panelStyle;
+          reactData.panelPlacement = panelPlacement;
+          return $xeSelect.$nextTick();
+        }
+      });
+    },
+    showOptionPanel: function showOptionPanel() {
+      var $xeSelect = this;
+      var props = $xeSelect;
+      var reactData = $xeSelect.reactData;
+      var internalData = $xeSelect.internalData;
+      var loading = props.loading,
+        filterable = props.filterable;
+      var hpTimeout = internalData.hpTimeout;
+      var isDisabled = $xeSelect.computeIsDisabled;
+      if (!loading && !isDisabled) {
+        if (hpTimeout) {
+          clearTimeout(hpTimeout);
+          internalData.hpTimeout = undefined;
+        }
+        if (!reactData.initialized) {
+          reactData.initialized = true;
+          var btnTransfer = $xeSelect.computeBtnTransfer;
+          var panelElem = $xeSelect.$refs.refOptionPanel;
+          if (btnTransfer) {
+            if (panelElem) {
+              document.body.appendChild(panelElem);
+            }
+          }
+        }
+        reactData.isActivated = true;
+        reactData.isAniVisible = true;
+        if (filterable) {
+          $xeSelect.refreshOption();
+        }
+        setTimeout(function () {
+          var value = props.value;
+          var currOption = $xeSelect.findOption(_xeUtils.default.isArray(value) ? value[0] : value);
+          reactData.visiblePanel = true;
+          if (currOption) {
+            $xeSelect.setCurrentOption(currOption);
+            $xeSelect.scrollToOption(currOption);
+          }
+          $xeSelect.handleFocusSearch();
+        }, 10);
+        $xeSelect.updateZindex();
+        $xeSelect.updatePlacement();
+      }
+    },
+    hideOptionPanel: function hideOptionPanel() {
+      var $xeSelect = this;
+      var reactData = $xeSelect.reactData;
+      var internalData = $xeSelect.internalData;
+      reactData.searchValue = '';
+      reactData.searchLoading = false;
+      reactData.visiblePanel = false;
+      internalData.hpTimeout = window.setTimeout(function () {
+        reactData.isAniVisible = false;
+      }, 350);
+    },
+    changeEvent: function changeEvent(evnt, selectValue) {
+      var $xeSelect = this;
+      var props = $xeSelect;
+      var $xeForm = $xeSelect.$xeForm;
+      var formItemInfo = $xeSelect.formItemInfo;
+      $xeSelect.emitModel(selectValue);
+      if (selectValue !== props.value) {
+        $xeSelect.dispatchEvent('change', {
+          value: selectValue
+        }, evnt);
+        // 自动更新校验状态
+        if ($xeForm && formItemInfo) {
+          $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, selectValue);
+        }
+      }
+    },
+    clearValueEvent: function clearValueEvent(evnt, selectValue) {
+      var $xeSelect = this;
+      var reactData = $xeSelect.reactData;
+      reactData.remoteValueList = [];
+      $xeSelect.changeEvent(evnt, selectValue);
+      $xeSelect.dispatchEvent('clear', {
+        value: selectValue
+      }, evnt);
+    },
+    clearEvent: function clearEvent(params, evnt) {
+      var $xeSelect = this;
+      $xeSelect.clearValueEvent(evnt, null);
+      $xeSelect.hideOptionPanel();
+    },
+    changeOptionEvent: function changeOptionEvent(evnt, selectValue, option) {
+      var $xeSelect = this;
+      var props = $xeSelect;
+      var reactData = $xeSelect.reactData;
+      var value = props.value,
+        multiple = props.multiple;
+      var remoteValueList = reactData.remoteValueList;
+      if (multiple) {
+        var multipleValue = [];
+        var selectVals = _xeUtils.default.eqNull(value) ? [] : _xeUtils.default.isArray(value) ? value : [value];
+        var index = _xeUtils.default.findIndexOf(selectVals, function (val) {
+          return val === selectValue;
+        });
+        if (index === -1) {
+          multipleValue = selectVals.concat([selectValue]);
+        } else {
+          multipleValue = selectVals.filter(function (val) {
+            return val !== selectValue;
+          });
+        }
+        var remoteItem = remoteValueList.find(function (item) {
+          return item.key === selectValue;
+        });
+        if (remoteItem) {
+          remoteItem.result = option;
+        } else {
+          remoteValueList.push({
+            key: selectValue,
+            result: option
+          });
+        }
+        $xeSelect.changeEvent(evnt, multipleValue);
+      } else {
+        reactData.remoteValueList = [{
+          key: selectValue,
+          result: option
+        }];
+        $xeSelect.changeEvent(evnt, selectValue);
+        $xeSelect.hideOptionPanel();
+      }
+    },
+    handleGlobalMousewheelEvent: function handleGlobalMousewheelEvent(evnt) {
+      var $xeSelect = this;
+      var reactData = $xeSelect.reactData;
+      var visiblePanel = reactData.visiblePanel;
+      var isDisabled = $xeSelect.computeIsDisabled;
+      if (!isDisabled) {
+        if (visiblePanel) {
+          var panelElem = $xeSelect.$refs.refOptionPanel;
+          if ((0, _dom.getEventTargetNode)(evnt, panelElem).flag) {
+            $xeSelect.updatePlacement();
+          } else {
+            $xeSelect.hideOptionPanel();
+          }
+        }
+      }
+    },
+    handleGlobalMousedownEvent: function handleGlobalMousedownEvent(evnt) {
+      var $xeSelect = this;
+      var reactData = $xeSelect.reactData;
+      var visiblePanel = reactData.visiblePanel;
+      var isDisabled = $xeSelect.computeIsDisabled;
+      if (!isDisabled) {
+        var el = $xeSelect.$refs.refElem;
+        var panelElem = $xeSelect.$refs.refOptionPanel;
+        reactData.isActivated = (0, _dom.getEventTargetNode)(evnt, el).flag || (0, _dom.getEventTargetNode)(evnt, panelElem).flag;
+        if (visiblePanel && !reactData.isActivated) {
+          $xeSelect.hideOptionPanel();
+        }
+      }
+    },
+    findOffsetOption: function findOffsetOption(optionValue, isUpArrow) {
+      var $xeSelect = this;
+      var reactData = $xeSelect.reactData;
+      var visibleOptionList = reactData.visibleOptionList,
+        visibleGroupList = reactData.visibleGroupList;
+      var isGroup = $xeSelect.computeIsGroup;
+      var valueField = $xeSelect.computeValueField;
+      var groupOptionsField = $xeSelect.computeGroupOptionsField;
+      var firstOption;
+      var prevOption;
+      var nextOption;
+      var currOption;
+      if (isGroup) {
+        for (var gIndex = 0; gIndex < visibleGroupList.length; gIndex++) {
+          var group = visibleGroupList[gIndex];
+          var groupOptionList = group[groupOptionsField];
+          var isGroupDisabled = group.disabled;
+          if (groupOptionList) {
+            for (var index = 0; index < groupOptionList.length; index++) {
+              var option = groupOptionList[index];
+              var isVisible = isOptionVisible(option);
+              var isDisabled = isGroupDisabled || option.disabled;
+              if (!firstOption && !isDisabled) {
+                firstOption = option;
+              }
+              if (currOption) {
+                if (isVisible && !isDisabled) {
+                  nextOption = option;
+                  if (!isUpArrow) {
+                    return {
+                      offsetOption: nextOption
+                    };
+                  }
+                }
+              }
+              if (optionValue === option[valueField]) {
+                currOption = option;
+                if (isUpArrow) {
+                  return {
+                    offsetOption: prevOption
+                  };
+                }
+              } else {
+                if (isVisible && !isDisabled) {
+                  prevOption = option;
+                }
+              }
+            }
+          }
+        }
+      } else {
+        for (var _index = 0; _index < visibleOptionList.length; _index++) {
+          var _option = visibleOptionList[_index];
+          var _isDisabled = _option.disabled;
+          if (!firstOption && !_isDisabled) {
+            firstOption = _option;
+          }
+          if (currOption) {
+            if (!_isDisabled) {
+              nextOption = _option;
+              if (!isUpArrow) {
+                return {
+                  offsetOption: nextOption
+                };
+              }
+            }
+          }
+          if (optionValue === _option[valueField]) {
+            currOption = _option;
+            if (isUpArrow) {
+              return {
+                offsetOption: prevOption
+              };
+            }
+          } else {
+            if (!_isDisabled) {
+              prevOption = _option;
+            }
+          }
+        }
+      }
+      return {
+        firstOption: firstOption
+      };
+    },
+    handleGlobalKeydownEvent: function handleGlobalKeydownEvent(evnt) {
+      var $xeSelect = this;
+      var props = $xeSelect;
+      var reactData = $xeSelect.reactData;
+      var clearable = props.clearable;
+      var visiblePanel = reactData.visiblePanel,
+        currentValue = reactData.currentValue,
+        currentOption = reactData.currentOption;
+      var isDisabled = $xeSelect.computeIsDisabled;
+      if (!isDisabled) {
+        var isTab = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.TAB);
+        var isEnter = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ENTER);
+        var isEsc = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ESCAPE);
+        var isUpArrow = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ARROW_UP);
+        var isDwArrow = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ARROW_DOWN);
+        var isDel = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.DELETE);
+        var isSpacebar = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.SPACEBAR);
+        if (isTab) {
+          reactData.isActivated = false;
+        }
+        if (visiblePanel) {
+          if (isEsc || isTab) {
+            $xeSelect.hideOptionPanel();
+          } else if (isEnter) {
+            evnt.preventDefault();
+            evnt.stopPropagation();
+            $xeSelect.changeOptionEvent(evnt, currentValue, currentOption);
+          } else if (isUpArrow || isDwArrow) {
+            evnt.preventDefault();
+            var _$xeSelect$findOffset = $xeSelect.findOffsetOption(currentValue, isUpArrow),
+              firstOption = _$xeSelect$findOffset.firstOption,
+              offsetOption = _$xeSelect$findOffset.offsetOption;
+            if (!offsetOption && !$xeSelect.findVisibleOption(currentValue)) {
+              offsetOption = firstOption;
+            }
+            $xeSelect.setCurrentOption(offsetOption);
+            $xeSelect.scrollToOption(offsetOption, isDwArrow);
+          } else if (isSpacebar) {
+            evnt.preventDefault();
+          }
+        } else if ((isUpArrow || isDwArrow || isEnter || isSpacebar) && reactData.isActivated) {
+          evnt.preventDefault();
+          $xeSelect.showOptionPanel();
+        }
+        if (reactData.isActivated) {
+          if (isDel && clearable) {
+            $xeSelect.clearValueEvent(evnt, null);
+          }
+        }
+      }
+    },
+    handleGlobalBlurEvent: function handleGlobalBlurEvent() {
+      var $xeSelect = this;
+      $xeSelect.hideOptionPanel();
+    },
+    handleFocusSearch: function handleFocusSearch() {
+      var $xeSelect = this;
+      var props = $xeSelect;
+      if (props.filterable) {
+        $xeSelect.$nextTick(function () {
+          var inpSearch = $xeSelect.$refs.refInpSearch;
+          if (inpSearch) {
+            inpSearch.focus();
+          }
+        });
+      }
+    },
+    focusEvent: function focusEvent(evnt) {
+      var $xeSelect = this;
+      var reactData = $xeSelect.reactData;
+      var isDisabled = $xeSelect.computeIsDisabled;
+      if (!isDisabled) {
+        if (!reactData.visiblePanel) {
+          reactData.triggerFocusPanel = true;
+          $xeSelect.showOptionPanel();
+          setTimeout(function () {
+            reactData.triggerFocusPanel = false;
+          }, 150);
+        }
+      }
+      $xeSelect.dispatchEvent('focus', {}, evnt);
+    },
+    clickEvent: function clickEvent(evnt) {
+      var $xeSelect = this;
+      $xeSelect.togglePanelEvent(evnt);
+      $xeSelect.dispatchEvent('click', {}, evnt);
+    },
+    blurEvent: function blurEvent(evnt) {
+      var $xeSelect = this;
+      var reactData = $xeSelect.reactData;
+      reactData.isActivated = false;
+      $xeSelect.dispatchEvent('blur', {}, evnt);
+    },
+    modelSearchEvent: function modelSearchEvent(value) {
+      var $xeSelect = this;
+      var reactData = $xeSelect.reactData;
+      reactData.searchValue = value;
+    },
+    focusSearchEvent: function focusSearchEvent() {
+      var $xeSelect = this;
+      var reactData = $xeSelect.reactData;
+      reactData.isActivated = true;
+    },
+    handleSearchEvent: function handleSearchEvent() {
+      var $xeSelect = this;
+      var props = $xeSelect;
+      var reactData = $xeSelect.reactData;
+      var remote = props.remote,
+        remoteMethod = props.remoteMethod;
+      var searchValue = reactData.searchValue;
+      if (remote && remoteMethod) {
+        reactData.searchLoading = true;
+        Promise.resolve(remoteMethod({
+          searchValue: searchValue
+        })).then(function () {
+          return $xeSelect.$nextTick();
+        }).catch(function () {
+          return $xeSelect.$nextTick();
+        }).finally(function () {
+          reactData.searchLoading = false;
+          $xeSelect.refreshOption();
+        });
+      } else {
+        $xeSelect.refreshOption();
+      }
+    },
+    triggerSearchEvent: _xeUtils.default.debounce(function () {
+      var $xeSelect = this;
+      $xeSelect.handleSearchEvent();
+    }, 350, {
+      trailing: true
+    }),
+    togglePanelEvent: function togglePanelEvent(params) {
+      var $xeSelect = this;
+      var reactData = $xeSelect.reactData;
+      var $event = params.$event;
+      $event.preventDefault();
+      if (reactData.triggerFocusPanel) {
+        reactData.triggerFocusPanel = false;
+      } else {
+        if (reactData.visiblePanel) {
+          $xeSelect.hideOptionPanel();
+        } else {
+          $xeSelect.showOptionPanel();
+        }
+      }
+    },
+    checkOptionDisabled: function checkOptionDisabled(isSelected, option, group) {
+      var $xeSelect = this;
+      if (option.disabled) {
+        return true;
+      }
+      if (group && group.disabled) {
+        return true;
+      }
+      var isMaximize = $xeSelect.computeIsMaximize;
+      if (isMaximize && !isSelected) {
+        return true;
+      }
+      return false;
+    },
+    //
+    // Render
+    //
+    renderOption: function renderOption(h, list, group) {
+      var $xeSelect = this;
+      var props = $xeSelect;
+      var slots = $xeSelect.$scopedSlots;
+      var reactData = $xeSelect.reactData;
+      var optionKey = props.optionKey,
+        value = props.value;
+      var currentValue = reactData.currentValue;
+      var optionOpts = $xeSelect.computeOptionOpts;
+      var labelField = $xeSelect.computeLabelField;
+      var valueField = $xeSelect.computeValueField;
+      var isGroup = $xeSelect.computeIsGroup;
+      var useKey = optionOpts.useKey;
+      var optionSlot = slots.option;
+      return list.map(function (option, cIndex) {
+        var slots = option.slots,
+          className = option.className;
+        var optionValue = option[valueField];
+        var isSelected = _xeUtils.default.isArray(value) ? value.indexOf(optionValue) > -1 : value === optionValue;
+        var isVisible = !isGroup || isOptionVisible(option);
+        var isDisabled = $xeSelect.checkOptionDisabled(isSelected, option, group);
+        var optid = $xeSelect.getOptid(option);
+        var defaultSlot = slots ? slots.default : null;
+        var optParams = {
+          option: option,
+          group: null,
+          $select: $xeSelect
+        };
+        return isVisible ? h('div', {
+          key: useKey || optionKey ? optid : cIndex,
+          class: ['vxe-select-option', className ? _xeUtils.default.isFunction(className) ? className(optParams) : className : '', {
+            'is--disabled': isDisabled,
+            'is--selected': isSelected,
+            'is--hover': currentValue === optionValue
+          }],
+          attrs: {
+            optid: optid
+          },
+          on: {
+            mousedown: function mousedown(evnt) {
+              var isLeftBtn = evnt.button === 0;
+              if (isLeftBtn) {
+                evnt.stopPropagation();
+              }
+            },
+            click: function click(evnt) {
+              if (!isDisabled) {
+                $xeSelect.changeOptionEvent(evnt, optionValue, option);
+              }
+            },
+            mouseenter: function mouseenter() {
+              if (!isDisabled) {
+                $xeSelect.setCurrentOption(option);
+              }
+            }
+          }
+        }, optionSlot ? $xeSelect.callSlot(optionSlot, optParams) : defaultSlot ? $xeSelect.callSlot(defaultSlot, optParams) : (0, _utils.getFuncText)(option[labelField])) : (0, _ui.renderEmptyElement)($xeSelect);
+      });
+    },
+    renderOptgroup: function renderOptgroup(h) {
+      var $xeSelect = this;
+      var props = $xeSelect;
+      var slots = $xeSelect.$scopedSlots;
+      var reactData = $xeSelect.reactData;
+      var optionKey = props.optionKey;
+      var visibleGroupList = reactData.visibleGroupList;
+      var optionOpts = $xeSelect.computeOptionOpts;
+      var groupLabelField = $xeSelect.computeGroupLabelField;
+      var groupOptionsField = $xeSelect.computeGroupOptionsField;
+      var useKey = optionOpts.useKey;
+      var optionSlot = slots.option;
+      return visibleGroupList.map(function (group, gIndex) {
+        var slots = group.slots,
+          className = group.className;
+        var optid = $xeSelect.getOptid(group);
+        var isGroupDisabled = group.disabled;
+        var defaultSlot = slots ? slots.default : null;
+        var optParams = {
+          option: group,
+          group: group,
+          $select: $xeSelect
+        };
+        return h('div', {
+          key: useKey || optionKey ? optid : gIndex,
+          class: ['vxe-optgroup', className ? _xeUtils.default.isFunction(className) ? className(optParams) : className : '', {
+            'is--disabled': isGroupDisabled
+          }],
+          attrs: {
+            optid: optid
+          }
+        }, [h('div', {
+          class: 'vxe-optgroup--title'
+        }, optionSlot ? $xeSelect.callSlot(optionSlot, optParams) : defaultSlot ? $xeSelect.callSlot(defaultSlot, optParams) : (0, _utils.getFuncText)(group[groupLabelField])), h('div', {
+          class: 'vxe-optgroup--wrapper'
+        }, $xeSelect.renderOption(h, group[groupOptionsField] || [], group))]);
+      });
+    },
+    renderOpts: function renderOpts(h) {
+      var $xeSelect = this;
+      var props = $xeSelect;
+      var reactData = $xeSelect.reactData;
+      var visibleGroupList = reactData.visibleGroupList,
+        visibleOptionList = reactData.visibleOptionList,
+        searchLoading = reactData.searchLoading;
+      var isGroup = $xeSelect.computeIsGroup;
+      if (searchLoading) {
+        return [h('div', {
+          class: 'vxe-select--search-loading'
+        }, [h('i', {
+          class: ['vxe-select--search-icon', (0, _ui.getIcon)().SELECT_LOADED]
+        }), h('span', {
+          class: 'vxe-select--search-text'
+        }, (0, _ui.getI18n)('vxe.select.loadingText'))])];
+      }
+      if (isGroup) {
+        if (visibleGroupList.length) {
+          return $xeSelect.renderOptgroup(h);
+        }
+      } else {
+        if (visibleOptionList.length) {
+          return $xeSelect.renderOption(h, visibleOptionList);
+        }
+      }
+      return [h('div', {
+        class: 'vxe-select--empty-placeholder'
+      }, props.emptyText || (0, _ui.getI18n)('vxe.select.emptyText'))];
+    },
+    renderVN: function renderVN(h) {
+      var $xeSelect = this;
+      var props = $xeSelect;
+      var slots = $xeSelect.$scopedSlots;
+      var reactData = $xeSelect.reactData;
+      var className = props.className,
+        popupClassName = props.popupClassName,
+        loading = props.loading,
+        filterable = props.filterable;
+      var initialized = reactData.initialized,
+        isActivated = reactData.isActivated,
+        visiblePanel = reactData.visiblePanel;
+      var vSize = $xeSelect.computeSize;
+      var isDisabled = $xeSelect.computeIsDisabled;
+      var selectLabel = $xeSelect.computeSelectLabel;
+      var btnTransfer = $xeSelect.computeBtnTransfer;
+      var formReadonly = $xeSelect.computeFormReadonly;
+      var inpPlaceholder = $xeSelect.computeInpPlaceholder;
+      var defaultSlot = slots.default;
+      var headerSlot = slots.header;
+      var footerSlot = slots.footer;
+      var prefixSlot = slots.prefix;
+      if (formReadonly) {
+        return h('div', {
+          ref: 'refElem',
+          class: ['vxe-select--readonly', className]
+        }, [h('div', {
+          class: 'vxe-select-slots',
+          ref: 'hideOption'
+        }, defaultSlot ? defaultSlot({}) : []), h('span', {
+          class: 'vxe-select-label'
+        }, [selectLabel])]);
+      }
+      return h('div', {
+        ref: 'refElem',
+        class: ['vxe-select', className ? _xeUtils.default.isFunction(className) ? className({
+          $select: $xeSelect
+        }) : className : '', _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "size--".concat(vSize), vSize), 'is--visible', visiblePanel), 'is--disabled', isDisabled), 'is--filter', filterable), 'is--loading', loading), 'is--active', isActivated)]
+      }, [h('div', {
+        class: 'vxe-select-slots',
+        ref: 'hideOption'
+      }, defaultSlot ? defaultSlot({}) : []), h(_input.default, {
+        ref: 'refInput',
+        props: {
+          clearable: props.clearable,
+          placeholder: inpPlaceholder,
+          readonly: true,
+          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,
+          value: selectLabel
+        },
+        on: {
+          clear: $xeSelect.clearEvent,
+          click: $xeSelect.clickEvent,
+          focus: $xeSelect.focusEvent,
+          blur: $xeSelect.blurEvent,
+          suffixClick: $xeSelect.togglePanelEvent
+        },
+        scopedSlots: prefixSlot ? {
+          prefix: function prefix() {
+            return prefixSlot({});
+          }
+        } : {}
+      }), h('div', {
+        ref: 'refOptionPanel',
+        class: ['vxe-table--ignore-clear vxe-select--panel', popupClassName ? _xeUtils.default.isFunction(popupClassName) ? popupClassName({
+          $select: $xeSelect
+        }) : popupClassName : '', _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "size--".concat(vSize), vSize), 'is--transfer', btnTransfer), 'ani--leave', !loading && reactData.isAniVisible), 'ani--enter', !loading && visiblePanel)],
+        attrs: {
+          placement: reactData.panelPlacement
+        },
+        style: reactData.panelStyle
+      }, initialized ? [filterable ? h('div', {
+        class: 'vxe-select--panel-search'
+      }, [h(_input.default, {
+        ref: 'refInpSearch',
+        class: 'vxe-select-search--input',
+        props: {
+          value: reactData.searchValue,
+          clearable: true,
+          placeholder: (0, _ui.getI18n)('vxe.select.search'),
+          prefixIcon: (0, _ui.getIcon)().INPUT_SEARCH
+        },
+        on: {
+          modelValue: $xeSelect.modelSearchEvent,
+          focus: $xeSelect.focusSearchEvent,
+          change: $xeSelect.triggerSearchEvent,
+          search: $xeSelect.triggerSearchEvent
+        }
+      })]) : (0, _ui.renderEmptyElement)($xeSelect), h('div', {
+        class: 'vxe-select--panel-wrapper'
+      }, [headerSlot ? h('div', {
+        class: 'vxe-select--panel-header'
+      }, headerSlot({})) : (0, _ui.renderEmptyElement)($xeSelect), h('div', {
+        class: 'vxe-select--panel-body'
+      }, [h('div', {
+        ref: 'refOptionWrapper',
+        class: 'vxe-select-option--wrapper'
+      }, $xeSelect.renderOpts(h))]), footerSlot ? h('div', {
+        class: 'vxe-select--panel-footer'
+      }, footerSlot({})) : (0, _ui.renderEmptyElement)($xeSelect)])] : [])]);
+    }
+  },
+  watch: {
+    'reactData.staticOptions': function reactDataStaticOptions(val) {
+      var $xeSelect = this;
+      var reactData = $xeSelect.reactData;
+      if (val.some(function (item) {
+        return item.options && item.options.length;
+      })) {
+        reactData.fullOptionList = [];
+        reactData.fullGroupList = val;
+      } else {
+        reactData.fullGroupList = [];
+        reactData.fullOptionList = val || [];
+      }
+      $xeSelect.cacheItemMap();
+    },
+    options: function options(val) {
+      var $xeSelect = this;
+      var reactData = $xeSelect.reactData;
+      reactData.fullGroupList = [];
+      reactData.fullOptionList = val || [];
+      $xeSelect.cacheItemMap();
+    },
+    optionGroups: function optionGroups(val) {
+      var $xeSelect = this;
+      var reactData = $xeSelect.reactData;
+      reactData.fullOptionList = [];
+      reactData.fullGroupList = val || [];
+      $xeSelect.cacheItemMap();
+    }
+  },
+  mounted: function mounted() {
+    var $xeSelect = this;
+    var props = $xeSelect;
+    var reactData = $xeSelect.reactData;
+    $xeSelect.$nextTick(function () {
+      var options = props.options,
+        optionGroups = props.optionGroups;
+      if (optionGroups) {
+        reactData.fullGroupList = optionGroups;
+      } else if (options) {
+        reactData.fullOptionList = options;
+      }
+      $xeSelect.cacheItemMap();
+    });
+    _ui.globalEvents.on($xeSelect, 'mousewheel', $xeSelect.handleGlobalMousewheelEvent);
+    _ui.globalEvents.on($xeSelect, 'mousedown', $xeSelect.handleGlobalMousedownEvent);
+    _ui.globalEvents.on($xeSelect, 'keydown', $xeSelect.handleGlobalKeydownEvent);
+    _ui.globalEvents.on($xeSelect, 'blur', $xeSelect.handleGlobalBlurEvent);
+  },
+  beforeDestroy: function beforeDestroy() {
+    var $xeSelect = this;
+    var panelElem = $xeSelect.$refs.refOptionPanel;
+    if (panelElem && panelElem.parentNode) {
+      panelElem.parentNode.removeChild(panelElem);
+    }
+    _ui.globalEvents.off($xeSelect, 'mousewheel');
+    _ui.globalEvents.off($xeSelect, 'mousedown');
+    _ui.globalEvents.off($xeSelect, 'keydown');
+    _ui.globalEvents.off($xeSelect, 'blur');
+  },
+  render: function render(h) {
+    return this.renderVN(h);
+  }
+});