我使用的element-ui的版本是1.4.13。
如上图所示，使用el-select组件，要实现可搜索、可复选、可创建条目时，展示样式是如上图所示，输入框的高度会撑开，影响页面布局，按照产品的需求，要调整为以下样式：
（1）在select的props中添加了一个参数notag用来控制是否以字符串形式显示输入框中的数据。添加了上面的el-popover标签，主要是文字超出时显示，这个后面再讲。底下的span标签就是在notag参数为true时显示，data中添加currentsellabel，用来显示处理后的多选数据，将数组转成字符串。
（2）在这里加了一个类，主要是方便后面加span标签的css样式。在select.css文件中的css样式如下面代码所示：
我要评论.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控制
（4）在setselected方法中处理多选时的数据，将数组转成字符串，如下图所示：
（5）文字超出时显示提示框，效果如下：
需要在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原有的搜索框冲突，加了参数控制：
需要在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中
2、在watch中的query中
3、methods的resetinputheight方法中
（7）多选时并且可搜索时，如果条目不存在时，创建条目，并且显示在下拉菜单中，这样可以通过反选删除选中的数据。
1、添加el-option标签，用来显示创建的条目。在data中添加muloptions数组，用来记录创建的条目。
2、handleoptionselect方法中处理数据
3、在option.vue的props中添加optcreated
ok,所有的就改完了，效果如图所示：
以下附源码：
<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>
如对本文有疑问， 点击进行留言回复！！
offset、client、scroll (width,height、left,top、X,Y)
网友评论