支持v-model

coderjam · coderjam · commit ed08fde7fc60 · 2022-08-26T15:56:54.000+08:00
diff --git a/src/components/DemoSwitch.vue b/src/components/DemoSwitch.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import Switch from "../lib/Switch.vue"
+import {ref} from "vue";
+let status = ref(false)
 </script>
 <template>
-<Switch />
+<Switch v-model="status" />
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/lib/Switch.vue b/src/lib/Switch.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import {ref} from "vue";
-let status = ref(false)
+const props = defineProps(['modelValue'])
+const emits = defineEmits(['update:modelValue'])
 const onClick = ()=>{
-  status.value = !status.value
+  emits('update:modelValue',!props.modelValue)
 }
 </script>
 
 <template>
-  <div class="zw-switch" :class="status?'zw-switch-on':''" @click="onClick">
+  <div class="zw-switch" :class="props.modelValue?'zw-switch-on':''" @click="onClick">
     <span class="node"></span>
   </div>
 </template>
