update Select component
update Select component:add filterable
This commit is contained in:
梁灏
parent
e355dd49d3
commit
e4ebd30438
4 changed files with 63 additions and 12 deletions
|
|
@ -18,7 +18,8 @@
|
|||
},
|
||||
data () {
|
||||
return {
|
||||
prefixCls: prefixCls
|
||||
prefixCls: prefixCls,
|
||||
hidden: false // for search
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<li :class="classes" @click.stop="select" @mouseout.stop="blur"><slot>{{ showLabel }}</slot></li>
|
||||
<li :class="classes" @click.stop="select" @mouseout.stop="blur" v-show="!hidden"><slot>{{ showLabel }}</slot></li>
|
||||
</template>
|
||||
<script>
|
||||
const prefixCls = 'ivu-select-item';
|
||||
|
|
@ -23,7 +23,9 @@
|
|||
return {
|
||||
selected: false,
|
||||
index: 0, // for up and down to focus
|
||||
isFocus: false
|
||||
isFocus: false,
|
||||
hidden: false, // for search
|
||||
searchLabel: '' // the value is slot,only for search
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -51,14 +53,20 @@
|
|||
},
|
||||
blur () {
|
||||
this.isFocus = false;
|
||||
},
|
||||
queryChange (val) {
|
||||
this.hidden = !new RegExp(val, 'i').test(this.searchLabel);
|
||||
}
|
||||
},
|
||||
ready () {
|
||||
|
||||
this.searchLabel = this.$el.innerHTML;
|
||||
},
|
||||
events: {
|
||||
'on-select-close' () {
|
||||
this.isFocus = false;
|
||||
},
|
||||
'on-query-change' (val) {
|
||||
this.queryChange(val);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,7 +16,8 @@
|
|||
v-if="filterable"
|
||||
v-model="query"
|
||||
:placeholder="placeholder"
|
||||
:style="inputStyle">
|
||||
:style="inputStyle"
|
||||
@blur="handleBlur">
|
||||
<Icon type="ios-close" :class="[`${prefixCls}-arrow`]" v-show="showCloseIcon" @click.stop="clearSingleSelect"></Icon>
|
||||
<Icon type="arrow-down-b" :class="[`${prefixCls}-arrow`]"></Icon>
|
||||
</div>
|
||||
|
|
@ -209,6 +210,10 @@
|
|||
child.selected = false;
|
||||
});
|
||||
this.model = '';
|
||||
|
||||
if (this.filterable) {
|
||||
this.query = '';
|
||||
}
|
||||
}
|
||||
},
|
||||
updateMultipleSelected (init = false) {
|
||||
|
|
@ -342,24 +347,32 @@
|
|||
}
|
||||
|
||||
let child_status = {
|
||||
disabled: false
|
||||
disabled: false,
|
||||
hidden: false
|
||||
};
|
||||
|
||||
let find_deep = false; // can next find allowed
|
||||
|
||||
this.findChild((child) => {
|
||||
if (child.index === this.focusIndex) {
|
||||
child_status.disabled = child.disabled;
|
||||
child_status.hidden = child.hidden;
|
||||
|
||||
if (!child.disabled) {
|
||||
if (!child.disabled && !child.hidden) {
|
||||
child.isFocus = true;
|
||||
}
|
||||
} else {
|
||||
child.isFocus = false;
|
||||
}
|
||||
|
||||
if (!child.hidden && !child.disabled) {
|
||||
find_deep = true;
|
||||
}
|
||||
});
|
||||
|
||||
this.resetScrollTop();
|
||||
|
||||
if (child_status.disabled) {
|
||||
if ((child_status.disabled || child_status.hidden) && find_deep) {
|
||||
this.navigateOptions(direction);
|
||||
}
|
||||
},
|
||||
|
|
@ -374,6 +387,23 @@
|
|||
if (topOverflowDistance < 0) {
|
||||
this.$refs.dropdown.$el.scrollTop += topOverflowDistance;
|
||||
}
|
||||
},
|
||||
handleBlur () {
|
||||
setTimeout(() => {
|
||||
const model = this.model;
|
||||
|
||||
if (this.multiple) {
|
||||
|
||||
} else {
|
||||
if (model !== '') {
|
||||
this.findChild((child) => {
|
||||
if (child.value === model) {
|
||||
this.query = child.searchLabel;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}, 300);
|
||||
}
|
||||
},
|
||||
ready () {
|
||||
|
|
@ -397,6 +427,9 @@
|
|||
} else {
|
||||
|
||||
}
|
||||
},
|
||||
query (val) {
|
||||
this.$broadcast('on-query-change', val);
|
||||
}
|
||||
},
|
||||
events: {
|
||||
|
|
@ -413,6 +446,14 @@
|
|||
}
|
||||
} else {
|
||||
this.model = value;
|
||||
|
||||
if (this.filterable) {
|
||||
this.findChild((child) => {
|
||||
if (child.value === value) {
|
||||
this.query = child.searchLabel;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
{{ city | json }}<br>
|
||||
<Button @click="city = 'hangzhou'">切换城市</Button>
|
||||
<br>
|
||||
<i-select :model.sync="city" style="width:200px" @on-change="change">
|
||||
<i-select v-if="true" :model.sync="city" style="width:200px" @on-change="change">
|
||||
<i-option-group label="热门城市">
|
||||
<i-option value="beijing">北京市</i-option>
|
||||
<i-option value="shanghai" disabled label="上海市">上海市2</i-option>
|
||||
|
|
@ -38,11 +38,12 @@
|
|||
</i-select>
|
||||
|
||||
<i-select :model.sync="focus" style="width:200px" @on-change="change" clearable filterable label-in-value>
|
||||
<i-option value="beijing">北京市</i-option>
|
||||
<i-option value="beijing">北京</i-option>
|
||||
<i-option value="shanghai" label="上海市">上海市</i-option>
|
||||
<i-option value="shenzhen" disabled>深圳市</i-option>
|
||||
<i-option value="guangzhou" label="广州市">广州市2</i-option>
|
||||
<i-option value="shijiazhuang" disabled>石家庄市</i-option>
|
||||
<!--<i-option value="shijiazhuang2">石家庄市2</i-option>-->
|
||||
<i-option value="a">a市</i-option>
|
||||
<i-option value="b">b市</i-option>
|
||||
<i-option value="c">c市</i-option>
|
||||
|
|
@ -50,8 +51,8 @@
|
|||
<i-option value="e">e市</i-option>
|
||||
</i-select>
|
||||
|
||||
<i-select :model.sync="focus2" style="width:300px" @on-change="change" clearable multiple>
|
||||
<i-option value="beijing">北京市</i-option>
|
||||
<i-select v-if="true" :model.sync="focus2" style="width:300px" @on-change="change" clearable multiple>
|
||||
<i-option value="beijing" label="北京市">北京2</i-option>
|
||||
<i-option value="shanghai">上海市</i-option>
|
||||
<i-option value="shenzhen" disabled>深圳市</i-option>
|
||||
<i-option value="guangzhou">广州市</i-option>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue