update Select style with filterable & prefix
This commit is contained in:
parent
90399f8494
commit
9013c49d7c
3 changed files with 26 additions and 4 deletions
|
@ -1,10 +1,14 @@
|
|||
<template>
|
||||
<div style="margin: 100px;">
|
||||
<Select v-model="model1" style="width:200px" prefix="ios-albums">
|
||||
<Select v-model="model1" filterable style="width:200px" prefix="ios-albums">
|
||||
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
|
||||
</Select>
|
||||
|
||||
<Select v-model="model10" :max-tag-count="2" multiple style="width:400px" prefix="ios-albums">
|
||||
<Select v-model="model10" filterable :max-tag-count="2" multiple style="width:400px">
|
||||
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
|
||||
</Select>
|
||||
|
||||
<Select v-model="model10" filterable :max-tag-count="2" multiple style="width:400px" prefix="ios-albums">
|
||||
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
|
||||
</Select>
|
||||
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div @click="onHeaderClick">
|
||||
<div @click="onHeaderClick" :class="headCls">
|
||||
<span :class="[prefixCls + '-prefix']" v-if="$slots.prefix || prefix">
|
||||
<slot name="prefix">
|
||||
<Icon :type="prefix" v-if="prefix" />
|
||||
|
@ -168,6 +168,12 @@
|
|||
},
|
||||
selectedMultiple(){
|
||||
return this.multiple ? this.values : [];
|
||||
},
|
||||
// 使用 prefix 时,在 filterable
|
||||
headCls () {
|
||||
return {
|
||||
[`${prefixCls}-head-flex`]: this.filterable && (this.$slots.prefix || this.prefix)
|
||||
};
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
|
@ -185,7 +185,7 @@
|
|||
}
|
||||
|
||||
&-multiple &-input{
|
||||
height: @input-height-base - 3px;
|
||||
height: @input-height-base - 2px;
|
||||
line-height: @input-height-base;
|
||||
padding: 0 0 0 4px;
|
||||
}
|
||||
|
@ -260,6 +260,9 @@
|
|||
&-prefix{
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
i{
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
&-head-with-prefix{
|
||||
display: inline-block !important;
|
||||
|
@ -271,6 +274,15 @@
|
|||
&-single &-head-with-prefix, &-multiple &-head-with-prefix{
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
&-head-flex{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&-multiple &-head-flex &-prefix{
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.select-item(@select-prefix-cls, @select-item-prefix-cls);
|
||||
|
|
Loading…
Add table
Reference in a new issue