Select: add size property (ElemeFE#1715)

Sancho66 · Dec 13, 2016 · 9c7786b · 9c7786b
1 parent 07b796f
commit 9c7786b
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 3 deletions.
diff --git a/examples/docs/en-US/select.md b/examples/docs/en-US/select.md
@@ -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 | — | — |

diff --git a/examples/docs/zh-CN/select.md b/examples/docs/zh-CN/select.md
@@ -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 | — | — |

diff --git a/packages/select/src/select.vue b/packages/select/src/select.vue
@@ -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');
         });
       },

diff --git a/packages/theme-default/src/select.css b/packages/theme-default/src/select.css
@@ -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 {