Switch: feature add-expand-value

examples/docs/en-US/switch.md

@@ -4,7 +4,8 @@
       return {
         value1: true,
         value2: true,
-        value3: true
+        value3: '100',
+        value4: true
       }
     }
   };
@@ -43,19 +44,47 @@ 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.
+
+```html
+ <el-tooltip class="item" effect="dark" :content="'switch value is ' + value3" placement="top-end">
+    <el-switch
+      v-model="value3"
+      on-color="#13ce66"
+      off-color="#ff4949"
+      on-value="100"
+      off-value="0">
+    </el-switch>
+  </el-tooltip>
+
+<script>
+  export default {
+    data() {
+      return {
+        value3: '100'
+      }
+    }
+  };
+</script>
+```
+
+:::
+
 ### Disabled
 
 :::demo Adding the `disabled` attribute disables Switch.
 
 ```html
 <el-switch
-  v-model="value3"
+  v-model="value4"
   on-text=""
   off-text=""
   disabled>
 </el-switch>
 <el-switch
-  v-model="value3"
+  v-model="value4"
   disabled>
 </el-switch>
 
@@ -63,7 +92,7 @@ Switch is used for switching between two opposing states.
   export default {
     data() {
       return {
-        value3: true
+        value4: true
       }
     }
   };
@@ -81,6 +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-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

@@ -12,7 +12,8 @@
       return {
         value1: true,
         value2: true,
-        value3: true
+        value3: '100',
+        value4: true
       }
     }
   };
@@ -37,7 +38,7 @@
   on-color="#13ce66"
   off-color="#ff4949">
 </el-switch>
-
+</el-switch>
 <script>
   export default {
     data() {
@@ -51,27 +52,55 @@
 ```
 :::
 
-### 禁用状态
+### 扩展 value
 
-:::demo 设置`disabled`属性，接受一个`Boolean`，设置`true`即可禁用。
+:::demo 设置`on-value` 和 `off-value`属性，接受`Boolean` 或 `String` 类型的值，`v-model`可以设置`on-value`或`off-value`的状态值。
 
 ```html
-<el-switch
+ <el-tooltip class="item" effect="dark" :content="'switch value is ' + value3" placement="top-end">
-  v-model="value3"
+    <el-switch
-  on-text=""
+      v-model="value3"
-  off-text=""
+      on-color="#13ce66"
-  disabled>
+      off-color="#ff4949"
-</el-switch>
+      on-value="100"
-<el-switch
+      off-value="0">
-  v-model="value3"
+    </el-switch>
-  disabled>
+  </el-tooltip>
-</el-switch>
 
 <script>
   export default {
     data() {
       return {
-        value3: true
+        value3: '100'
+      }
+    }
+  };
+</script>
+```
+
+:::
+
+### 禁用状态
+
+:::demo 设置`disabled`属性，接受一个`Boolean`，设置`true`即可禁用。
+
+
+```html
+<el-switch
+  v-model="value4"
+  on-text=""
+  off-text=""
+  disabled>
+</el-switch>
+<el-switch
+  v-model="value4"
+  disabled>
+</el-switch>
+<script>
+  export default {
+    data() {
+      return {
+        value4: true
       }
     }
   };
@@ -79,6 +108,7 @@
 ```
 :::
 
+
 ### Attributes
 
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
@@ -89,6 +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-color  | switch 打开时的背景色    | string   | — | #20A0FF |
 | off-color  | switch 关闭时的背景色    | string   | — | #C0CCDA |
 | name  | switch 对应的 name 属性    | string   | — | — |

packages/switch/src/component.vue

@@ -7,6 +7,8 @@
       @change="handleChange"
       v-model="_value"
       :name="name"
+      :true-value="onValue"
+      :false-value="offValue"
       :disabled="disabled">
     <span class="el-switch__core" ref="core" :style="{ 'width': coreWidth + 'px' }">
       <span class="el-switch__button" :style="{ transform }"></span>
@@ -14,7 +16,7 @@
     <transition name="label-fade">
       <div
         class="el-switch__label el-switch__label--left"
-        v-show="value"
+        v-show="value === onValue"
         :style="{ 'width': coreWidth + 'px' }">
         <i :class="[onIconClass]" v-if="onIconClass"></i>
         <span v-if="!onIconClass && onText">{{ onText }}</span>
@@ -23,7 +25,7 @@
     <transition name="label-fade">
       <div
         class="el-switch__label el-switch__label--right"
-        v-show="!value"
+        v-show="value === offValue"
         :style="{ 'width': coreWidth + 'px' }">
         <i :class="[offIconClass]" v-if="offIconClass"></i>
         <span v-if="!offIconClass && offText">{{ offText }}</span>
@@ -37,7 +39,7 @@
     name: 'ElSwitch',
     props: {
       value: {
-        type: Boolean,
+        type: [Boolean, String],
         default: true
       },
       disabled: {
@@ -72,6 +74,14 @@
         type: String,
         default: ''
       },
+      onValue: {
+        type: [Boolean, String],
+        default: true
+      },
+      offValue: {
+        type: [Boolean, String],
+        default: false
+      },
       name: {
         type: String,
         default: ''
@@ -82,6 +92,11 @@
         coreWidth: this.width
       };
     },
+    created() {
+      if (!~[this.onValue, this.offValue].indexOf(this.value)) {
+        this.$emit('input', this.onValue);
+      }
+    },
     computed: {
       hasText() {
         /* istanbul ignore next */
@@ -96,7 +111,7 @@
         }
       },
       transform() {
-        return this.value ? `translate(${ this.coreWidth - 20 }px, 2px)` : 'translate(2px, 2px)';
+        return this.value === this.onValue ? `translate(${ this.coreWidth - 20 }px, 2px)` : 'translate(2px, 2px)';
       }
     },
     watch: {
@@ -111,7 +126,7 @@
         this.$emit('change', event.currentTarget.checked);
       },
       setBackgroundColor() {
-        let newColor = this.value ? this.onColor : this.offColor;
+        let newColor = this.value === this.onValue ? this.onColor : this.offColor;
         this.$refs.core.style.borderColor = newColor;
         this.$refs.core.style.backgroundColor = newColor;
       }

test/unit/specs/switch.spec.js

@@ -120,4 +120,32 @@ describe('Switch', () => {
       done();
     });
   });
+
+  it('expand switch value', done => {
+    vm = createVue({
+      template: `
+        <div>
+          <el-switch v-model="value" :on-value="onValue" :off-value="offValue"></el-switch>
+        </div>
+      `,
+      data() {
+        return {
+          value: '100',
+          onValue: '100',
+          offValue: '0'
+        };
+      }
+    }, true);
+
+    const core = vm.$el.querySelector('.el-switch__core');
+    core.click();
+    setTimeout(() => {
+      expect(vm.value).to.equal('0');
+      core.click();
+      setTimeout(() => {
+        expect(vm.value).to.equal('100');
+        done();
+      }, 10);
+    }, 10);
+  });
 });