mirror of https://github.com/ElemeFE/element
Select: add size property (#1715)
parent
07b796f8c5
commit
9c7786b203
|
@ -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 | — | — |
|
||||
|
|
|
@ -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 | — | — |
|
||||
|
|
|
@ -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');
|
||||
});
|
||||
},
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Reference in New Issue