misp-ui-library-test 0.0.1

package/src/packages/select/src/main.vue

@@ -0,0 +1,1055 @@
+<template>
+  <div
+    v-resize="handleResize"
+    v-clickoutside="handleClose"
+    class="ui-select"
+    :class="[selectSize ? 'ui-select--' + selectSize : '', autoSize ? 'is-autosize' : '']"
+    :style="autoSizeStyle"
+    @click.stop="toggleMenu"
+  >
+    <div class="ui-select__tags" v-if="multiple" ref="tags" :style="{ 'max-width': inputWidth - 32 + 'px', width: '100%' }">
+      <span v-if="collapseTags && selected.length">
+        <ui-tag :closable="!selectDisabled" :size="collapseTagSize" :hit="selected[0].hitState" type="info" @close="deleteTag($event, selected[0])" disable-transitions>
+          <span class="ui-select__tags-text">{{ selected[0].currentLabel }}</span>
+        </ui-tag>
+        <ui-tag v-if="selected.length > 1" :closable="false" :size="collapseTagSize" type="info" disable-transitions>
+          <span class="ui-select__tags-text multi-count">+ {{ selected.length - 1 }}</span>
+        </ui-tag>
+      </span>
+      <transition-group @after-leave="resetInputHeight" v-if="!collapseTags">
+        <ui-tag v-for="item in selected" :key="getValueKey(item)" :closable="!selectDisabled" :size="collapseTagSize" :hit="item.hitState" type="info" @close="deleteTag($event, item)" disable-transitions>
+          <span class="ui-select__tags-text">{{ item.currentLabel }}</span>
+        </ui-tag>
+      </transition-group>
+      <input
+        v-if="filterable"
+        ref="input"
+        type="text"
+        class="ui-select__input"
+        :class="[selectSize ? `is-${selectSize}` : '']"
+        :style="{ 'flex-grow': '1', width: inputLength / (inputWidth - 32) + '%', 'max-width': inputWidth - 42 + 'px' }"
+        v-model="query"
+        :disabled="selectDisabled"
+        :autocomplete="autocomplete"
+        @focus="handleFocus"
+        @blur="softFocus = false"
+        @keyup="managePlaceholder"
+        @keydown="resetInputState"
+        @keydown.down.prevent="handleNavigate('next')"
+        @keydown.up.prevent="handleNavigate('prev')"
+        @keydown.enter.prevent="selectOption"
+        @keydown.esc.stop.prevent="visible = false"
+        @keydown.delete="deletePrevTag"
+        @keydown.tab="visible = false"
+        @compositionstart="handleComposition"
+        @compositionupdate="handleComposition"
+        @compositionend="handleComposition"
+        @input="debouncedQueryChange"
+      />
+    </div>
+    <ui-input
+      ref="reference"
+      v-model="selectedLabel"
+      type="text"
+      :placeholder="currentPlaceholder"
+      :name="name"
+      :id="id"
+      :autocomplete="autocomplete"
+      :size="selectSize"
+      :disabled="selectDisabled"
+      :readonly="readonly"
+      :validate-event="false"
+      :class="{ 'is-focus': visible }"
+      :tabindex="multiple && filterable ? '-1' : null"
+      @focus="handleFocus"
+      @blur="handleBlur"
+      @input="debouncedOnInputChange"
+      @keydown.native.down.stop.prevent="handleNavigate('next')"
+      @keydown.native.up.stop.prevent="handleNavigate('prev')"
+      @keydown.native.enter.prevent="selectOption"
+      @keydown.native.esc.stop.prevent="visible = false"
+      @keydown.native.tab="visible = false"
+      @compositionstart="handleComposition"
+      @compositionupdate="handleComposition"
+      @compositionend="handleComposition"
+      @mouseenter.native="inputHovering = true"
+      @mouseleave.native="inputHovering = false"
+    >
+      <template v-if="$slots.prefix || $scopedSlots.prefix" slot="prefix"><slot name="prefix"></slot></template>
+      <template slot="suffix">
+        <i v-show="!showClose" :class="['ui-select__caret', 'ui-input__icon', 'ui-icon-' + iconClass]" />
+        <i v-if="showClose" class="ui-select__caret ui-input__icon ui-icon-circle-close" @click="handleClearClick" />
+      </template>
+    </ui-input>
+    <transition name="ui-zoom-in-top" @before-enter="handleMenuEnter" @after-leave="doDestroy">
+      <ui-select-menu v-show="visible && emptyText !== false" ref="popper" :append-to-body="popperAppendToBody">
+        <div class="ui-scrollbar">
+          <div class="ui-select-dropdown__wrap ui-scrollbar__wrap ui-scrollbar__wrap--hidden-default">
+            <ul v-show="options.length > 0 && !loading" ref="scrollbar" :class="{ 'ui-select-dropdown__list': true, 'is-empty': !allowCreate && query && filteredOptionsCount === 0 }">
+              <ui-option :value="query" created v-if="showNewOption" />
+              <slot></slot>
+            </ul>
+          </div>
+        </div>
+        <template v-if="emptyText && (!allowCreate || loading || (allowCreate && options.length === 0))">
+          <slot v-if="$slots.empty || $scopedSlots.empty" name="empty"></slot>
+          <p v-else class="ui-select-dropdown__empty">
+            {{ emptyText }}
+          </p>
+        </template>
+      </ui-select-menu>
+    </transition>
+  </div>
+</template>
+
+<script>
+import UiInput from '../../input'
+import UiTag from '../../tag'
+import UiSelectMenu from './select-dropdown.vue'
+import UiOption from './option.vue'
+
+import emitter from '../../../mixins/emitter.js'
+import focus from '../../../mixins/focus.js'
+import locale from '../../../mixins/locale.js'
+import navigationMixin from './navigation-mixin'
+import clickoutside from '../../../directives/clickoutside'
+import resize from '../../../directives/resize'
+import { debounce, get, isEqual, isKorean } from '../../../utils/lodash'
+import { scrollIntoView, getStyle, getTextWidth } from '../../../utils/dom'
+import { isIE, isEdge } from '../../../utils/browser'
+
+/**
+ * UiSelect 选择器组件
+ * 当选项过多时，使用下拉菜单展示并选择内容。
+ * @component UiSelect
+ */
+export default {
+  name: 'UiSelect',
+  components: { UiInput, UiSelectMenu, UiOption, UiTag },
+  mixins: [emitter, locale, focus('reference'), navigationMixin],
+  directives: { clickoutside, resize },
+  inject: {
+    uiForm: { default: '' },
+    uiFormItem: { default: '' },
+  },
+  props: {
+    /**
+     * native input 原生属性 name
+     * @type {String}
+     */
+    name: String,
+    /**
+     * native input 原生属性 id
+     * @type {String}
+     */
+    id: String,
+    /**
+     * 绑定值
+     * @type {string|number|boolean|object|array}
+     * @required
+     */
+    value: { required: true },
+    /**
+     * 原生属性 autocomplete
+     * @type {String}
+     * @default 'off'
+     */
+    autocomplete: { type: String, default: 'off' },
+    /**
+     * 是否自动弹出下拉框
+     * @type {Boolean}
+     */
+    automaticDropdown: Boolean,
+    /**
+     * 选择器尺寸
+     * @type {String}
+     * @values 'medium'|'small'|'mini'
+     */
+    size: String,
+    /**
+     * 是否自适应大小
+     * @type {Boolean}
+     */
+    autoSize: Boolean,
+    /**
+     * 是否禁用
+     * @type {Boolean}
+     */
+    disabled: Boolean,
+    /**
+     * 是否可以清空选项
+     * @type {Boolean}
+     */
+    clearable: Boolean,
+    /**
+     * 是否可搜索
+     * @type {Boolean}
+     */
+    filterable: Boolean,
+    /**
+     * 是否允许用户创建新条目，需配合 filterable 使用
+     * @type {Boolean}
+     */
+    allowCreate: Boolean,
+    /**
+     * 是否正在从远程获取数据
+     * @type {Boolean}
+     */
+    loading: Boolean,
+    /**
+     * Select 下拉框的类名
+     * @type {String}
+     */
+    popperClass: String,
+    /**
+     * 是否为远程搜索
+     * @type {Boolean}
+     */
+    remote: Boolean,
+    /**
+     * 远程加载时显示的文字
+     * @type {String}
+     */
+    loadingText: String,
+    /**
+     * 搜索条件无匹配时显示的文字
+     * @type {String}
+     */
+    noMatchText: String,
+    /**
+     * 选项为空时显示的文字
+     * @type {String}
+     */
+    noDataText: String,
+    /**
+     * 远程搜索方法
+     * @type {Function}
+     */
+    remoteMethod: Function,
+    /**
+     * 自定义搜索方法
+     * @type {Function}
+     */
+    filterMethod: Function,
+    /**
+     * 是否多选
+     * @type {Boolean}
+     */
+    multiple: Boolean,
+    /**
+     * 多选时用户最多可以选择的项目数，为 0 则不限制
+     * @type {Number}
+     * @default 0
+     */
+    multipleLimit: { type: Number, default: 0 },
+    /**
+     * 占位符
+     * @type {String}
+     */
+    placeholder: { type: String, required: false },
+    /**
+     * 是否默认选中第一个选项
+     * @type {Boolean}
+     */
+    defaultFirstOption: Boolean,
+    /**
+     * 多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词
+     * @type {Boolean}
+     */
+    reserveKeyword: Boolean,
+    /**
+     * 当选项对象的 value 属性为非基础类型时，必选。它接受一个字符串，代表 value 的 key
+     * @type {String}
+     * @default 'value'
+     */
+    valueKey: { type: String, default: 'value' },
+    /**
+     * 多选时折叠 Tags
+     * @type {Boolean}
+     */
+    collapseTags: Boolean,
+    /**
+     * 下拉框是否插入到 body 元素下
+     * @type {Boolean}
+     * @default true
+     */
+    popperAppendToBody: { type: Boolean, default: true },
+  },
+  data: vm => ({
+    /**
+     * 选项列表数据
+     * @type {Array}
+     */
+    options: [],
+    /**
+     * 缓存的选项列表
+     * @type {Array}
+     */
+    cachedOptions: [],
+    createdLabel: null,
+    createdSelected: false,
+    /**
+     * 当前选中项
+     * @type {Object|Array}
+     */
+    selected: vm.multiple ? [] : {},
+    inputLength: 20,
+    inputWidth: 0,
+    initialInputHeight: 0,
+    cachedPlaceHolder: '',
+    optionsCount: 0,
+    filteredOptionsCount: 0,
+    /**
+     * 下拉框是否可见
+     * @type {Boolean}
+     */
+    visible: false,
+    softFocus: false,
+    selectedLabel: '',
+    hoverIndex: -1,
+    selectedLabelWidth: null,
+    /**
+     * 搜索关键词
+     * @type {String}
+     */
+    query: '',
+    previousQuery: null,
+    inputHovering: false,
+    currentPlaceholder: '',
+    menuVisibleOnFocus: false,
+    isOnComposition: false,
+    isSilentBlur: false,
+  }),
+  provide() {
+    return {
+      select: this,
+    }
+  },
+  computed: {
+    _uiFormItemSize() {
+      return (this.uiFormItem || {}).uiFormItemSize
+    },
+    /**
+     * 输入框是否只读
+     * @returns {Boolean}
+     */
+    readonly() {
+      return !this.filterable || this.multiple || (!isIE() && !isEdge() && !this.visible)
+    },
+    /**
+     * 是否显示关闭按钮
+     * @returns {Boolean}
+     */
+    showClose() {
+      let hasValue = this.multiple ? Array.isArray(this.value) && this.value.length > 0 : this.value !== undefined && this.value !== null && this.value !== ''
+      let criteria = this.clearable && !this.selectDisabled && this.inputHovering && hasValue
+      return criteria
+    },
+    /**
+     * 图标类名
+     * @returns {String}
+     */
+    iconClass() {
+      return this.remote && this.filterable ? '' : this.visible ? 'arrow-up is-reverse' : 'arrow-up'
+    },
+    /**
+     * 防抖延迟时间
+     * @returns {Number}
+     */
+    debounce() {
+      return this.remote ? 300 : 0
+    },
+    /**
+     * 空状态显示文本
+     * @returns {String|Boolean|null}
+     */
+    emptyText() {
+      if (this.loading) {
+        return this.loadingText || this.t('components.select.loadingText')
+      } else {
+        if (this.remote && this.query === '' && this.options.length === 0) return false
+        if (this.filterable && this.query && this.options.length > 0 && this.filteredOptionsCount === 0) {
+          return this.noMatchText || this.t('components.select.noMatchText')
+        }
+        if (this.options.length === 0) {
+          return this.noDataText || this.t('components.select.noDataText')
+        }
+      }
+      return null
+    },
+    /**
+     * 是否显示新建选项
+     * @returns {Boolean}
+     */
+    showNewOption() {
+      let hasExistingOption = this.options.filter((option) => !option.created).some((option) => option.currentLabel === this.query)
+      return this.filterable && this.allowCreate && this.query !== '' && !hasExistingOption
+    },
+    /**
+     * 选择器尺寸
+     * @returns {String}
+     */
+    selectSize() {
+      return this.size || this._uiFormItemSize || (this.$ELEMENT || {}).size
+    },
+    autoSizeStyle() {
+      return {
+        width: this.autoSize && this.selectedLabelWidth ? `${this.selectedLabelWidth + 40}px` : undefined
+      }
+    },
+    /**
+     * 选择器是否禁用
+     * @returns {Boolean}
+     */
+    selectDisabled() {
+      return this.disabled || (this.uiForm || {}).disabled
+    },
+    /**
+     * 折叠标签的尺寸
+     * @returns {String}
+     */
+    collapseTagSize() {
+      return ['small', 'mini'].indexOf(this.selectSize) > -1 ? 'mini' : 'small'
+    },
+    propPlaceholder() {
+      return this.placeholder || ''
+    },
+  },
+  watch: {
+    selectDisabled() {
+      this.$nextTick(() => {
+        this.resetInputHeight()
+      })
+    },
+    propPlaceholder(val) {
+      this.cachedPlaceHolder = this.currentPlaceholder = val
+    },
+    value(val, oldVal) {
+      if (this.multiple) {
+        this.resetInputHeight()
+        if ((val && val.length > 0) || (this.$refs.input && this.query !== '')) {
+          this.currentPlaceholder = ''
+        } else {
+          this.currentPlaceholder = this.cachedPlaceHolder
+        }
+        if (this.filterable && !this.reserveKeyword) {
+          this.query = ''
+          this.handleQueryChange(this.query)
+        }
+      }
+      this.setSelected()
+      if (this.filterable && !this.multiple) {
+        this.inputLength = 20
+      }
+      if (!isEqual(val, oldVal)) {
+        this.dispatch('UiFormItem', 'ui.form.change', val)
+      }
+    },
+
+    visible(val) {
+      if (!val) {
+        this.broadcast('UiSelectDropdown', 'destroyPopper')
+        if (this.$refs.input) {
+          this.$refs.input.blur()
+        }
+        this.query = ''
+        this.previousQuery = null
+        this.selectedLabel = ''
+        this.inputLength = 20
+        this.menuVisibleOnFocus = false
+        this.resetHoverIndex()
+        this.$nextTick(() => {
+          if (this.$refs.input && this.$refs.input.value === '' && this.selected.length === 0) {
+            this.currentPlaceholder = this.cachedPlaceHolder
+          }
+        })
+        if (!this.multiple) {
+          if (this.selected) {
+            if (this.filterable && this.allowCreate && this.createdSelected && this.createdLabel) {
+              this.selectedLabel = this.createdLabel
+            } else {
+              this.selectedLabel = this.selected.currentLabel
+            }
+            if (this.filterable) this.query = this.selectedLabel
+          }
+
+          if (this.filterable) {
+            this.currentPlaceholder = this.cachedPlaceHolder
+          }
+        }
+      } else {
+        this.broadcast('UiSelectDropdown', 'updatePopper')
+        if (this.filterable) {
+          this.query = this.remote ? '' : this.selectedLabel
+          this.handleQueryChange(this.query)
+          if (this.multiple) {
+            this.$refs.input.focus()
+          } else {
+            if (!this.remote) {
+              this.broadcast('UiOption', 'queryChange', '')
+              this.broadcast('UiOptionGroup', 'queryChange')
+            }
+
+            if (this.selectedLabel) {
+              this.currentPlaceholder = this.selectedLabel
+              this.selectedLabel = ''
+            }
+          }
+        }
+      }
+      this.$emit('visible-change', val)
+    },
+
+    selectedLabel() {
+      this.debounceLabelWidth && this.debounceLabelWidth()
+    },
+    options() {
+      if (this.$isServer) return
+      this.$nextTick(() => {
+        this.broadcast('UiSelectDropdown', 'updatePopper')
+      })
+      if (this.multiple) {
+        this.resetInputHeight()
+      }
+      let inputs = this.$el.querySelectorAll('input')
+      if ([].indexOf.call(inputs, document.activeElement) === -1) {
+        this.setSelected()
+      }
+      if (this.defaultFirstOption && (this.filterable || this.remote) && this.filteredOptionsCount) {
+        this.checkDefaultFirstOption()
+      }
+    },
+  },
+  created() {
+    this.cachedPlaceHolder = this.currentPlaceholder = this.propPlaceholder
+    if (this.multiple && !Array.isArray(this.value)) {
+      this.$emit('input', [])
+    }
+    if (!this.multiple && Array.isArray(this.value)) {
+      this.$emit('input', '')
+    }
+    this.debouncedOnInputChange = debounce(() => {
+      this.onInputChange()
+    }, this.debounce)
+    this.debouncedQueryChange = debounce((e) => {
+      this.handleQueryChange(e.target.value)
+    }, this.debounce)
+    if (this.autoSize) {
+      this.debounceLabelWidth = () => this.$nextTick(this.handleLabelChange)
+    }
+    this.$on('handleOptionClick', this.handleOptionSelect)
+    this.$on('setSelected', this.setSelected)
+  },
+  mounted() {
+    if (this.multiple && Array.isArray(this.value) && this.value.length > 0) {
+      this.currentPlaceholder = ''
+    }
+    const reference = this.$refs.reference
+    if (reference && reference.$el) {
+      const sizeMap = {
+        medium: 36,
+        small: 32,
+        mini: 28,
+      }
+      const input = reference.$el.querySelector('input')
+      this.initialInputHeight = input.getBoundingClientRect().height || sizeMap[this.selectSize]
+    }
+    if (this.remote && this.multiple) {
+      this.resetInputHeight()
+    }
+    this.$nextTick(() => {
+      if (reference && reference.$el) {
+        this.inputWidth = reference.$el.getBoundingClientRect().width
+      }
+    })
+    this.setSelected()
+  },
+  methods: {
+    /**
+     * 处理键盘上下导航
+     * @param {String} direction - 'next' 或 'prev'
+     */
+    handleNavigate(direction) {
+      if (this.isOnComposition) return
+      this.navigateOptions(direction)
+    },
+    /**
+     * 处理输入法组合事件
+     * @param {Event} event
+     */
+    handleComposition(event) {
+      const text = event.target.value
+      if (event.type === 'compositionend') {
+        this.isOnComposition = false
+        this.$nextTick(() => this.handleQueryChange(text))
+      } else {
+        const lastCharacter = text[text.length - 1] || ''
+        this.isOnComposition = !isKorean(lastCharacter)
+      }
+    },
+    /**
+     * 处理查询变化
+     * @param {String} val - 查询字符串
+     */
+    handleQueryChange(val) {
+      if (this.previousQuery === val || this.isOnComposition) return
+      if (this.previousQuery === null && (typeof this.filterMethod === 'function' || typeof this.remoteMethod === 'function')) {
+        this.previousQuery = val
+        return
+      }
+      this.previousQuery = val
+      this.$nextTick(() => {
+        if (this.visible) this.broadcast('UiSelectDropdown', 'updatePopper')
+      })
+      this.hoverIndex = -1
+      if (this.multiple && this.filterable) {
+        this.$nextTick(() => {
+          const length = this.$refs.input.value.length * 15 + 20
+          this.inputLength = this.collapseTags ? Math.min(50, length) : length
+          this.managePlaceholder()
+          this.resetInputHeight()
+        })
+      }
+      if (this.remote && typeof this.remoteMethod === 'function') {
+        this.hoverIndex = -1
+        this.remoteMethod(val)
+      } else if (typeof this.filterMethod === 'function') {
+        this.filterMethod(val)
+        this.broadcast('UiOptionGroup', 'queryChange')
+      } else {
+        this.filteredOptionsCount = this.optionsCount
+        this.broadcast('UiOption', 'queryChange', val)
+        this.broadcast('UiOptionGroup', 'queryChange')
+      }
+      if (this.defaultFirstOption && (this.filterable || this.remote) && this.filteredOptionsCount) {
+        this.checkDefaultFirstOption()
+      }
+    },
+    handleLabelChange() {
+      const font = getStyle(this.$refs.reference.$el, 'font')
+      this.selectedLabelWidth = getTextWidth(this.selectedLabel, font)
+    },
+    /**
+     * 滚动到指定选项
+     * @param {Object|Array} option - 选项对象或数组
+     */
+    scrollToOption(option) {
+      const target = Array.isArray(option) && option[0] ? option[0].$el : option.$el
+      if (this.$refs.popper && target) {
+        const menu = this.$refs.popper.$el.querySelector('.ui-select-dropdown__wrap')
+        scrollIntoView(menu, target)
+      }
+    },
+    /**
+     * 下拉菜单出现时的回调
+     */
+    handleMenuEnter() {
+      this.$nextTick(() => this.scrollToOption(this.selected))
+    },
+    /**
+     * 触发 change 事件
+     * @param {*} val
+     */
+    emitChange(val) {
+      if (!isEqual(this.value, val)) {
+        this.$emit('change', val)
+      }
+    },
+    /**
+     * 根据 value 获取选项对象
+     * @param {*} value - 选项的值
+     * @returns {Object} 选项对象
+     */
+    getOption(value) {
+      let option
+      const isObject = Object.prototype.toString.call(value).toLowerCase() === '[object object]'
+      const isNull = Object.prototype.toString.call(value).toLowerCase() === '[object null]'
+      const isUndefined = Object.prototype.toString.call(value).toLowerCase() === '[object undefined]'
+
+      for (let i = this.cachedOptions.length - 1; i >= 0; i--) {
+        const cachedOption = this.cachedOptions[i]
+        const isEqual = isObject ? get(cachedOption.value, this.valueKey) === get(value, this.valueKey) : cachedOption.value === value
+        if (isEqual) {
+          option = cachedOption
+          break
+        }
+      }
+      if (option) return option
+      const label = !isObject && !isNull && !isUndefined ? String(value) : ''
+      let newOption = {
+        value: value,
+        currentLabel: label,
+      }
+      if (this.multiple) {
+        newOption.hitState = false
+      }
+      return newOption
+    },
+    /**
+     * 设置选中状态
+     */
+    setSelected() {
+      if (!this.multiple) {
+        let option = this.getOption(this.value)
+        if (option.created) {
+          this.createdLabel = option.currentLabel
+          this.createdSelected = true
+        } else {
+          this.createdSelected = false
+        }
+        this.selectedLabel = option.currentLabel
+        this.selected = option
+        if (this.filterable) this.query = this.selectedLabel
+        return
+      }
+      let result = []
+      if (Array.isArray(this.value)) {
+        this.value.forEach((value) => {
+          result.push(this.getOption(value))
+        })
+      }
+      this.selected = result
+      this.$nextTick(() => {
+        this.resetInputHeight()
+      })
+    },
+    /**
+     * 处理焦点事件
+     * @param {Event} event
+     */
+    handleFocus(event) {
+      if (!this.softFocus) {
+        if (this.automaticDropdown || this.filterable) {
+          if (this.filterable && !this.visible) {
+            this.menuVisibleOnFocus = true
+          }
+          this.visible = true
+        }
+        this.$emit('focus', event)
+      } else {
+        this.softFocus = false
+      }
+    },
+    /**
+     * 手动触发 blur
+     */
+    blur() {
+      this.visible = false
+      this.$refs.reference.blur()
+    },
+    /**
+     * 处理失焦事件
+     * @param {Event} event
+     */
+    handleBlur(event) {
+      setTimeout(() => {
+        if (this.isSilentBlur) {
+          this.isSilentBlur = false
+        } else {
+          this.$emit('blur', event)
+        }
+      }, 50)
+      this.softFocus = false
+    },
+    /**
+     * 处理清除按钮点击
+     * @param {Event} event
+     */
+    handleClearClick(event) {
+      this.deleteSelected(event)
+    },
+    /**
+     * 销毁 Popper
+     */
+    doDestroy() {
+      this.$refs.popper && this.$refs.popper.doDestroy()
+    },
+    /**
+     * 处理点击外部关闭下拉框
+     */
+    handleClose() {
+      this.visible = false
+    },
+    /**
+     * 切换最后一个选中 Tag 的 hit 状态
+     * @param {Boolean} [hit]
+     * @returns {Boolean}
+     */
+    toggleLastOptionHitState(hit) {
+      if (!Array.isArray(this.selected)) return
+      const option = this.selected[this.selected.length - 1]
+      if (!option) return
+      if (hit === true || hit === false) {
+        option.hitState = hit
+        return hit
+      }
+      option.hitState = !option.hitState
+      return option.hitState
+    },
+    /**
+     * 删除前一个 Tag (Backspace)
+     * @param {KeyboardEvent} e
+     */
+    deletePrevTag(e) {
+      if (e.target.value.length <= 0 && !this.toggleLastOptionHitState()) {
+        const value = this.value.slice()
+        value.pop()
+        this.$emit('input', value)
+        this.emitChange(value)
+      }
+    },
+    /**
+     * 管理 Placeholder 显示
+     */
+    managePlaceholder() {
+      if (this.currentPlaceholder !== '') {
+        this.currentPlaceholder = this.$refs.input.value ? '' : this.cachedPlaceHolder
+      }
+    },
+    /**
+     * 重置输入框状态
+     * @param {KeyboardEvent} e
+     */
+    resetInputState(e) {
+      if (e.keyCode !== 8) this.toggleLastOptionHitState(false)
+      this.inputLength = this.$refs.input.value.length * 15 + 20
+      this.resetInputHeight()
+    },
+    /**
+     * 重置输入框高度
+     */
+    resetInputHeight() {
+      if (this.collapseTags && !this.filterable) return
+      this.$nextTick(() => {
+        if (!this.$refs.reference) return
+        let inputChildNodes = this.$refs.reference.$el.childNodes
+        let input = [].filter.call(inputChildNodes, (item) => item.tagName === 'INPUT')[0]
+        const tags = this.$refs.tags
+        const tagsHeight = tags ? Math.round(tags.getBoundingClientRect().height) : 0
+        const sizeInMap = this.initialInputHeight || 40
+        input.style.height = this.selected.length === 0 ? sizeInMap + 'px' : Math.max(tags ? tagsHeight + (tagsHeight > sizeInMap ? 6 : 0) : 0, sizeInMap) + 'px'
+        if (this.visible && this.emptyText !== false) {
+          this.broadcast('UiSelectDropdown', 'updatePopper')
+        }
+      })
+    },
+    /**
+     * 重置 Hover 索引
+     */
+    resetHoverIndex() {
+      setTimeout(() => {
+        if (!this.multiple) {
+          this.hoverIndex = this.options.indexOf(this.selected)
+        } else {
+          if (this.selected.length > 0) {
+            this.hoverIndex = Math.min.apply(
+              null,
+              this.selected.map((item) => this.options.indexOf(item))
+            )
+          } else {
+            this.hoverIndex = -1
+          }
+        }
+      }, 300)
+    },
+    /**
+     * 处理选项选择
+     * @param {Object} option - 选中的选项对象
+     * @param {Boolean} byClick - 是否由点击触发
+     */
+    handleOptionSelect(option, byClick) {
+      if (this.multiple) {
+        const value = (this.value || []).slice()
+        const optionIndex = this.getValueIndex(value, option.value)
+        if (optionIndex > -1) {
+          value.splice(optionIndex, 1)
+        } else if (this.multipleLimit <= 0 || value.length < this.multipleLimit) {
+          value.push(option.value)
+        }
+        this.$emit('input', value)
+        this.emitChange(value)
+        if (option.created) {
+          this.query = ''
+          this.handleQueryChange('')
+          this.inputLength = 20
+        }
+        if (this.filterable) this.$refs.input.focus()
+      } else {
+        this.$emit('input', option.value)
+        this.emitChange(option.value)
+        this.visible = false
+      }
+      this.isSilentBlur = byClick
+      this.setSoftFocus()
+      if (this.visible) return
+      this.$nextTick(() => {
+        this.scrollToOption(option)
+      })
+    },
+    /**
+     * 设置软焦点
+     */
+    setSoftFocus() {
+      this.softFocus = true
+      const input = this.$refs.input || this.$refs.reference
+      if (input) {
+        input.focus()
+      }
+    },
+    /**
+     * 获取值在数组中的索引
+     * @param {Array} arr
+     * @param {*} value
+     * @returns {Number}
+     */
+    getValueIndex(arr = [], value) {
+      const isObject = Object.prototype.toString.call(value).toLowerCase() === '[object object]'
+      if (!isObject) {
+        return arr.indexOf(value)
+      } else {
+        const valueKey = this.valueKey
+        let index = -1
+        arr.some((item, i) => {
+          if (get(item, valueKey) === get(value, valueKey)) {
+            index = i
+            return true
+          }
+          return false
+        })
+        return index
+      }
+    },
+    /**
+     * 切换菜单显示状态
+     */
+    toggleMenu() {
+      if (!this.selectDisabled) {
+        if (this.menuVisibleOnFocus) {
+          this.menuVisibleOnFocus = false
+        } else {
+          this.visible = !this.visible
+        }
+        if (this.visible) {
+          ;(this.$refs.input || this.$refs.reference).focus()
+        }
+      }
+    },
+    /**
+     * 选择当前高亮选项
+     */
+    selectOption() {
+      if (!this.visible) {
+        this.toggleMenu()
+      } else {
+        if (this.options[this.hoverIndex]) {
+          this.handleOptionSelect(this.options[this.hoverIndex])
+        }
+      }
+    },
+    /**
+     * 删除所有选中项
+     * @param {Event} event
+     */
+    deleteSelected(event) {
+      event.stopPropagation()
+      const value = this.multiple ? [] : ''
+      this.$emit('input', value)
+      this.emitChange(value)
+      this.visible = false
+      this.$emit('clear')
+    },
+    /**
+     * 删除单个 Tag
+     * @param {Event} event
+     * @param {Object} tag - 要删除的标签对应的选项
+     */
+    deleteTag(event, tag) {
+      let index = this.selected.indexOf(tag)
+      if (index > -1 && !this.selectDisabled) {
+        const value = this.value.slice()
+        value.splice(index, 1)
+        this.$emit('input', value)
+        this.emitChange(value)
+        this.$emit('remove-tag', tag.value)
+      }
+      event.stopPropagation()
+    },
+    /**
+     * 输入框值改变时触发
+     */
+    onInputChange() {
+      if (this.filterable && this.query !== this.selectedLabel) {
+        this.query = this.selectedLabel
+        this.handleQueryChange(this.query)
+      }
+    },
+    /**
+     * 选项销毁时触发
+     * @param {Number} index
+     */
+    onOptionDestroy(index) {
+      if (index > -1) {
+        this.optionsCount--
+        this.filteredOptionsCount--
+        this.options.splice(index, 1)
+      }
+    },
+    /**
+     * 重置输入框宽度
+     */
+    resetInputWidth() {
+      this.inputWidth = this.$refs.reference.$el.getBoundingClientRect().width
+    },
+    /**
+     * 处理窗口大小调整
+     */
+    handleResize() {
+      this.resetInputWidth()
+      if (this.multiple) this.resetInputHeight()
+    },
+    /**
+     * 检查并设置默认第一个选项
+     */
+    checkDefaultFirstOption() {
+      this.hoverIndex = -1
+      let hasCreated = false
+      for (let i = this.options.length - 1; i >= 0; i--) {
+        if (this.options[i].created) {
+          hasCreated = true
+          this.hoverIndex = i
+          break
+        }
+      }
+      if (hasCreated) return
+      for (let i = 0; i !== this.options.length; ++i) {
+        const option = this.options[i]
+        if (this.query) {
+          if (!option.disabled && !option.groupDisabled && option.visible) {
+            this.hoverIndex = i
+            break
+          }
+        } else {
+          if (option.itemSelected) {
+            this.hoverIndex = i
+            break
+          }
+        }
+      }
+    },
+    /**
+     * 获取选项的唯一 Key
+     * @param {Object} item
+     * @returns {*}
+     */
+    getValueKey(item) {
+      if (Object.prototype.toString.call(item.value).toLowerCase() !== '[object object]') {
+        return item.value
+      } else {
+        return get(item.value, this.valueKey)
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss"> </style>