Switch:feat support number value

examples/docs/en-US/switch.md

@@ -46,7 +46,7 @@ Switch is used for switching between two opposing states.
 
 ### Expand value
 
-:::demo Set `on-value` and `off-value` attribute. It's receive `Boolean` or `String` type.
+:::demo Set `on-value` and `off-value` attribute. It's receive `Boolean`, `String` or `Number` type.
 
 ```html
  <el-tooltip class="item" effect="dark" :content="'switch value is ' + value3" placement="top-end">
@@ -110,8 +110,8 @@ on-close-icon | class name of the icon displayed when in `on` state, overrides `
 off-close-icon |class name of the icon displayed when in `off` state, overrides `off-text`| string | — | —
 on-text | text displayed when in `on` state | string | — | ON
 off-text | text displayed when in `off` state | string | — | OFF
-on-value  | switch value when in `on` state | boolean \| string   | — | true
-off-value  | switch value when in `off` state | boolean \| string   | — | false
+on-value  | switch value when in `on` state | boolean \| string \| number | — | true
+off-value  | switch value when in `off` state | boolean \| string \| number | — | false
 on-color | background color when in `on` state | string | — | #20A0FF
 off-color | background color when in `off` state | string | — | #C0CCDA
 name| input name of Switch | string | — | —

examples/docs/zh-CN/switch.md

@@ -54,7 +54,7 @@
 
 ### 扩展 value
 
-:::demo 设置`on-value` 和 `off-value`属性，接受`Boolean` 或 `String` 类型的值，`v-model`可以设置`on-value`或`off-value`的状态值。
+:::demo 设置`on-value` 和 `off-value`属性，接受`Boolean`, `String` 或 `Number` 类型的值。
 
 ```html
  <el-tooltip class="item" effect="dark" :content="'switch value is ' + value3" placement="top-end">
@@ -119,8 +119,8 @@
 | off-icon-class  | switch 关闭时所显示图标的类名，设置此项会忽略 `off-text`    | string   | — | — |
 | on-text  | switch 打开时的文字    | string   | — | ON |
 | off-text  | switch 关闭时的文字    | string   | — | OFF |
-| on-value  | switch 打开时的值    | boolean \| string   | — | true |
-| off-value  | switch 关闭时的值    | boolean \| string   | — | false |
+| on-value  | switch 打开时的值    | boolean \| string \| number | — | true |
+| off-value  | switch 关闭时的值    | boolean \| string \| number | — | false |
 | on-color  | switch 打开时的背景色    | string   | — | #20A0FF |
 | off-color  | switch 关闭时的背景色    | string   | — | #C0CCDA |
 | name  | switch 对应的 name 属性    | string   | — | — |

packages/switch/src/component.vue

@@ -16,7 +16,7 @@
     <transition name="label-fade">
       <div
         class="el-switch__label el-switch__label--left"
-        v-show="value === onValue"
+        v-show="checked"
         :style="{ 'width': coreWidth + 'px' }">
         <i :class="[onIconClass]" v-if="onIconClass"></i>
         <span v-if="!onIconClass && onText">{{ onText }}</span>
@@ -25,7 +25,7 @@
     <transition name="label-fade">
       <div
         class="el-switch__label el-switch__label--right"
-        v-show="value === offValue"
+        v-show="!checked"
         :style="{ 'width': coreWidth + 'px' }">
         <i :class="[offIconClass]" v-if="offIconClass"></i>
         <span v-if="!offIconClass && offText">{{ offText }}</span>
@@ -39,7 +39,7 @@
     name: 'ElSwitch',
     props: {
       value: {
-        type: [Boolean, String],
+        type: [Boolean, String, Number],
         default: true
       },
       disabled: {
@@ -75,11 +75,11 @@
         default: ''
       },
       onValue: {
-        type: [Boolean, String],
+        type: [Boolean, String, Number],
         default: true
       },
       offValue: {
-        type: [Boolean, String],
+        type: [Boolean, String, Number],
         default: false
       },
       name: {
@@ -98,6 +98,9 @@
       }
     },
     computed: {
+      checked() {
+        return this.value === this.onValue;
+      },
       hasText() {
         /* istanbul ignore next */
         return this.onText || this.offText;
@@ -111,7 +114,7 @@
         }
       },
       transform() {
-        return this.value === this.onValue ? `translate(${ this.coreWidth - 20 }px, 2px)` : 'translate(2px, 2px)';
+        return this.checked ? `translate(${ this.coreWidth - 20 }px, 2px)` : 'translate(2px, 2px)';
       }
     },
     watch: {
@@ -126,7 +129,7 @@
         this.$emit('change', event.currentTarget.checked);
       },
       setBackgroundColor() {
-        let newColor = this.value === this.onValue ? this.onColor : this.offColor;
+        let newColor = this.checked ? this.onColor : this.offColor;
         this.$refs.core.style.borderColor = newColor;
         this.$refs.core.style.backgroundColor = newColor;
       }