drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update Select style with filterable & prefix

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

8
examples/routers/select.vue
View file

@ -1,10 +1,14 @@
<template> <template>
<div style="margin: 100px;"> <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> <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select> </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> <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select> </Select>

8
src/components/select/select-head.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div @click="onHeaderClick"> <div @click="onHeaderClick" :class="headCls">
<span :class="[prefixCls + '-prefix']" v-if="$slots.prefix || prefix"> <span :class="[prefixCls + '-prefix']" v-if="$slots.prefix || prefix">
<slot name="prefix"> <slot name="prefix">
<Icon :type="prefix" v-if="prefix" /> <Icon :type="prefix" v-if="prefix" />
@ -168,6 +168,12 @@
}, },
selectedMultiple(){ selectedMultiple(){
return this.multiple ? this.values : []; return this.multiple ? this.values : [];
},
// 使用 prefix 时，在 filterable
headCls () {
return {
[`${prefixCls}-head-flex`]: this.filterable && (this.$slots.prefix || this.prefix)
};
} }
}, },
methods: { methods: {

14
src/styles/components/select.less
View file

@ -185,7 +185,7 @@
} }
&-multiple &-input{ &-multiple &-input{
height: @input-height-base - 3px; height: @input-height-base - 2px;
line-height: @input-height-base; line-height: @input-height-base;
padding: 0 0 0 4px; padding: 0 0 0 4px;
} }
@ -260,6 +260,9 @@
&-prefix{ &-prefix{
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
i{
vertical-align: top;
}
} }
&-head-with-prefix{ &-head-with-prefix{
display: inline-block !important; display: inline-block !important;
@ -271,6 +274,15 @@
&-single &-head-with-prefix, &-multiple &-head-with-prefix{ &-single &-head-with-prefix, &-multiple &-head-with-prefix{
padding-left: 0 !important; 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); .select-item(@select-prefix-cls, @select-item-prefix-cls);