Select: add size property (#1715)

pull/1727/head
杨奕 2016-12-13 22:42:01 +08:00 committed by baiyaaaaa
parent 07b796f8c5
commit 9c7786b203
4 changed files with 28 additions and 3 deletions

View File

@ -626,6 +626,7 @@ Create and select new items that are not included in select options
|---------- |-------------- |---------- |-------------------------------- |-------- |
| multiple | whether multiple-select is activated | boolean | — | false |
| disabled | whether Select is disabled | boolean | — | false |
| size | size of Input | string | large/small/mini | — |
| clearable | whether single select can be cleared | boolean | — | false |
| multiple-limit | maximum number of options user can select when `multiple` is `true`. No limit when set to 0 | number | — | 0 |
| name | the name attribute of select input | string | — | — |

View File

@ -628,6 +628,7 @@
|---------- |-------------- |---------- |-------------------------------- |-------- |
| multiple | 是否多选 | boolean | — | false |
| disabled | 是否禁用 | boolean | — | false |
| size | 输入框尺寸 | string | large/small/mini | — |
| clearable | 单选时是否可以清空选项 | boolean | — | false |
| multiple-limit | 多选时用户最多可以选择的项目数,为 0 则不限制 | number | — | 0 |
| name | select input 的 name 属性 | string | — | — |

View File

@ -24,6 +24,7 @@
<input
type="text"
class="el-select__input"
:class="`is-${ size }`"
@focus="visible = true"
@keyup="managePlaceholder"
@keydown="resetInputState"
@ -44,6 +45,7 @@
type="text"
:placeholder="currentPlaceholder"
:name="name"
:size="size"
:disabled="disabled"
:readonly="!filterable || multiple"
@focus="toggleMenu"
@ -92,6 +94,11 @@
import { addClass, removeClass, hasClass } from 'wind-dom/src/class';
import { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event';
import { t } from 'element-ui/src/locale';
const sizeMap = {
'large': 42,
'small': 30,
'mini': 22
};
export default {
mixins: [Emitter, Locale],
@ -149,6 +156,7 @@
props: {
name: String,
value: {},
size: String,
disabled: Boolean,
clearable: Boolean,
filterable: Boolean,
@ -186,6 +194,7 @@
selectedLabel: '',
hoverIndex: -1,
query: '',
isForcedVisible: false,
bottomOverflowBeforeHidden: 0,
topOverflowBeforeHidden: 0,
optionsAllDisabled: false,
@ -222,6 +231,10 @@
if (this.multiple && this.filterable) {
this.resetInputHeight();
}
if (this.isForcedVisible) {
this.isForcedVisible = false;
return;
}
if (this.remote && typeof this.remoteMethod === 'function') {
this.hoverIndex = -1;
this.remoteMethod(val);
@ -268,6 +281,10 @@
if (this.multiple) {
this.$refs.input.focus();
} else {
if (!this.remote) {
this.isForcedVisible = true;
this.broadcast('ElOption', 'queryChange', '');
}
this.broadcast('ElInput', 'inputSelect');
}
}
@ -413,13 +430,14 @@
resetInputState(e) {
if (e.keyCode !== 8) this.toggleLastOptionHitState(false);
this.inputLength = this.$refs.input.value.length * 15 + 20;
this.resetInputHeight();
},
resetInputHeight() {
this.$nextTick(() => {
let inputChildNodes = this.$refs.reference.$el.childNodes;
let input = [].filter.call(inputChildNodes, item => item.tagName === 'INPUT')[0];
input.style.height = Math.max(this.$refs.tags.clientHeight + 6, this.size === 'small' ? 28 : 36) + 'px';
input.style.height = Math.max(this.$refs.tags.clientHeight + 6, sizeMap[this.size] || 36) + 'px';
this.broadcast('ElSelectDropdown', 'updatePopper');
});
},

View File

@ -71,13 +71,16 @@
border: none;
outline: none;
padding: 0;
margin: 4px 0 -3px 10px;
margin-left: 10px;
color: var(--select-multiple-input-color);
font-size: var(--select-font-size);
vertical-align: baseline;
appearance: none;
height: 28px;
background-color: transparent;
@when mini {
height: 14px;
}
}
@e close {
@ -100,6 +103,8 @@
line-height: normal;
white-space: normal;
z-index: var(--index-top);
top: 50%;
transform: translateY(-50%);
}
& .el-tag__close {
@ -110,7 +115,7 @@
height: var(--select-tag-height);
line-height: var(--select-tag-height);
box-sizing: border-box;
margin: 6px 0 0 6px;
margin: 3px 0 3px 6px;
}
@e tag {