Form: add size attribute (#7428)

build/bin/build-entry.js

@@ -31,6 +31,9 @@ const install = function(Vue, opts = {}) {
 
   Vue.use(Loading.directive);
 
+  const ELEMENT = {};
+  ELEMENT.size = opts.size || '';
+
   Vue.prototype.$loading = Loading.service;
   Vue.prototype.$msgbox = MessageBox;
   Vue.prototype.$alert = MessageBox.alert;
@@ -38,6 +41,8 @@ const install = function(Vue, opts = {}) {
   Vue.prototype.$prompt = MessageBox.prompt;
   Vue.prototype.$notify = Notification;
   Vue.prototype.$message = Message;
+
+  Vue.prototype.$ELEMENT = ELEMENT;
 };
 
 /* istanbul ignore if */

examples/docs/en-US/cascader.md

@@ -1678,7 +1678,7 @@ Search and select options with a keyword.
 | filterable  | whether the options can be searched | boolean | — | — |
 | debounce | debounce delay when typing filter keyword, in milliseconds | number | — | 300 |
 | change-on-select | whether selecting an option of any level is permitted | boolean | — | false |
-| size  | size of Input | string | large / small / mini | — |
+| size  | size of Input | string | medium / small / mini | — |
 
 ### props
 | Attribute | Description | Type | Accepted Values | Default |

examples/docs/en-US/dialog.md

@@ -287,7 +287,7 @@ If the variable bound to `visible` is managed in Vuex store, the `.sync` can not
 | title     | title of Dialog. Can also be passed with a named slot (see the following table) | string    | — | — |
 | width     | width of Dialog | string    | — | 50% |
 | fullscreen     | whether the Dialog takes up full screen | boolean    | — | false |
-| top      | value for `margin-top` of Dialog CSS, works when `size` is not `full` | string    | — | 15vh |
+| top      | value for `margin-top` of Dialog CSS | string    | — | 15vh |
 | modal     | whether a mask is displayed | boolean   | — | true |
 | modal-append-to-body     | whether to append modal to body element. If false, the modal will be appended to Dialog's parent element | boolean   | — | true |
 | append-to-body     | whether to append Dialog itself to body. A nested Dialog should have this attribute set to `true` | boolean   | — | false |

examples/docs/en-US/form.md

@@ -739,6 +739,51 @@ This example shows how to customize your own validation rules to finish a two-fa
 When an `el-form-item` is nested in another `el-form-item`, its label width will be `0`. You can set `label-width` on that `el-form-item` if needed.
 :::
 
+### Size control
+
+All components in a Form inherit their `size` attribute from that Form. Similarly, FormItem also has a `size` attribute.
+
+::: demo Still you can fine tune each component's `size` if you don't want that component to inherit its size from From or FormIten.
+```html
+<el-form ref="form" :model="form" label-width="120px" size="mini">
+  <el-form-item label="Activity name">
+    <el-input v-model="form.name"></el-input>
+  </el-form-item>
+  <el-form-item label="Activity zone">
+    <el-select v-model="form.region" placeholder="please select your zone">
+      <el-option label="Zone one" value="shanghai"></el-option>
+      <el-option label="Zone two" value="beijing"></el-option>
+    </el-select>
+  </el-form-item>
+  <el-form-item label="Activity time">
+    <el-col :span="11">
+      <el-date-picker type="date" placeholder="Pick a date" v-model="form.date1" style="width: 100%;"></el-date-picker>
+    </el-col>
+    <el-col class="line" :span="2">-</el-col>
+    <el-col :span="11">
+      <el-time-picker type="fixed-time" placeholder="Pick a time" v-model="form.date2" style="width: 100%;"></el-time-picker>
+    </el-col>
+  </el-form-item>
+  <el-form-item label="Activity type">
+    <el-checkbox-group v-model="form.type">
+      <el-checkbox-button label="Online activities" name="type"></el-checkbox-button>
+      <el-checkbox-button label="Promotion activities" name="type"></el-checkbox-button>
+    </el-checkbox-group>
+  </el-form-item>
+  <el-form-item label="Resources">
+    <el-radio-group v-model="form.resource" size="medium">
+      <el-radio border label="Sponsor"></el-radio>
+      <el-radio border label="Venue"></el-radio>
+    </el-radio-group>
+  </el-form-item>
+  <el-form-item size="large">
+    <el-button type="primary" @click="onSubmit">Create</el-button>
+    <el-button>Cancel</el-button>
+  </el-form-item>
+</el-form>
+```
+:::
+
 ### Form Attributes
 
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
@@ -752,6 +797,7 @@ When an `el-form-item` is nested in another `el-form-item`, its label width will
 | show-message  | whether to show the error message | boolean | — | true |
 | inline-message  | whether to display the error message inline with the form item | boolean | — | false |
 | status-icon  | whether to display an icon indicating the validation result | boolean | — | false |
+| size  | control the size of components in this form | string | medium / small / mini | - |
 
 ### Form Methods
 
@@ -773,6 +819,7 @@ When an `el-form-item` is nested in another `el-form-item`, its label width will
 | error | field error message, set its value and the field will validate error and show this message immediately | string | — | — |
 | show-message  | whether to show the error message | boolean | — | true |
 | inline-message  | inline style validate message | boolean | — | false |
+| size  | control the size of components in this form-item | string | medium / small / mini | - |
 
 ### Form-Item Slot
 | Name | Description |

examples/docs/zh-CN/cascader.md

@@ -1678,7 +1678,7 @@
 | filterable | 是否可搜索选项 | boolean | — | — |
 | debounce | 搜索关键词输入的去抖延迟，毫秒 | number | — | 300 |
 | change-on-select | 是否允许选择任意一级的选项 | boolean | — | false |
-| size | 尺寸 | string | large / small / mini | — |
+| size | 尺寸 | string | medium / small / mini | — |
 
 ### props
 | 参数     | 说明              | 类型   | 可选值 | 默认值 |

examples/docs/zh-CN/dialog.md

@@ -282,7 +282,7 @@ Dialog 组件的内容可以是任意的，甚至可以是表格或表单，下
 | title     | Dialog 的标题，也可通过具名 slot （见下表）传入 | string    | — | — |
 | width     | Dialog 的宽度 | string    | — | 50% |
 | fullscreen     | 是否为全屏 Dialog | boolean    | — | false |
-| top       | Dialog CSS 中的 margin-top 值（仅在 size 不为 full 时有效） | string | — | 15vh |
+| top       | Dialog CSS 中的 margin-top 值 | string | — | 15vh |
 | modal     | 是否需要遮罩层   | boolean   | — | true |
 | modal-append-to-body     | 遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 Dialog 的父元素上   | boolean   | — | true |
 | append-to-body     | Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true   | boolean   | — | false |

examples/docs/zh-CN/form.md

@@ -728,6 +728,52 @@
 嵌套在 `el-form-item` 中的 `el-form-item` 标签宽度默认为零，不会继承 `el-form` 的 `label-width`。如果需要可以为其单独设置 `label-width` 属性。
 :::
 
+### 表单内组件尺寸控制
+
+通过设置 Form 上的 `size` 属性可以使该表单内所有可调节大小的组件继承该尺寸。Form-Item 也具有该属性。
+
+::: demo 如果希望某个表单项或某个表单组件的尺寸不同于 Form 上的`size`属性，直接为这个表单项或表单组件设置自己的`size`即可。
+```html
+<el-form ref="form" :model="form" label-width="80px" size="mini">
+  <el-form-item label="活动名称">
+    <el-input v-model="form.name"></el-input>
+  </el-form-item>
+  <el-form-item label="活动区域">
+    <el-select v-model="form.region" placeholder="请选择活动区域">
+      <el-option label="区域一" value="shanghai"></el-option>
+      <el-option label="区域二" value="beijing"></el-option>
+    </el-select>
+  </el-form-item>
+  <el-form-item label="活动时间">
+    <el-col :span="11">
+      <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
+    </el-col>
+    <el-col class="line" :span="2">-</el-col>
+    <el-col :span="11">
+      <el-time-picker type="fixed-time" placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
+    </el-col>
+  </el-form-item>
+  <el-form-item label="活动性质">
+    <el-checkbox-group v-model="form.type">
+      <el-checkbox-button label="美食/餐厅线上活动" name="type"></el-checkbox-button>
+      <el-checkbox-button label="地推活动" name="type"></el-checkbox-button>
+      <el-checkbox-button label="线下主题活动" name="type"></el-checkbox-button>
+    </el-checkbox-group>
+  </el-form-item>
+  <el-form-item label="特殊资源">
+    <el-radio-group v-model="form.resource" size="medium">
+      <el-radio border label="线上品牌商赞助"></el-radio>
+      <el-radio border label="线下场地免费"></el-radio>
+    </el-radio-group>
+  </el-form-item>
+  <el-form-item size="large">
+    <el-button type="primary" @click="onSubmit">立即创建</el-button>
+    <el-button>取消</el-button>
+  </el-form-item>
+</el-form>
+```
+:::
+
 ### Form Attributes
 
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
@@ -741,6 +787,7 @@
 | show-message  | 是否显示校验错误信息 | boolean | — | true |
 | inline-message  | 是否以行内形式展示校验信息 | boolean | — | false |
 | status-icon  | 是否在输入框中显示校验结果反馈图标 | boolean | — | false |
+| size  | 用于控制该表单内组件的尺寸 | string | medium / small / mini | - |
 
 ### Form Methods
 
@@ -762,6 +809,7 @@
 | error    | 表单域验证错误信息, 设置该值会使表单验证状态变为`error`，并显示该错误信息 | string | — | — |
 | show-message  | 是否显示校验错误信息 | boolean | — | true |
 | inline-message  | 以行内形式展示校验信息 | boolean | — | false |
+| size  | 用于控制该表单域下组件的尺寸 | string | medium / small / mini | - |
 
 ### Form-Item Slot
 | name | 说明 |

packages/button/src/button.vue

@@ -7,7 +7,7 @@
     :type="nativeType"
     :class="[
       type ? 'el-button--' + type : '',
-      size ? 'el-button--' + size : '',
+      buttonSize ? 'el-button--' + buttonSize : '',
       {
         'is-disabled': disabled,
         'is-loading': loading,
@@ -25,6 +25,8 @@
   export default {
     name: 'ElButton',
 
+    inject: ['elFormItem'],
+
     props: {
       type: {
         type: String,
@@ -46,6 +48,15 @@
       round: Boolean
     },
 
+    computed: {
+      _elFormItemSize() {
+        return (this.elFormItem || {}).elFormItemSize;
+      },
+      buttonSize() {
+        return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
+      }
+    },
+
     methods: {
       handleClick(evt) {
         this.$emit('click', evt);

packages/cascader/src/main.vue

@@ -6,7 +6,7 @@
         'is-opened': menuVisible,
         'is-disabled': disabled
       },
-      size ? 'el-cascader--' + size : ''
+      cascaderSize ? 'el-cascader--' + cascaderSize : ''
     ]"
     @click="handleClick"
     @mouseenter="inputHover = true"
@@ -87,6 +87,8 @@ export default {
 
   mixins: [popperMixin, emitter, Locale],
 
+  inject: ['elFormItem'],
+
   components: {
     ElInput
   },
@@ -179,6 +181,12 @@ export default {
         }
       });
       return labels;
+    },
+    _elFormItemSize() {
+      return (this.elFormItem || {}).elFormItemSize;
+    },
+    cascaderSize() {
+      return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
     }
   },
 

packages/checkbox/src/checkbox-button.vue

@@ -51,6 +51,8 @@
 
     mixins: [Emitter],
 
+    inject: ['elFormItem'],
+
     data() {
       return {
         selfModel: false,
@@ -133,8 +135,12 @@
         };
       },
 
+      _elFormItemSize() {
+        return (this.elFormItem || {}).elFormItemSize;
+      },
+
       size() {
-        return this._checkboxGroup.size;
+        return this._checkboxGroup.checkboxGroupSize || this._elFormItemSize || (this.$ELEMENT || {}).size;
       },
 
       isDisabled() {

packages/checkbox/src/checkbox-group.vue

@@ -8,6 +8,8 @@
 
     mixins: [Emitter],
 
+    inject: ['elFormItem'],
+
     props: {
       value: {},
       disabled: Boolean,
@@ -18,6 +20,15 @@
       textColor: String
     },
 
+    computed: {
+      _elFormItemSize() {
+        return (this.elFormItem || {}).elFormItemSize;
+      },
+      checkboxGroupSize() {
+        return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
+      }
+    },
+
     watch: {
       value(value) {
         this.dispatch('ElFormItem', 'el.form.change', [value]);

packages/checkbox/src/checkbox.vue

@@ -60,6 +60,8 @@
 
     mixins: [Emitter],
 
+    inject: ['elFormItem'],
+
     componentName: 'ElCheckbox',
 
     data() {
@@ -131,10 +133,15 @@
           : this.disabled;
       },
 
+      _elFormItemSize() {
+        return (this.elFormItem || {}).elFormItemSize;
+      },
+
       checkboxSize() {
+        const temCheckboxSize = this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
         return this.isGroup
-          ? this._checkboxGroup.size || this.size
-          : this.size;
+          ? this._checkboxGroup.checkboxGroupSize || temCheckboxSize
+          : temCheckboxSize;
       }
     },
 

packages/color-picker/src/main.vue

@@ -3,7 +3,7 @@
     :class="[
       'el-color-picker',
       disabled ? 'is-disabled' : '',
-      size ? `el-color-picker--${ size }` : ''
+      colorSize ? `el-color-picker--${ colorSize }` : ''
     ]"
     v-clickoutside="hide">
     <div class="el-color-picker__mask" v-if="disabled"></div>
@@ -46,6 +46,8 @@
       popperClass: String
     },
 
+    inject: ['elFormItem'],
+
     directives: { Clickoutside },
 
     computed: {
@@ -58,6 +60,14 @@
             ? `rgba(${ r }, ${ g }, ${ b }, ${ this.color.get('alpha') / 100 })`
             : `rgb(${ r }, ${ g }, ${ b })`;
         }
+      },
+
+      _elFormItemSize() {
+        return (this.elFormItem || {}).elFormItemSize;
+      },
+
+      colorSize() {
+        return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
       }
     },
 

packages/date-picker/src/picker.vue

@@ -4,7 +4,7 @@
     :class="'el-date-editor--' + type"
     :readonly="!editable || readonly"
     :disabled="disabled"
-    :size="size"
+    :size="pickerSize"
     :name="name"
     v-if="!ranged"
     v-clickoutside="handleClose"
@@ -31,7 +31,7 @@
     class="el-date-editor el-range-editor el-input__inner"
     :class="[
       'el-date-editor--' + type,
-      'el-range-editor--' + size,
+      'el-range-editor--' + pickerSize,
       pickerVisible ? 'is-active' : ''
     ]"
     @click="handleRangeClick"
@@ -266,6 +266,8 @@ const valueEquals = function(a, b) {
 export default {
   mixins: [Emitter, NewPopper, Focus('reference')],
 
+  inject: ['elFormItem'],
+
   props: {
     size: String,
     format: String,
@@ -421,6 +423,14 @@ export default {
       } else {
         return this.value;
       }
+    },
+
+    _elFormItemSize() {
+      return (this.elFormItem || {}).elFormItemSize;
+    },
+
+    pickerSize() {
+      return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
     }
   },
 

packages/dropdown/src/dropdown.vue

@@ -56,6 +56,12 @@
       };
     },
 
+    computed: {
+      dropdownSize() {
+        return this.size || (this.$ELEMENT || {}).size;
+      }
+    },
+
     mounted() {
       this.$on('menu-item-click', this.handleMenuItemClick);
       this.initEvent();
@@ -114,7 +120,7 @@
     },
 
     render(h) {
-      let { hide, splitButton, type, size } = this;
+      let { hide, splitButton, type, dropdownSize } = this;
 
       var handleMainButtonClick = (event) => {
         this.$emit('click', event);
@@ -124,10 +130,10 @@
       let triggerElm = !splitButton
         ? this.$slots.default
         : (<el-button-group>
-            <el-button type={type} size={size} nativeOn-click={handleMainButtonClick}>
+            <el-button type={type} size={dropdownSize} nativeOn-click={handleMainButtonClick}>
               {this.$slots.default}
             </el-button>
-            <el-button ref="trigger" type={type} size={size} class="el-dropdown__caret-button">
+            <el-button ref="trigger" type={type} size={dropdownSize} class="el-dropdown__caret-button">
               <i class="el-dropdown__icon el-icon-caret-bottom"></i>
             </el-button>
           </el-button-group>);

packages/form/src/form-item.vue

@@ -86,7 +86,8 @@
       showMessage: {
         type: Boolean,
         default: true
-      }
+      },
+      size: String
     },
     watch: {
       error(value) {
@@ -158,6 +159,12 @@
           });
         }
         return isRequired;
+      },
+      _formSize() {
+        return this.elForm.size;
+      },
+      elFormItemSize() {
+        return this.size || this._formSize;
       }
     },
     data() {

packages/form/src/form.vue

@@ -33,7 +33,8 @@
       showMessage: {
         type: Boolean,
         default: true
-      }
+      },
+      size: String
     },
     watch: {
       rules() {

packages/input-number/src/input-number.vue

 <template>
   <div class="el-input-number"
     :class="[
-      size ? 'el-input-number--' + size : '',
+      inputNumberSize ? 'el-input-number--' + inputNumberSize : '',
       { 'is-disabled': disabled },
       { 'is-without-controls': !controls },
       { 'is-controls-right': controlsAtRight }
@@ -35,7 +35,7 @@
       @focus="handleFocus"
       @input="debounceHandleInput"
       :disabled="disabled"
-      :size="size"
+      :size="inputNumberSize"
       :max="max"
       :min="min"
       :name="name"
@@ -60,6 +60,7 @@
   export default {
     name: 'ElInputNumber',
     mixins: [Focus('input')],
+    inject: ['elFormItem'],
     directives: {
       repeatClick: RepeatClick
     },
@@ -130,6 +131,12 @@
       },
       controlsAtRight() {
         return this.controlsPosition === 'right';
+      },
+      _elFormItemSize() {
+        return (this.elFormItem || {}).elFormItemSize;
+      },
+      inputNumberSize() {
+        return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
       }
     },
     methods: {

packages/input/src/input.vue

 <template>
   <div :class="[
     type === 'textarea' ? 'el-textarea' : 'el-input',
-    size ? 'el-input--' + size : '',
+    inputSize ? 'el-input--' + inputSize : '',
     {
       'is-disabled': disabled,
       'el-input-group': $slots.prepend || $slots.append,
@@ -139,6 +139,9 @@
     },
 
     computed: {
+      _elFormItemSize() {
+        return (this.elFormItem || {}).elFormItemSize;
+      },
       validateState() {
         return this.elFormItem ? this.elFormItem.validateState : '';
       },
@@ -152,6 +155,9 @@
       textareaStyle() {
         return merge({}, this.textareaCalcStyle, { resize: this.resize });
       },
+      inputSize() {
+        return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
+      },
       isGroup() {
         return this.$slots.prepend || this.$slots.append;
       }

packages/radio/src/radio-button.vue

@@ -36,11 +36,14 @@
 
     mixins: [Emitter],
 
+    inject: ['elFormItem'],
+
     props: {
       label: {},
       disabled: Boolean,
       name: String
     },
+
     computed: {
       value: {
         get() {
@@ -69,8 +72,11 @@
           color: this._radioGroup.textColor || ''
         };
       },
+      _elFormItemSize() {
+        return (this.elFormItem || {}).elFormItemSize;
+      },
       size() {
-        return this._radioGroup.size;
+        return this._radioGroup.radioGroupSize || this._elFormItemSize || (this.$ELEMENT || {}).size;
       },
       isDisabled() {
         return this.disabled || this._radioGroup.disabled;

packages/radio/src/radio-group.vue

@@ -21,6 +21,8 @@
 
     componentName: 'ElRadioGroup',
 
+    inject: ['elFormItem'],
+
     mixins: [Emitter],
 
     props: {
@@ -30,6 +32,16 @@
       textColor: String,
       disabled: Boolean
     },
+
+    computed: {
+      _elFormItemSize() {
+        return (this.elFormItem || {}).elFormItemSize;
+      },
+      radioGroupSize() {
+        return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
+      }
+    },
+
     created() {
       this.$on('handleChange', value => {
         this.$emit('change', value);

packages/radio/src/radio.vue

@@ -48,6 +48,8 @@
 
     mixins: [Emitter],
 
+    inject: ['elFormItem'],
+
     componentName: 'ElRadio',
 
     props: {
@@ -89,10 +91,14 @@
           }
         }
       },
+      _elFormItemSize() {
+        return (this.elFormItem || {}).elFormItemSize;
+      },
       radioSize() {
+        const temRadioSize = this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
         return this.isGroup
-          ? this._radioGroup.size || this.size
-          : this.size;
+          ? this._radioGroup.radioGroupSize || temRadioSize
+          : temRadioSize;
       },
       isDisabled() {
         return this.isGroup

packages/select/src/select.vue

 <template>
   <div
     class="el-select"
-    :class="[size ? 'el-select--' + size : '']"
+    :class="[selectSize ? 'el-select--' + selectSize : '']"
     v-clickoutside="handleClose">
     <div
       class="el-select__tags"
@@ -140,6 +140,8 @@
 
     componentName: 'ElSelect',
 
+    inject: ['elFormItem'],
+
     provide() {
       return {
         'select': this
@@ -147,6 +149,9 @@
     },
 
     computed: {
+      _elFormItemSize() {
+        return (this.elFormItem || {}).elFormItemSize;
+      },
       iconClass() {
         let criteria = this.clearable &&
           !this.disabled &&
@@ -180,6 +185,10 @@
         let hasExistingOption = this.options.filter(option => !option.created)
           .some(option => option.currentLabel === this.query);
         return this.filterable && this.allowCreate && this.query !== '' && !hasExistingOption;
+      },
+
+      selectSize() {
+        return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
       }
     },
 

packages/tag/src/tag.vue

@@ -4,7 +4,7 @@
       class="el-tag"
       :class="[
         type ? 'el-tag--' + type : '',
-        size && `el-tag--${size}`,
+        tagSize && `el-tag--${tagSize}`,
         {'is-hit': hit}
       ]"
       :style="{backgroundColor: color}">
@@ -31,6 +31,11 @@
       handleClose(event) {
         this.$emit('close', event);
       }
+    },
+    computed: {
+      tagSize() {
+        return this.size || (this.$ELEMENT || {}).size;
+      }
     }
   };
 </script>

packages/theme-chalk/src/cascader.scss

@@ -6,6 +6,7 @@
   display: inline-block;
   position: relative;
   font-size: $--font-size-base;
+  line-height: $--input-height;
 
   .el-input,
   .el-input__inner {
@@ -44,7 +45,6 @@
     left: 0;
     top: 0;
     height: 100%;
-    line-height: 40px;
     padding: 0 25px 0 15px;
     color: $--input-color;
     width: 100%;
@@ -63,27 +63,18 @@
 
   @include m(medium) {
     font-size: $--input-medium-font-size;
-
-    @include e(label) {
-      line-height: #{$--input-medium-height };
-    }
+    line-height: #{$--input-medium-height};
   }
 
   @include m(small) {
     font-size: $--input-small-font-size;
-
-    @include e(label) {
-      line-height: #{$--input-small-height };
-    }
+    line-height: #{$--input-small-height};
   }
 
   @include m(mini) {
     font-size: $--input-mini-font-size;
-
-    @include e(label) {
     line-height: #{$--input-mini-height};
   }
-  }
 
   @include when(disabled) {
     .el-cascader__label {

packages/theme-chalk/src/dropdown.scss

@@ -35,6 +35,10 @@
     }
 
     &:hover {
+      &::before {
+        top: 0;
+        bottom: 0;
+      }
     }
 
     & .el-dropdown__icon {

packages/theme-chalk/src/input-number.scss

@@ -6,6 +6,7 @@
   position: relative;
   display: inline-block;
   width: 180px;
+  line-height: #{$--input-height - 2};
 
   .el-input {
     display: block;
@@ -23,7 +24,6 @@
     top: 1px;
     width: $--input-height;
     height: auto;
-    line-height: #{$--input-height - 2};
     text-align: center;
     background: $--background-color-base;
     color: $--color-text-regular;
@@ -70,9 +70,9 @@
 
   @include m(medium) {
     width: 200px;
+    line-height: #{$--input-medium-height - 2};
 
     @include e((increase, decrease)) {
-      line-height: #{$--input-medium-height - 2};
       width: $--input-medium-height;
       font-size: $--input-medium-font-size;
     }
@@ -85,9 +85,9 @@
 
   @include m(small) {
     width: 130px;
+    line-height: #{$--input-small-height - 2};
 
     @include e((increase, decrease)) {
-      line-height: #{$--input-small-height - 2};
       width: $--input-small-height;
       font-size: $--input-small-font-size;
 
@@ -104,9 +104,9 @@
 
   @include m(mini) {
     width: 130px;
+    line-height: #{$--input-mini-height - 2};
 
     @include e((increase, decrease)) {
-      line-height: #{$--input-mini-height - 2};
       width: $--input-mini-height;
       font-size: $--input-mini-font-size;
 

src/index.js

@@ -153,6 +153,9 @@ const install = function(Vue, opts = {}) {
 
   Vue.use(Loading.directive);
 
+  const ELEMENT = {};
+  ELEMENT.size = opts.size || '';
+
   Vue.prototype.$loading = Loading.service;
   Vue.prototype.$msgbox = MessageBox;
   Vue.prototype.$alert = MessageBox.alert;
@@ -160,6 +163,8 @@ const install = function(Vue, opts = {}) {
   Vue.prototype.$prompt = MessageBox.prompt;
   Vue.prototype.$notify = Notification;
   Vue.prototype.$message = Message;
+
+  Vue.prototype.$ELEMENT = ELEMENT;
 };
 
 /* istanbul ignore if */