peaf(checkbox): 重构 checkbox 逻辑

docs/docs/zh-CN/components/checkbox.md

@@ -0,0 +1,85 @@
+
+
+::: demo
+
+<template>
+  <lay-form>
+    <lay-checkbox name="like" skin="primary" label="1">普通</lay-checkbox>
+ </lay-form>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    return {
+    }
+  }
+}
+</script>
+
+:::
+
+::: demo
+
+<template>
+  <lay-form>
+    <lay-checkbox name="like" skin="primary" v-model:checked="checked1" label="1">写作</lay-checkbox>
+    <lay-checkbox name="like" skin="primary" v-model:checked="checked2" label="2">画画</lay-checkbox>
+    <lay-checkbox name="like" skin="primary" v-model:checked="checked3" label="3">运动</lay-checkbox>
+  </lay-form>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const checked1 = ref(true);
+    const checked2 = ref(true);
+    const checked3 = ref(true);
+
+    return {
+        checked1, checked2, checked3
+    }
+  }
+}
+</script>
+
+:::
+
+
+
+::: demo
+
+<template>
+  <lay-form>
+    <lay-checkbox name="like" skin="primary" label="1" @change="change">回调</lay-checkbox>
+ </lay-form>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const change = function(isChecked) {
+        console.log("是否选中:" + isChecked)
+    }
+
+    return {
+        change
+    }
+  }
+}
+</script>
+
+:::
+
+|          |      |                         |     |
+| -------- | ---- | ----------------------- | --- |
+| xs       | 尺寸 | 超小屏幕 (手机<768px)   | 12  |

docs/src/layouts/Layout.vue

@@ -273,6 +273,12 @@ export default {
         subTitle: 'transfer',
         path: '/zh-CN/components/transfer',
       },
+      {
+        id: 32,
+        title: '复选框',
+        subTitle: 'checkbox',
+        path: '/zh-CN/components/checkbox',
+      },
     ]
 
     const selected = ref(1)

docs/src/router/zh-CN.ts

@@ -174,6 +174,10 @@ const zhCN = [
         path: '/zh-CN/components/transfer',
         component: () => import('../../docs/zh-CN/components/transfer.md'),
         meta: { title: '穿梭框' },
+      },{
+        path: '/zh-CN/components/checkbox',
+        component: () => import('../../docs/zh-CN/components/checkbox.md'),
+        meta: { title: '复选框' },
       },
     ],
   },

src/module/checkbox/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <span @click="handleClick">
+  <span @click.stop="handleClick">
     <input type="checkbox" :name="name" :value="label" />
     <div
       class="layui-unselect"
@@ -7,43 +7,47 @@
         {
           'layui-checkbox-disbaled layui-disabled': disabled,
         },
+        {
+          'layui-form-checked': needCustomChecked
+            ? customChecked
+            : props.checked,
+        },
         'layui-form-checkbox',
-        props.modelValue.includes(props.label) ? 'layui-form-checked' : '',
       ]"
       :lay-skin="skin"
     >
       <span><slot /></span>
-      <i v-if="skin == 'primary'" class="layui-icon layui-icon-ok" />
-      <i v-if="!skin" class="layui-icon layui-icon-ok" />
+      <i class="layui-icon layui-icon-ok" />
     </div>
   </span>
 </template>
 
 <script setup name="LayCheckbox" lang="ts">
-import { defineProps, ref, watch } from 'vue'
+import { defineProps, ref } from 'vue'
 
 const props =
   defineProps<{
-    modelValue: string[]
-    label: string
-    disabled?: boolean
     name?: string
     skin?: string
+    label?: string
+    checked?: Boolean
+    disabled?: Boolean
   }>()
 
-const hasValue = ref(false)
+const customChecked = ref(false)
+const needCustomChecked = props.checked == undefined
 
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits(['update:checked', 'change'])
 
 const handleClick = function () {
   if (!props.disabled) {
-    if (!props.modelValue.includes(props.label)) {
-      props.modelValue.push(props.label)
+    if (needCustomChecked) {
+      customChecked.value = !customChecked.value
+      emit('change', !customChecked.value)
     } else {
-      let index = props.modelValue.indexOf(props.label)
-      props.modelValue.splice(index, 1)
+      emit('update:checked', !props.checked)
+      emit('change', !props.checked)
     }
-    emit('update:modelValue', props.modelValue)
   }
 }
 </script>