Add size parameter to select

src/components/Select/SSelect.vue

@@ -7,6 +7,7 @@
       :placeholder="placeholder"
       :disabled="disabled"
       :loading="loading"
+      :size="inputType === 'select' ? size : undefined"
       :multiple="multiple"
       :loading-text="loadingText"
       :clearable="clearable"
@@ -26,14 +27,17 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins, Prop, Watch, Ref } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Watch, Ref, Inject } from 'vue-property-decorator'
+import { ElForm } from 'element-ui/types/form'
+import { ElFormItem } from 'element-ui/types/form-item'
 
+import SizeMixin from '../../mixins/SizeMixin'
 import BorderRadiusMixin from '../../mixins/BorderRadiusMixin'
 import { Autocomplete } from '../Input'
 import { InputTypes } from './consts'
 
 @Component
-export default class SSelect extends Mixins(BorderRadiusMixin) {
+export default class SSelect extends Mixins(SizeMixin, BorderRadiusMixin) {
   /**
    * Selected value. Can be used with `v-model`
    */
@@ -113,6 +117,9 @@ export default class SSelect extends Mixins(BorderRadiusMixin) {
 
   @Ref('select') select!: any
 
+  @Inject({ default: '', from: 'elForm' }) elForm!: ElForm
+  @Inject({ default: '', from: 'elFormItem' }) elFormItem!: ElFormItem
+
   model = this.value
   focused = false
 
@@ -157,6 +164,13 @@ export default class SSelect extends Mixins(BorderRadiusMixin) {
 
   get computedClasses (): Array<string> {
     const cssClasses: Array<string> = []
+    if (this.inputType === 'select') {
+      if ((this.elForm || this.elFormItem || {}).size) {
+        cssClasses.push(`s-${(this.elForm || this.elFormItem).size}`)
+      } else if (this.isStandardSize) {
+        cssClasses.push(`s-${this.size}`)
+      }
+    }
     if ((Object.values(InputTypes) as Array<string>).includes(this.inputType)) {
       cssClasses.push(`s-${this.inputType}-type`)
     }

src/stories/Select/SSelect.stories.ts

@@ -1,7 +1,7 @@
 import { text, withKnobs, boolean, number, select } from '@storybook/addon-knobs'
 
 import { SSelect, SRow, SCol, SOption } from '../../components'
-import { BorderRadius } from '../../types'
+import { Size, BorderRadius } from '../../types'
 import { InputTypes } from '../../components/Select'
 
 export default {
@@ -28,6 +28,7 @@ export const configurable = () => ({
                    :disabled="disabled"
                    :border-radius="borderRadius"
                    :loading="loading"
+                   :size="size"
                    :multiple="multiple"
                    :input-type="item.inputType"
                    :clearable="clearable"
@@ -63,6 +64,9 @@ export const configurable = () => ({
     loading: {
       default: boolean('Loading', false)
     },
+    size: {
+      default: select('Size', Object.values(Size), Size.BIG)
+    },
     multiple: {
       default: boolean('Multiple', false)
     },

src/styles/select.scss

@@ -27,6 +27,15 @@ $select-prefix-height: $s-size-mini;
   @include select-border-radius("medium", var(--s-border-radius-medium));
   @include select-border-radius("small", var(--s-border-radius-small));
   @include select-border-radius("mini", var(--s-border-radius-mini));
+  &.s-big .el-input__inner {
+    height: $s-size-big;
+  }
+  &.s-medium .el-input__inner {
+    height: $s-size-medium;
+  }
+  &.s-small .el-input__inner {
+    height: $s-size-small;
+  }
   .el-select {
     width: 100%;
     i.el-icon-arrow-up {