From e56ae9ab5acb8a8d603a2fbaf93d96c0edb2b303 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=A8=E5=A5=95?= Date: Fri, 26 Jan 2018 11:24:09 +0800 Subject: [PATCH] Select: keep input height if not expanded (#9452) --- README.md | 2 +- examples/components/footer.vue | 2 +- examples/nav.config.json | 2 +- packages/select/src/select.vue | 10 +++++++--- packages/theme-chalk/src/select.scss | 6 ++++-- 5 files changed, 14 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index eef9b6af7..e6a30e1ad 100644 --- a/README.md +++ b/README.md @@ -39,7 +39,7 @@ - [Customize theme](http://element.eleme.io/#/en-US/component/custom-theme) - [Preview and generate theme online](https://elementui.github.io/theme-chalk-preview) - [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) - Starter kit - [element-starter](https://github.com/ElementUI/element-starter) diff --git a/examples/components/footer.vue b/examples/components/footer.vue index c3e710c0e..99c188523 100644 --- a/examples/components/footer.vue +++ b/examples/components/footer.vue @@ -10,7 +10,7 @@ {{ langConfig.theme }} {{ langConfig.preview }} Element-React - Element-Angular + Element-Angular

{{ langConfig.community }}

diff --git a/examples/nav.config.json b/examples/nav.config.json index e3fc85636..688eaad25 100644 --- a/examples/nav.config.json +++ b/examples/nav.config.json @@ -510,7 +510,7 @@ }, { "name": "Element Angular", - "href": "https://eleme.github.io/element-angular/" + "href": "https://element-angular.faas.ele.me/" }, { "name": "Development", diff --git a/packages/select/src/select.vue b/packages/select/src/select.vue index 46d2938e4..7412641f7 100644 --- a/packages/select/src/select.vue +++ b/packages/select/src/select.vue @@ -33,7 +33,7 @@ v-for="item in selected" :key="getValueKey(item)" :closable="!disabled" - size="small" + :size="collapseTagSize" :hit="item.hitState" type="info" @close="deleteTag($event, item)" @@ -581,9 +581,13 @@ let inputChildNodes = this.$refs.reference.$el.childNodes; let input = [].filter.call(inputChildNodes, item => item.tagName === 'INPUT')[0]; const tags = this.$refs.tags; + const sizeInMap = sizeMap[this.selectSize] || 40; input.style.height = this.selected.length === 0 - ? (sizeMap[this.selectSize] || 40) + 'px' - : Math.max(tags ? (tags.clientHeight + 10) : 0, sizeMap[this.selectSize] || 40) + 'px'; + ? sizeInMap + 'px' + : Math.max( + tags ? (tags.clientHeight + (tags.clientHeight > sizeInMap ? 6 : 0)) : 0, + sizeInMap + ) + 'px'; if (this.visible && this.emptyText !== false) { this.broadcast('ElSelectDropdown', 'updatePopper'); } diff --git a/packages/theme-chalk/src/select.scss b/packages/theme-chalk/src/select.scss index 6dc356286..a6103da06 100644 --- a/packages/theme-chalk/src/select.scss +++ b/packages/theme-chalk/src/select.scss @@ -80,7 +80,6 @@ margin-left: 15px; color: $--select-multiple-input-color; font-size: $--select-font-size; - vertical-align: middle; appearance: none; height: 28px; background-color: transparent; @@ -111,6 +110,9 @@ z-index: $--index-normal; top: 50%; transform: translateY(-50%); + display: flex; + align-items: center; + flex-wrap: wrap; } .el-tag__close { @@ -120,7 +122,7 @@ .el-tag { box-sizing: border-box; border-color: transparent; - margin: 3px 0 3px 6px; + margin: 2px 0 2px 6px; background-color: #f0f2f5; &__close.el-icon-close {