欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

element-ui select组件中复选时以字符串形式显示

程序员文章站 2022-11-22 07:58:29
我使用的element ui的版本是1.4.13。 如上图所示,使用el select组件,要实现可搜索、可复选、可创建条目时,展示样式是如上图所示,输入框的高度会撑开,影响页面布局,按照产品的需求,要调整为以下样式: 1、复选时,输入框中不以标签的形式展示,而是以字符串的形式展示。 2、超出部分显 ......

我使用的element-ui的版本是1.4.13。

element-ui select组件中复选时以字符串形式显示

如上图所示,使用el-select组件,要实现可搜索、可复选、可创建条目时,展示样式是如上图所示,输入框的高度会撑开,影响页面布局,按照产品的需求,要调整为以下样式:

element-ui select组件中复选时以字符串形式显示

1、复选时,输入框中不以标签的形式展示,而是以字符串的形式展示。

2、超出部分显示省略号,并且鼠标移入显示提示框,用来展示全选的内容。

下面是源码修改部分:

(1)在select的props中添加了一个参数notag用来控制是否以字符串形式显示输入框中的数据。添加了上面的el-popover标签,主要是文字超出时显示,这个后面再讲。底下的span标签就是在notag参数为true时显示,data中添加currentsellabel,用来显示处理后的多选数据,将数组转成字符串。
element-ui select组件中复选时以字符串形式显示

(2)在这里加了一个类,主要是方便后面加span标签的css样式。在select.css文件中的css样式如下面代码所示:
element-ui select组件中复选时以字符串形式显示

.el-select__tags.notags .notagspan{
    display: inline-block;
    font-size: 12px;
    width: 100%;
    padding:0 6px;
    overflow: hidden; /*自动隐藏文字*/
    text-overflow: ellipsis; /*文字隐藏后添加省略号*/
    white-space: nowrap; /*强制不换行*/
}

(3)在notag参数为true时显示class="notagspan"的span标签时,对应的el-tag标签就不再显示,如图所示,也需要在el-tag标签中添加notag控制
element-ui select组件中复选时以字符串形式显示

(4)在setselected方法中处理多选时的数据,将数组转成字符串,如下图所示:
element-ui select组件中复选时以字符串形式显示

(5)文字超出时显示提示框,效果如下:
element-ui select组件中复选时以字符串形式显示

需要在methods中添加如下方法:

 //当复选时文字超出输入框,出现提示框
        showspantooltip: function (event) {
            if(!this.showpop) return;
            var ev = event || window.event;
            var eventname = ev.target.classname;
            if (eventname.indexof('notagspan') != -1) {
                if (ev.target.offsetwidth < ev.target.scrollwidth) {
                    var tooltip = this.$refs.texttooltip;
                    tooltip.referenceelm = ev.target;
                    tooltip.$refs.popper.style.display = 'none';
                    tooltip.dodestroy();
                    tooltip.showpopper = true;
                }
            }
        },
        //当复选时文字超出输入框,隐藏提示框
        hiddenspantooltip: function () {
            if(!this.showpop) return;
            const tooltip = this.$refs.texttooltip;
            if (tooltip) {
                tooltip.doclose() ;
                tooltip.dodestroy();
            }
        }

(6)多选时,可搜索。按照组件现在的,搜索框会在选项的下面出现,这样会撑开输入框的高度。
element-ui select组件中复选时以字符串形式显示

这里需要调整,将输入框放在下面的下拉菜单中,如图所示:
element-ui select组件中复选时以字符串形式显示
代码如下:
element-ui select组件中复选时以字符串形式显示
避免跟element原有的搜索框冲突,加了参数控制:
element-ui select组件中复选时以字符串形式显示

需要在select.css加入如下样式:

.notaginputdiv{
    border: 1px solid rgb(191, 193, 217);
    margin-left: -1px;
    margin-top:-30px;
    width: 100%;
    max-width: 185px;
    padding-right: 30px;
    overflow: hidden; /*自动隐藏文字*/
    text-overflow: ellipsis; /*文字隐藏后添加省略号*/
    white-space: nowrap; /*强制不换行*/
}

这个时候需要在下拉出现的时候调整整个下拉菜单的位置,具体修改代码的地方如下:
在data中加入initpoppertop,用来记录初始时下拉菜单的位置:
1、在watch中的visible中
element-ui select组件中复选时以字符串形式显示
2、在watch中的query中
element-ui select组件中复选时以字符串形式显示
3、methods的resetinputheight方法中
element-ui select组件中复选时以字符串形式显示

(7)多选时并且可搜索时,如果条目不存在时,创建条目,并且显示在下拉菜单中,这样可以通过反选删除选中的数据。
1、添加el-option标签,用来显示创建的条目。在data中添加muloptions数组,用来记录创建的条目。
element-ui select组件中复选时以字符串形式显示

2、handleoptionselect方法中处理数据
element-ui select组件中复选时以字符串形式显示

3、在option.vue的props中添加optcreated
element-ui select组件中复选时以字符串形式显示

ok,所有的就改完了,效果如图所示:
element-ui select组件中复选时以字符串形式显示

以下附源码:

<template>
  <div
    class="el-select"
    v-clickoutside="handleclose">
    <div
      class="el-select__tags"
      :class="{'notags':notag}"
      v-if="multiple"
      @click.stop="togglemenu"
      ref="tags"
      :style="{ 'max-width': inputwidth - 32 + 'px' }">
      <transition-group @after-leave="resetinputheight">
        <el-tag
          v-if="!notag"
          v-for="item in selected"
          :key="getvaluekey(item)"
          closable
          :hit="item.hitstate"
          type="primary"
          @close="deletetag($event, item)"
          close-transition>
          <span class="el-select__tags-text">{{ item.currentlabel }}</span>
        </el-tag>
      </transition-group>

        <el-popover
             ref="texttooltip"
             placement="top-start"
             width="200"
             trigger="hover"
             :content="currentsellabel">
        </el-popover>
        <span v-if="notag" class="notagspan"
              @mouseenter="showspantooltip($event)" @mouseleave="hiddenspantooltip($event)">
            {{currentsellabel}}
        </span>
      <input
        type="text"
        class="el-select__input"
        :class="`is-${ size }`"
        @focus="visible = true"
        :disabled="disabled"
        @keyup="manageplaceholder"
        @keydown="resetinputstate"
        @keydown.down.prevent="navigateoptions('next')"
        @keydown.up.prevent="navigateoptions('prev')"
        @keydown.enter.prevent="selectoption"
        @keydown.esc.stop.prevent="visible = false"
        @keydown.delete="deleteprevtag"
        v-model="query"
        :debounce="remote ? 300 : 0"
        v-if="filterable && !notag"
        :style="{ width: inputlength + 'px', 'max-width': inputwidth - 42 + 'px' }"
        ref="input">
    </div>
    <el-input
      ref="reference"
      v-model="selectedlabel"
      type="text"
      :placeholder="currentplaceholder"
      :name="name"
      :size="size"
      :disabled="disabled"
      :readonly="!filterable || multiple"
      :validate-event="false"
      @focus="handlefocus"
      @click="handleiconclick"
      @mousedown.native="handlemousedown"
      @keyup.native="debouncedoninputchange"
      @keydown.native.down.prevent="navigateoptions('next')"
      @keydown.native.up.prevent="navigateoptions('prev')"
      @keydown.native.enter.prevent="selectoption"
      @keydown.native.esc.stop.prevent="visible = false"
      @keydown.native.tab="visible = false"
      @paste.native="debouncedoninputchange"
      @mouseenter.native="inputhovering = true"
      @mouseleave.native="inputhovering = false"
      :icon="iconclass">
    </el-input>
    <transition
      name="el-zoom-in-top"
      @before-enter="handlemenuenter"
      @after-leave="dodestroy">
      <el-select-menu
        ref="popper"
        v-show="visible && emptytext !== false">
          <!--有notag时搜索框在下面显示-->
          <div  v-if="filterable && notag && multiple" :class="{'notaginputdiv':notag}">
              <input
                  type="text"
                  class="el-select__input"
                  :class="`is-${ size }`"
                  @focus="visible = true"
                  :disabled="disabled"
                  @keyup="manageplaceholder"
                  @keydown="resetinputstate"
                  @keydown.down.prevent="navigateoptions('next')"
                  @keydown.up.prevent="navigateoptions('prev')"
                  @keydown.enter.prevent="selectoption"
                  @keydown.esc.stop.prevent="visible = false"
                  @keydown.delete="deleteprevtag"
                  v-model="query"
                  :debounce="remote ? 300 : 0"
                  v-if="filterable && notag && multiple"
                  :style="{ width: inputlength + 'px', 'max-width': inputwidth - 42 + 'px' }"
                  ref="input">
            </div>
        <el-input v-model="search" @focus="visible = true" v-if="searchable"></el-input>
        <el-scrollbar
          tag="ul"
          wrap-class="el-select-dropdown__wrap"
          view-class="el-select-dropdown__list"
          :class="{ 'is-empty': !allowcreate && filteredoptionscount === 0 }"
          v-show="options.length > 0 && !loading">
          <el-option
            :value="query"
            created
            v-if="shownewoption">
          </el-option>
           <el-option
                  v-if="notag && multiple && allowcreate"
                  v-for="item in muloptions"
                  :key="item.currentlabel"
                  :optcreated="item.optcreated"
                  :value="item.currentlabel">
           </el-option>
          <slot></slot>
        </el-scrollbar>
        <p class="el-select-dropdown__empty" v-if="emptytext && (allowcreate && options.length === 0 || !allowcreate)">{{ emptytext }}</p>
      </el-select-menu>
    </transition>
  </div>
</template>

<script type="text/babel">
  import emitter from 'element-ui/src/mixins/emitter';
  import locale from 'element-ui/src/mixins/locale';
  import elinput from 'element-ui/packages/input';
  import elselectmenu from './select-dropdown.vue';
  import eloption from './option.vue';
  import eltag from 'element-ui/packages/tag';
  import elscrollbar from 'element-ui/packages/scrollbar';
  import debounce from 'throttle-debounce/debounce';
  import clickoutside from 'element-ui/src/utils/clickoutside';
  import { addclass, removeclass, hasclass } from 'element-ui/src/utils/dom';
  import { addresizelistener, removeresizelistener } from 'element-ui/src/utils/resize-event';
  import { t } from 'element-ui/src/locale';
  import scrollintoview from 'element-ui/src/utils/scroll-into-view';
  import { getvaluebypath } from 'element-ui/src/utils/util';

  const sizemap = {
    'large': 42,
    'small': 30,
    'mini': 22
  };

  export default {
    mixins: [emitter, locale],

    name: 'elselect',

    componentname: 'elselect',

    computed: {
      iconclass() {
        let criteria = this.clearable &&
          !this.disabled &&
          this.inputhovering &&
          !this.multiple &&
          this.value !== undefined &&
          this.value !== '';
        return criteria ? 'circle-close is-show-close' : (this.remote && this.filterable ? '' : 'caret-top');
      },

      debounce() {
        return this.remote ? 300 : 0;
      },

      emptytext() {
        if (this.loading) {
          return this.loadingtext || this.t('el.select.loading');
        } else {
          if (this.remote && this.query === '' && this.options.length === 0) return false;
          if (this.filterable && this.options.length > 0 && this.filteredoptionscount === 0) {
            return this.nomatchtext || this.t('el.select.nomatch');
          }
          if (this.options.length === 0) {
            return this.nodatatext || this.t('el.select.nodata');
          }
        }
        return null;
      },

      shownewoption() {
        let hasexistingoption = this.options.filter(option => !option.created)
          .some(option => option.currentlabel === this.query);
        return this.filterable && this.allowcreate && this.query !== '' && !hasexistingoption;
      }
    },

    components: {
      elinput,
      elselectmenu,
      eloption,
      eltag,
      elscrollbar
    },

    directives: { clickoutside },

    props: {
      name: string,
      value: {
        required: true
      },
      size: string,
      disabled: boolean,
      clearable: boolean,
      filterable: boolean,
      searchable: boolean,
      allowcreate: boolean,
      notag:boolean,  //多选的时候是否以字符串形式展示 f
      showpop: {  //是否在文字超出span标签的时候显示提示 f
         type: boolean,
         default: true
      },
      loading: boolean,
      popperclass: string,
      remote: boolean,
      loadingtext: string,
      nomatchtext: string,
      nodatatext: string,
      remotemethod: function,
      filtermethod: function,
      multiple: boolean,
      multiplelimit: {
        type: number,
        default: 0
      },
      placeholder: {
        type: string,
        default() {
          return t('el.select.placeholder');
        }
      },
      defaultfirstoption: boolean,
      valuekey: {
        type: string,
        default: 'value'
      }
    },

    data() {
      return {
        options: [],
        cachedoptions: [],
        createdlabel: null,
        createdselected: false,
        selected: this.multiple ? [] : {},
        isselect: true,
        inputlength: 20,
        inputwidth: 0,
        cachedplaceholder: '',
        optionscount: 0,
        filteredoptionscount: 0,
        visible: false,
        selectedlabel: '',
        hoverindex: -1,
        query: '',
        search: '',
        optionsalldisabled: false,
        inputhovering: false,
        currentplaceholder: '',
        currentsellabel:'', //多选时以字符串形式展示的标签 f
        initpoppertop:0, //初始时下拉框的位置 f
        muloptions:[]   //多选时添加的数据 f
      };
    },

    watch: {
      placeholder(val) {
        this.cachedplaceholder = this.currentplaceholder = val;
      },

      value(val) {
        if (this.multiple) {
          this.resetinputheight();
          if (val.length > 0 || (this.$refs.input && this.query !== '')) {
            this.currentplaceholder = '';
          } else {
            this.currentplaceholder = this.cachedplaceholder;
          }
        }
        this.setselected();
        if (this.filterable && !this.multiple) {
          this.inputlength = 20;
        }
        this.$emit('change', val);
        this.dispatch('elformitem', 'el.form.change', val);
      },

      search(val) {
        if (this.searchable) {
          this.$emit('search-change', val);
        }
      },
      query(val) {
        this.$nexttick(() => {
          if (this.visible) {
              this.broadcast('elselectdropdown', 'updatepopper');
              //multiple、notag、filterable 同时存在时,调整下拉框位置
              if(this.multiple && this.notag && this.filterable){
                  this.$nexttick(()=>{
                      var poppertop = window.getcomputedstyle? window.getcomputedstyle(this.$refs.popper.$el).top : this.$refs.popper.$el.currentstyle.top;
                      this.$refs.popper.$el.style.top = parseint(poppertop)+ 25+'px';
                  })
              }
          }
        });
        this.hoverindex = -1;
        if (this.multiple && this.filterable) {
          this.inputlength = this.$refs.input.value.length * 15 + 20;
          this.manageplaceholder();
          this.resetinputheight();
        }
        if (this.remote && typeof this.remotemethod === 'function') {
          this.hoverindex = -1;
          this.remotemethod(val);
          this.broadcast('eloption', 'resetindex');
        } else if (typeof this.filtermethod === 'function') {
          this.filtermethod(val);
          this.broadcast('eloptiongroup', 'querychange');
        } else {
          this.filteredoptionscount = this.optionscount;
          this.broadcast('eloption', 'querychange', val);
          this.broadcast('eloptiongroup', 'querychange');
        }
        if (this.defaultfirstoption && (this.filterable || this.remote) && this.filteredoptionscount) {
          this.checkdefaultfirstoption();
        }
      },

      visible(val) {
        if (!val) {
          this.$refs.reference.$el.queryselector('input').blur();
          this.handleiconhide();
          this.broadcast('elselectdropdown', 'destroypopper');
          if (this.$refs.input) {
            this.$refs.input.blur();
          }
          this.query = '';
          this.selectedlabel = '';
          this.inputlength = 20;
          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;
            }
          }
        } else {
          this.handleiconshow();
          this.broadcast('elselectdropdown', 'updatepopper');
           //multiple、notag、filterable 同时存在时,调整下拉框位置,并记录初始下拉框的位置
          if(this.multiple && this.notag && this.filterable){
                this.$nexttick(()=>{
                    this.$refs.input.focus();
                    var poppertop = window.getcomputedstyle? window.getcomputedstyle(this.$refs.popper.$el).top : this.$refs.popper.$el.currentstyle.top;
                    //记录初始下拉框的位置
                    this.initpoppertop = poppertop;
                    this.$refs.popper.$el.style.top = parseint(poppertop) + 25 +'px';
                })
            }
          if (this.filterable) {
            this.query = this.selectedlabel;
            if (this.multiple) {
              this.$refs.input.focus();
            } else {
              if (!this.remote) {
                this.broadcast('eloption', 'querychange', '');
                this.broadcast('eloptiongroup', 'querychange');
              }
              this.broadcast('elinput', 'inputselect');
            }
          }
        }
        this.$emit('visible-change', val);
      },

      options(val) {
        if (this.$isserver) return;
        this.optionsalldisabled = val.length === val.filter(item => item.disabled === true).length;
        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();
        }
      }
    },

    methods: {
        //当复选时文字超出输入框,出现提示框
        showspantooltip: function (event) {
            if(!this.showpop) return;
            var ev = event || window.event;
            var eventname = ev.target.classname;
            if (eventname.indexof('notagspan') != -1) {
                if (ev.target.offsetwidth < ev.target.scrollwidth) {
                    var tooltip = this.$refs.texttooltip;
                    tooltip.referenceelm = ev.target;
                    tooltip.$refs.popper.style.display = 'none';
                    tooltip.dodestroy();
                    tooltip.showpopper = true;
                }
            }
        },
        //当复选时文字超出输入框,隐藏提示框
        hiddenspantooltip: function () {
            if(!this.showpop) return;
            const tooltip = this.$refs.texttooltip;
            if (tooltip) {
                tooltip.doclose() ;
                tooltip.dodestroy();
            }
        },
      handleiconhide() {
        let icon = this.$el.queryselector('.el-input__icon');
        if (icon) {
          removeclass(icon, 'is-reverse');
        }
      },

      handleiconshow() {
        let icon = this.$el.queryselector('.el-input__icon');
        if (icon && !hasclass(icon, 'el-icon-circle-close')) {
          addclass(icon, 'is-reverse');
        }
      },

      scrolltooption(classname = 'selected') {
        const menu = this.$refs.popper.$el.queryselector('.el-select-dropdown__wrap');
        scrollintoview(menu, menu.getelementsbyclassname(classname)[0]);
      },

      handlemenuenter() {
        this.$nexttick(() => this.scrolltooption());
      },

      getoption(value) {
        let option;
        const type = typeof value;
        const isobject = type !== 'string' && type !== 'number' && type !== 'boolean';
        for (let i = this.cachedoptions.length - 1; i >= 0; i--) {
          const cachedoption = this.cachedoptions[i];
          const isequal = isobject
            ? this.getvaluebypath(cachedoption.value, this.valuekey) === this.getvaluebypath(value, this.valuekey)
            : cachedoption.value === value;
          if (isequal) {
            option = cachedoption;
            break;
          }
        }
        if (option) return option;
        const label = !isobject
          ? value : '';
        let newoption = {
          value: value,
          currentlabel: label
        };
        if (this.multiple) {
          newoption.hitstate = false;
        }
        return newoption;
      },
      getvaluebypath(object, prop) {
        prop = prop || '';
        const paths = prop.split('.');
        let current = object;
        let result = null;
        for (let i = 0, j = paths.length; i < j; i++) {
          const path = paths[i];
          if (current !== 0 && !current) break;
          if (i === j - 1) {
            result = current[path];
            break;
          }
          current = current[path];
        }
        return result;
      },

      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;
         //复选时,选项以字符串的形式显示,此处处理显示数据,数组转成字符串
         if(this.notag && this.multiple){
              var arr = [];
              if(this.selected && this.selected.length){
                  this.selected.foreach(function(item){
                      arr.push(item.currentlabel);
                  })
              }
              this.currentsellabel = arr.join(',');
         }
        this.$nexttick(() => {
          this.resetinputheight();
        });
      },

      handlefocus() {
        this.visible = true;
      },

      handleiconclick(event) {
        if (this.iconclass.indexof('circle-close') > -1) {
          this.deleteselected(event);
        } else {
          this.togglemenu();
        }
      },

      handlemousedown(event) {
        if (event.target.tagname !== 'input') return;
        if (this.visible) {
          this.handleclose();
          event.preventdefault();
        }
      },

      dodestroy() {
        this.$refs.popper && this.$refs.popper.dodestroy();
        this.dropdownul = null;
      },

      handleclose() {
        this.visible = false;
      },

      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;
      },

      deleteprevtag(e) {
        if (e.target.value.length <= 0 && !this.togglelastoptionhitstate()) {
          const value = this.value.slice();
          value.pop();
          this.$emit('input', value);
        }
      },

      manageplaceholder() {
        if (this.currentplaceholder !== '') {
          this.currentplaceholder = this.$refs.input.value ? '' : this.cachedplaceholder;
        }
      },

      resetinputstate(e) {
        if (e.keycode !== 8) this.togglelastoptionhitstate(false);
        this.inputlength = this.$refs.input.value.length * 15 + 20;
        this.resetinputheight();
      },

      resetinputheight() {
        this.$nexttick(() => {
          if (!this.$refs.reference) return;
          let inputchildnodes = this.$refs.reference.$el.childnodes;
          let input = [].filter.call(inputchildnodes, item => item.tagname === 'input')[0];
          input.style.height = math.max(this.$refs.tags.clientheight + 6, sizemap[this.size] || 36) + 'px';
          if (this.visible && this.emptytext !== false) {
            this.broadcast('elselectdropdown', 'updatepopper');
              //multiple、notag、filterable 同时存在时,判断当前下拉框是否在初始位置,不在则调整下拉框位置
              if(this.multiple && this.notag && this.filterable){
                  this.$nexttick(()=>{
                      var poppertop = window.getcomputedstyle? window.getcomputedstyle(this.$refs.popper.$el).top : this.$refs.popper.$el.currentstyle.top;
                      if(poppertop <= this.initpoppertop){
                          this.$refs.popper.$el.style.top = parseint(poppertop)+ 25+'px';
                      }
                  })
              }
          }
        });
      },

      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);
      },

      handleoptionselect(option) {
        if (this.multiple) {
          const value = this.value.slice();
          const optionindex = this.getvalueindex(value, option.value);
          if (optionindex > -1) {
              //multiple、allowcreate存在,复选时可以向下拉列表中删除数据
              if(this.allowcreate && option.optcreated && this.notag){
                  if(this.muloptions && this.muloptions.length){
                      this.muloptions.foreach((item,index)=>{
                          if(item.currentvalue == option.currentvalue){
                              this.muloptions.splice(index, 1);
                          }
                      })
                  }
              }
            value.splice(optionindex, 1);
          } else if (this.multiplelimit <= 0 || value.length < this.multiplelimit) {
            value.push(option.value);
          }
          this.$emit('input', value);
          if (option.created) {
             //multiple、allowcreate存在,复选时可以像下拉列表中添加数据
             if(this.allowcreate && this.notag && !option.optcreated){
                  var obj = {
                      optcreated:true,
                      created:option.created,
                      currentlabel:option.currentlabel,
                      currentvalue:option.currentvalue
                  }
                  this.muloptions.push(obj);
             }
            this.query = '';
            this.inputlength = 20;
          }
          if (this.filterable) this.$refs.input.focus();
        } else {
          this.$emit('input', option.value);
          this.visible = false;
        }
        this.$nexttick(() => this.scrolltooption());
      },

      getvalueindex(arr = [], value) {
        const type = typeof value;
        const isobject = type !== 'string' && type !== 'number' && type !== 'boolean';
        if (!isobject) {
          return arr.indexof(value);
        } else {
          const valuekey = this.valuekey;
          let index = -1;
          arr.some((item, i) => {
            if (getvaluebypath(item, valuekey) === getvaluebypath(value, valuekey)) {
              index = i;
              return true;
            }
            return false;
          });
          return index;
        }
      },

      togglemenu() {
        if (this.filterable && this.query === '' && this.visible) {
          return;
        }
        if (!this.disabled) {
          this.visible = !this.visible;
        }
      },

      navigateoptions(direction) {
        if (!this.visible) {
          this.visible = true;
          return;
        }
        if (this.options.length === 0 || this.filteredoptionscount === 0) return;
        this.optionsalldisabled = this.options.length === this.options.filter(item => item.disabled === true).length;
        if (!this.optionsalldisabled) {
          if (direction === 'next') {
            this.hoverindex++;
            if (this.hoverindex === this.options.length) {
              this.hoverindex = 0;
            }
            if (this.options[this.hoverindex].disabled === true ||
              this.options[this.hoverindex].groupdisabled === true ||
              !this.options[this.hoverindex].visible) {
              this.navigateoptions('next');
            }
          }
          if (direction === 'prev') {
            this.hoverindex--;
            if (this.hoverindex < 0) {
              this.hoverindex = this.options.length - 1;
            }
            if (this.options[this.hoverindex].disabled === true ||
              this.options[this.hoverindex].groupdisabled === true ||
              !this.options[this.hoverindex].visible) {
              this.navigateoptions('prev');
            }
          }
        }
        this.$nexttick(() => this.scrolltooption('hover'));
      },

      selectoption() {
        if (this.options[this.hoverindex]) {
          this.handleoptionselect(this.options[this.hoverindex]);
        }
      },

      deleteselected(event) {
        event.stoppropagation();
        this.$emit('input', '');
        this.visible = false;
        this.$emit('clear');
      },

      deletetag(event, tag) {
        let index = this.selected.indexof(tag);
        if (index > -1 && !this.disabled) {
          const value = this.value.slice();
          value.splice(index, 1);
          this.$emit('input', value);
          this.$emit('remove-tag', tag);
        }
        event.stoppropagation();
      },

      oninputchange() {
        if (this.filterable) {
          this.query = this.selectedlabel;
        }
      },

      onoptiondestroy(option) {
        this.optionscount--;
        this.filteredoptionscount--;
        let index = this.options.indexof(option);
        if (index > -1) {
          this.options.splice(index, 1);
        }
        this.broadcast('eloption', 'resetindex');
      },

      resetinputwidth() {
        this.inputwidth = this.$refs.reference.$el.getboundingclientrect().width;
      },

      handleresize() {
        this.resetinputwidth();
        if (this.multiple) this.resetinputheight();
      },

      checkdefaultfirstoption() {
        this.hoverindex = -1;
        for (let i = 0; i !== this.options.length; ++i) {
          const option = this.options[i];
          if (this.query) {
            // pick first options that passes the filter
            if (!option.disabled && !option.groupdisabled && option.visible) {
              this.hoverindex = i;
              break;
            }
          } else {
            // pick currently selected option
            if (option.itemselected) {
              this.hoverindex = i;
              break;
            }
          }
        }
      },

      getvaluekey(item) {
        const type = typeof item.value;
        if (type === 'number' || type === 'string') {
          return item.value;
        } else {
          return getvaluebypath(item.value, this.valuekey);
        }
      }
    },

    created() {
      this.cachedplaceholder = this.currentplaceholder = this.placeholder;
      if (this.multiple && !array.isarray(this.value)) {
        this.$emit('input', []);
      }
      if (!this.multiple && array.isarray(this.value)) {
        this.$emit('input', '');
      }
      this.setselected();

      this.debouncedoninputchange = debounce(this.debounce, () => {
        this.oninputchange();
      });

      this.$on('handleoptionclick', this.handleoptionselect);
      this.$on('onoptiondestroy', this.onoptiondestroy);
      this.$on('setselected', this.setselected);
    },

    mounted() {
      if (this.multiple && array.isarray(this.value) && this.value.length > 0) {
        this.currentplaceholder = '';
      }
      addresizelistener(this.$el, this.handleresize);
      if (this.remote && this.multiple) {
        this.resetinputheight();
      }
      this.$nexttick(() => {
        if (this.$refs.reference && this.$refs.reference.$el) {
          this.inputwidth = this.$refs.reference.$el.getboundingclientrect().width;
        }
      });
    },

    beforedestroy() {
      if (this.$el && this.handleresize) removeresizelistener(this.$el, this.handleresize);
    }
  };
  // dialog_ref

</script>