update Select style with filterable & prefix

This commit is contained in:
梁灏 2019-04-09 11:42:07 +08:00
parent 90399f8494
commit 9013c49d7c
3 changed files with 26 additions and 4 deletions

View file

@ -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: {

View file

@ -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);