feat: 增加Switch组件value值的类型 (#864)

Co-authored-by: wuyunkuo <wuyunkuo@jd.com>

src/packages/__VUE/switch/demo.vue

@@ -5,6 +5,11 @@
       <nut-switch v-model="checked" />
     </nut-cell>
 
+    <h2>值为字符串</h2>
+    <nut-cell>
+      <nut-switch v-model="checkedStr" activeValue="开" inactiveValue="关" @change="change" />
+    </nut-cell>
+
     <h2>禁用状态</h2>
     <nut-cell>
       <nut-switch v-model="checked" disable />
@@ -48,6 +53,8 @@ export default createDemo({
     const checkedAsync = ref(true);
     const loadingAsync = ref(false);
 
+    const checkedStr = ref('开');
+
     const change = (value: boolean, event: Event) => {
       proxy.$toast.text(`触发了change事件，开关状态：${value}`);
     };
@@ -64,6 +71,7 @@ export default createDemo({
     return {
       checked,
       checkedAsync,
+      checkedStr,
       loadingAsync,
       change,
       changeAsync

src/packages/__VUE/switch/doc.md

@@ -111,7 +111,7 @@ export default {
 
 | 参数           | 说明             | 类型    | 默认值                |
 |----------------|------------------|---------|-----------------------|
-| v-model        | 开关状态         | Boolean | `false`               |
+| v-model        | 开关状态         | Boolean、String、Number | `false`               |
 | disable        | 禁用状态         | Boolean | `false`               |
 | loading        | 加载状态         | Boolean | `false`               |
 | name        | [图标名称](#/icon)         | String | `loading`               |
@@ -121,6 +121,8 @@ export default {
 | inactive-color | 关闭时的背景颜色 | String  | `#ebebeb` |
 | active-text    | 打开时文字描述   | String  | -                     |
 | inactive-text  | 关闭时文字描述   | String  | -                     |
+| active-value  | 打开时组件的值   | Boolean、String、Number  | true                     |
+| inactive-value  | 关闭组件的值   | Boolean、String、Number  | false                     |
 
 
 ### Events

src/packages/__VUE/switch/index.taro.vue

@@ -19,7 +19,7 @@ const { componentName, create } = createComponent('switch');
 export default create({
   props: {
     modelValue: {
-      type: Boolean,
+      type: [String, Number, Boolean],
       default: false
     },
     disable: {
@@ -42,6 +42,14 @@ export default create({
       type: String,
       default: ''
     },
+    activeValue: {
+      type: [String, Number, Boolean],
+      default: true
+    },
+    inactiveValue: {
+      type: [String, Number, Boolean],
+      default: false
+    },
     loading: {
       type: Boolean,
       default: false
@@ -61,11 +69,12 @@ export default create({
   },
   emits: ['change', 'update:modelValue'],
   setup(props, { emit }) {
+    const isActive = computed(() => props.modelValue === props.activeValue);
     const classes = computed(() => {
       const prefixCls = componentName;
       return {
         [prefixCls]: true,
-        [props.modelValue ? 'switch-open' : 'switch-close']: true,
+        [isActive.value ? 'switch-open' : 'switch-close']: true,
         [`${prefixCls}-disable`]: props.disable,
         [`${prefixCls}-base`]: true
       };
@@ -73,15 +82,16 @@ export default create({
 
     const style = computed(() => {
       return {
-        backgroundColor: props.modelValue ? props.activeColor : props.inactiveColor
+        backgroundColor: isActive.value ? props.activeColor : props.inactiveColor
       };
     });
 
     const onClick = (event: Event) => {
       if (props.disable || props.loading) return;
-      emit('update:modelValue', !props.modelValue);
+      const value = isActive.value ? props.inactiveValue : props.activeValue;
+      emit('update:modelValue', value);
       emit('update:loading');
-      emit('change', !props.modelValue, event);
+      emit('change', value, event);
     };
 
     return {

src/packages/__VUE/switch/index.vue

@@ -19,7 +19,7 @@ const { componentName, create } = createComponent('switch');
 export default create({
   props: {
     modelValue: {
-      type: Boolean,
+      type: [String, Number, Boolean],
       default: false
     },
     disable: {
@@ -42,6 +42,14 @@ export default create({
       type: String,
       default: ''
     },
+    activeValue: {
+      type: [String, Number, Boolean],
+      default: true
+    },
+    inactiveValue: {
+      type: [String, Number, Boolean],
+      default: false
+    },
     loading: {
       type: Boolean,
       default: false
@@ -61,11 +69,12 @@ export default create({
   },
   emits: ['change', 'update:modelValue'],
   setup(props, { emit }) {
+    const isActive = computed(() => props.modelValue === props.activeValue);
     const classes = computed(() => {
       const prefixCls = componentName;
       return {
         [prefixCls]: true,
-        [props.modelValue ? 'switch-open' : 'switch-close']: true,
+        [isActive.value ? 'switch-open' : 'switch-close']: true,
         [`${prefixCls}-disable`]: props.disable,
         [`${prefixCls}-base`]: true
       };
@@ -73,15 +82,16 @@ export default create({
 
     const style = computed(() => {
       return {
-        backgroundColor: props.modelValue ? props.activeColor : props.inactiveColor
+        backgroundColor: isActive.value ? props.activeColor : props.inactiveColor
       };
     });
 
     const onClick = (event: Event) => {
       if (props.disable || props.loading) return;
-      emit('update:modelValue', !props.modelValue);
+      const value = isActive.value ? props.inactiveValue : props.activeValue;
+      emit('update:modelValue', value);
       emit('update:loading');
-      emit('change', !props.modelValue, event);
+      emit('change', value, event);
     };
 
     return {