update Select component
update Select component:filterable
This commit is contained in:
梁灏
parent
e4ebd30438
commit
e4ce99177d
4 changed files with 81 additions and 31 deletions
|
|
@ -18,8 +18,7 @@
|
|||
},
|
||||
data () {
|
||||
return {
|
||||
prefixCls: prefixCls,
|
||||
hidden: false // for search
|
||||
prefixCls: prefixCls
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,17 +12,21 @@
|
|||
<span :class="[`${prefixCls}-selected-value`]" v-show="!showPlaceholder && !multiple && !filterable">{{ selectedSingle }}</span>
|
||||
<input
|
||||
type="text"
|
||||
:class="[`${prefixCls}-input`]"
|
||||
v-if="filterable"
|
||||
v-model="query"
|
||||
:placeholder="placeholder"
|
||||
:class="[`${prefixCls}-input`]"
|
||||
:placeholder="showPlaceholder ? placeholder : ''"
|
||||
:style="inputStyle"
|
||||
@blur="handleBlur">
|
||||
@blur="handleBlur"
|
||||
@keydown="resetInputState"
|
||||
@keydown.delete="handleInputDelete"
|
||||
v-el:input>
|
||||
<Icon type="ios-close" :class="[`${prefixCls}-arrow`]" v-show="showCloseIcon" @click.stop="clearSingleSelect"></Icon>
|
||||
<Icon type="arrow-down-b" :class="[`${prefixCls}-arrow`]"></Icon>
|
||||
</div>
|
||||
<Dropdown v-show="visible" transition="slide-up" v-ref:dropdown>
|
||||
<ul :class="[`${prefixCls}-dropdown-list`]"><slot></slot></ul>
|
||||
<ul v-show="notFound" :class="[`${prefixCls}-not-found`]"><li>未找到</li></ul>
|
||||
<ul v-else :class="[`${prefixCls}-dropdown-list`]"><slot></slot></ul>
|
||||
</Dropdown>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -85,7 +89,8 @@
|
|||
selectedMultiple: [],
|
||||
focusIndex: 0,
|
||||
query: '',
|
||||
inputLength: 20
|
||||
inputLength: 20,
|
||||
notFound: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -124,7 +129,11 @@
|
|||
let style = {};
|
||||
|
||||
if (this.multiple) {
|
||||
style.width = `${this.inputLength}px`;
|
||||
if (this.showPlaceholder) {
|
||||
style.width = '100%';
|
||||
} else {
|
||||
style.width = `${this.inputLength}px`;
|
||||
}
|
||||
}
|
||||
|
||||
return style;
|
||||
|
|
@ -245,6 +254,12 @@
|
|||
return false;
|
||||
}
|
||||
this.model.splice(index, 1);
|
||||
|
||||
if (this.filterable && this.visible) {
|
||||
this.$els.input.focus();
|
||||
}
|
||||
|
||||
this.$broadcast('on-update-popper');
|
||||
},
|
||||
// to select option for single
|
||||
toggleSingleSelected (value, init = false) {
|
||||
|
|
@ -404,6 +419,14 @@
|
|||
}
|
||||
}
|
||||
}, 300);
|
||||
},
|
||||
resetInputState () {
|
||||
this.inputLength = this.$els.input.value.length * 12 + 20;
|
||||
},
|
||||
handleInputDelete () {
|
||||
if (this.multiple && this.model.length && this.query === '') {
|
||||
this.removeTag(this.model.length - 1);
|
||||
}
|
||||
}
|
||||
},
|
||||
ready () {
|
||||
|
|
@ -423,6 +446,9 @@
|
|||
},
|
||||
visible (val) {
|
||||
if (val) {
|
||||
if (this.multiple && this.filterable) {
|
||||
this.$els.input.focus();
|
||||
}
|
||||
this.$broadcast('on-update-popper');
|
||||
} else {
|
||||
|
||||
|
|
@ -430,6 +456,16 @@
|
|||
},
|
||||
query (val) {
|
||||
this.$broadcast('on-query-change', val);
|
||||
let is_hidden = true;
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.findChild((child) => {
|
||||
if (!child.hidden) {
|
||||
is_hidden = false;
|
||||
}
|
||||
});
|
||||
this.notFound = is_hidden;
|
||||
});
|
||||
}
|
||||
},
|
||||
events: {
|
||||
|
|
@ -443,6 +479,12 @@
|
|||
this.removeTag(index);
|
||||
} else {
|
||||
this.model.push(value);
|
||||
this.$broadcast('on-update-popper');
|
||||
}
|
||||
|
||||
if (this.filterable) {
|
||||
this.query = '';
|
||||
this.$els.input.focus();
|
||||
}
|
||||
} else {
|
||||
this.model = value;
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
{{ city | json }}<br>
|
||||
<Button @click="city = 'hangzhou'">切换城市</Button>
|
||||
<br>
|
||||
<i-select v-if="true" :model.sync="city" style="width:200px" @on-change="change">
|
||||
<i-select v-if="true" :model.sync="city" style="width:200px" filterable @on-change="change">
|
||||
<i-option-group label="热门城市">
|
||||
<i-option value="beijing">北京市</i-option>
|
||||
<i-option value="shanghai" disabled label="上海市">上海市2</i-option>
|
||||
|
|
@ -13,31 +13,16 @@
|
|||
<i-option-group label="二线城市">
|
||||
<i-option value="nanjing">南京市</i-option>
|
||||
<i-option value="hangzhou">杭州市</i-option>
|
||||
<i-option value="heilongjiang" disabled>黑龙江市</i-option>
|
||||
</i-option-group>
|
||||
<i-option value="heilongjiang" disabled>黑龙江市</i-option>
|
||||
<i-option-group label="热门城市">
|
||||
<i-option value="beijing">北京市</i-option>
|
||||
<i-option value="shanghai" disabled label="上海市">上海市2</i-option>
|
||||
<i-option value="shenzhen">深圳市</i-option>
|
||||
<i-option-group label="其它城市">
|
||||
<i-option value="jyg">嘉峪关市</i-option>
|
||||
<i-option value="lanzhou">兰州市</i-option>
|
||||
<i-option value="beijingxi">北京西</i-option>
|
||||
</i-option-group>
|
||||
<i-option-group label="二线城市">
|
||||
<i-option value="nanjing">南京市</i-option>
|
||||
<i-option value="hangzhou">杭州市</i-option>
|
||||
</i-option-group>
|
||||
<i-option value="heilongjiang" disabled>黑龙江市</i-option>
|
||||
<i-option-group label="热门城市">
|
||||
<i-option value="beijing">北京市</i-option>
|
||||
<i-option value="shanghai" disabled label="上海市">上海市2</i-option>
|
||||
<i-option value="shenzhen">深圳市</i-option>
|
||||
</i-option-group>
|
||||
<i-option-group label="二线城市">
|
||||
<i-option value="nanjing">南京市</i-option>
|
||||
<i-option value="hangzhou">杭州市</i-option>
|
||||
</i-option-group>
|
||||
<i-option value="heilongjiang" disabled>黑龙江市</i-option>
|
||||
</i-select>
|
||||
|
||||
<i-select :model.sync="focus" style="width:200px" @on-change="change" clearable filterable label-in-value>
|
||||
<i-select v-show="true" :model.sync="focus" style="width:200px" @on-change="change" clearable filterable label-in-value>
|
||||
<i-option value="beijing">北京</i-option>
|
||||
<i-option value="shanghai" label="上海市">上海市</i-option>
|
||||
<i-option value="shenzhen" disabled>深圳市</i-option>
|
||||
|
|
@ -51,6 +36,19 @@
|
|||
<i-option value="e">e市</i-option>
|
||||
</i-select>
|
||||
|
||||
<i-select v-if="true" :model.sync="focus2" style="width:300px" @on-change="change" clearable filterable 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>
|
||||
<i-option value="shijiazhuang">石家庄市</i-option>
|
||||
<i-option value="a">a1市</i-option>
|
||||
<i-option value="b">b2市</i-option>
|
||||
<i-option value="c">c1市</i-option>
|
||||
<i-option value="d">d2市</i-option>
|
||||
<i-option value="e">e1市</i-option>
|
||||
</i-select>
|
||||
|
||||
<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>
|
||||
|
|
@ -84,7 +82,7 @@
|
|||
return {
|
||||
city: '',
|
||||
focus: '',
|
||||
focus2: ['beijing', 'guangzhou', 'b']
|
||||
focus2: ['beijing']
|
||||
// focus2: []
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -163,6 +163,17 @@
|
|||
&-small &-input{
|
||||
height: @input-height-small;
|
||||
}
|
||||
|
||||
&-multiple &-input{
|
||||
height: 25px;
|
||||
line-height: 28px;
|
||||
padding: 0 0 0 6px;
|
||||
}
|
||||
|
||||
&-not-found{
|
||||
text-align: center;
|
||||
color: @btn-disable-color;
|
||||
}
|
||||
}
|
||||
|
||||
.@{select-item-prefix-cls} {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue