feat(switch): add v-model support

Author: b2nil

src/components/switch/index.ts

@@ -2,6 +2,7 @@ import { h, defineComponent, computed, mergeProps, PropType } from 'vue'
 import { Switch, View } from '@tarojs/components'
 import { CommonEvent } from '@tarojs/components/types/common'
 import { AtSwitchProps } from 'types/switch'
+import { useModelValue } from '../../composables/model'
 
 const AtSwitch = defineComponent({
 
@@ -16,42 +17,40 @@ const AtSwitch = defineComponent({
       type: String,
       default: '#6190e8'
     },
-    checked: {
-      type: Boolean,
-      default: false
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    border: {
-      type: Boolean,
-      default: false
-    },
+    checked: Boolean,
+    disabled: Boolean,
+    border: Boolean,
     onChange: Function as PropType<AtSwitchProps['onChange']>,
   },
 
-  setup(props: AtSwitchProps, { attrs, slots }) {
+  setup(props: AtSwitchProps, { attrs, emit }) {
 
-    const rootClass = computed(() => ({
+    const modelChecked = useModelValue(props, emit, 'checked')
+
+    const rootClasses = computed(() => ({
       'at-switch': true,
-      'at-switch--without-border': !props.border
+      'at-switch--without-border': !Boolean(props.border)
     }))
 
-    const containerClass = computed(() => ({
+    const containerClasses = computed(() => ({
       'at-switch__container': true,
       'at-switch--disabled': props.disabled
     }))
 
     function handleChange(event: CommonEvent): void {
       const { value, checked } = event.detail
       const state = typeof value === 'undefined' ? checked : value
-      props.onChange && props.onChange(state)
+
+      if (attrs['onUpdate:checked']) {
+        modelChecked.value = state
+      } else {
+        props.onChange && props.onChange(state)
+      }
     }
 
     return () => (
       h(View, mergeProps(attrs, {
-        class: rootClass.value
+        class: rootClasses.value
       }), {
         default: () => [
           // title
@@ -61,7 +60,7 @@ const AtSwitch = defineComponent({
 
           // container
           h(View, {
-            class: containerClass.value
+            class: containerClasses.value
           }, {
             default: () => [
               // mask
@@ -70,7 +69,7 @@ const AtSwitch = defineComponent({
               // switch
               h(Switch, {
                 class: 'at-switch__switch',
-                checked: props.checked,
+                checked: modelChecked.value,
                 color: props.color,
                 onChange: handleChange,
               })

src/pages/form/switch/index.ts

@@ -0,0 +1,90 @@
+<template>
+  <page header-title="Switch 开关">
+    <panel
+      title="基础用法"
+      no-padding
+    >
+      <example-item>
+        <at-switch
+          title="开启中"
+          checked
+        />
+        <at-switch
+          title="已关闭"
+          border
+        />
+      </example-item>
+    </panel>
+
+    <panel
+      title="使用 v-model 或 onChange 获取开关状态"
+      no-padding
+    >
+      <example-item>
+        <at-switch
+          :title="`绑定 checked + onChange:${'&nbsp;'.repeat(6)}${switchValue ? '开启中' : '已关闭'}`"
+          :checked="switchValue"
+          @change="handleChange"
+        />
+        <at-switch
+          :title="`使用 v-model:checked:${'&nbsp;'.repeat(13)}${switchValue2 ? '开启中' : '已关闭'}`"
+          v-model:checked="switchValue2"
+          border
+        />
+      </example-item>
+    </panel>
+
+    <panel
+      title="禁用状态"
+      no-padding
+    >
+      <example-item>
+        <at-switch
+          title="不可点击： 无 border"
+          checked
+          disabled
+        />
+        <at-switch
+          title="不可点击： 有 border"
+          border
+          disabled
+        />
+      </example-item>
+    </panel>
+  </page>
+
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+import { AtSwitch } from '../../../index'
+import { Page, Panel, ExampleItem } from '../../components/demo-page'
+import './index.scss'
+
+export default defineComponent({
+  name: "SwitchDemo",
+
+  components: {
+    AtSwitch,
+    Page,
+    Panel,
+    ExampleItem
+  },
+
+  setup() {
+    const switchValue = ref(true)
+    const switchValue2 = ref(true)
+
+    const handleChange = (value: boolean): void => {
+      switchValue.value = value
+    }
+
+    return {
+      switchValue,
+      switchValue2,
+      handleChange
+    }
+  }
+})
+
+</script>