Select: keep input height if not expanded (#9452)

This commit is contained in:
杨奕 2018-01-26 11:24:09 +08:00 committed by Hi-Linlin
parent 34df2e639c
commit e56ae9ab5a
5 changed files with 14 additions and 8 deletions

View File

@ -39,7 +39,7 @@
- [Customize theme](http://element.eleme.io/#/en-US/component/custom-theme) - [Customize theme](http://element.eleme.io/#/en-US/component/custom-theme)
- [Preview and generate theme online](https://elementui.github.io/theme-chalk-preview) - [Preview and generate theme online](https://elementui.github.io/theme-chalk-preview)
- [Element for React](https://github.com/eleme/element-react) - [Element for React](https://github.com/eleme/element-react)
- [Element for Angular](https://github.com/eleme/element-angular) - [Element for Angular](https://github.com/ElemeFE/element-angular)
- [Atom helper](https://github.com/ElemeFE/element-helper) - [Atom helper](https://github.com/ElemeFE/element-helper)
- Starter kit - Starter kit
- [element-starter](https://github.com/ElementUI/element-starter) - [element-starter](https://github.com/ElementUI/element-starter)

View File

@ -10,7 +10,7 @@
<a href="https://github.com/ElementUI/element-theme" class="footer-main-link" target="_blank">{{ langConfig.theme }}</a> <a href="https://github.com/ElementUI/element-theme" class="footer-main-link" target="_blank">{{ langConfig.theme }}</a>
<a href="https://github.com/ElementUI/theme-chalk-preview" class="footer-main-link" target="_blank">{{ langConfig.preview }}</a> <a href="https://github.com/ElementUI/theme-chalk-preview" class="footer-main-link" target="_blank">{{ langConfig.preview }}</a>
<a href="https://github.com/eleme/element-react" class="footer-main-link" target="_blank">Element-React</a> <a href="https://github.com/eleme/element-react" class="footer-main-link" target="_blank">Element-React</a>
<a href="https://github.com/eleme/element-angular" class="footer-main-link" target="_blank">Element-Angular</a> <a href="https://github.com/ElemeFE/element-angular" class="footer-main-link" target="_blank">Element-Angular</a>
</div> </div>
<div class="footer-main"> <div class="footer-main">
<h4>{{ langConfig.community }}</h4> <h4>{{ langConfig.community }}</h4>

View File

@ -510,7 +510,7 @@
}, },
{ {
"name": "Element Angular", "name": "Element Angular",
"href": "https://eleme.github.io/element-angular/" "href": "https://element-angular.faas.ele.me/"
}, },
{ {
"name": "Development", "name": "Development",

View File

@ -33,7 +33,7 @@
v-for="item in selected" v-for="item in selected"
:key="getValueKey(item)" :key="getValueKey(item)"
:closable="!disabled" :closable="!disabled"
size="small" :size="collapseTagSize"
:hit="item.hitState" :hit="item.hitState"
type="info" type="info"
@close="deleteTag($event, item)" @close="deleteTag($event, item)"
@ -581,9 +581,13 @@
let inputChildNodes = this.$refs.reference.$el.childNodes; let inputChildNodes = this.$refs.reference.$el.childNodes;
let input = [].filter.call(inputChildNodes, item => item.tagName === 'INPUT')[0]; let input = [].filter.call(inputChildNodes, item => item.tagName === 'INPUT')[0];
const tags = this.$refs.tags; const tags = this.$refs.tags;
const sizeInMap = sizeMap[this.selectSize] || 40;
input.style.height = this.selected.length === 0 input.style.height = this.selected.length === 0
? (sizeMap[this.selectSize] || 40) + 'px' ? sizeInMap + 'px'
: Math.max(tags ? (tags.clientHeight + 10) : 0, sizeMap[this.selectSize] || 40) + 'px'; : Math.max(
tags ? (tags.clientHeight + (tags.clientHeight > sizeInMap ? 6 : 0)) : 0,
sizeInMap
) + 'px';
if (this.visible && this.emptyText !== false) { if (this.visible && this.emptyText !== false) {
this.broadcast('ElSelectDropdown', 'updatePopper'); this.broadcast('ElSelectDropdown', 'updatePopper');
} }

View File

@ -80,7 +80,6 @@
margin-left: 15px; margin-left: 15px;
color: $--select-multiple-input-color; color: $--select-multiple-input-color;
font-size: $--select-font-size; font-size: $--select-font-size;
vertical-align: middle;
appearance: none; appearance: none;
height: 28px; height: 28px;
background-color: transparent; background-color: transparent;
@ -111,6 +110,9 @@
z-index: $--index-normal; z-index: $--index-normal;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
display: flex;
align-items: center;
flex-wrap: wrap;
} }
.el-tag__close { .el-tag__close {
@ -120,7 +122,7 @@
.el-tag { .el-tag {
box-sizing: border-box; box-sizing: border-box;
border-color: transparent; border-color: transparent;
margin: 3px 0 3px 6px; margin: 2px 0 2px 6px;
background-color: #f0f2f5; background-color: #f0f2f5;
&__close.el-icon-close { &__close.el-icon-close {