[新增] checkbox-group 复选框组

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

@@ -54,6 +54,42 @@ export default {
 
 :::
 
+::: title 复选框组
+:::
+
+::: demo
+
+<template>
+  <lay-form>
+    <lay-checkbox-group v-model="checkeds" @change="groupChange">
+      <lay-checkbox name="like" skin="primary" label="1">写作</lay-checkbox>
+      <lay-checkbox name="like" skin="primary" label="2">画画</lay-checkbox>
+      <lay-checkbox name="like" skin="primary" label="3">运动</lay-checkbox>
+    </lay-checkbox-group>
+  </lay-form>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const checkeds = ref(['1','2']);
+    const groupChange = function(val) {
+      console.log("回调:" + JSON.stringify(val))
+    }
+    
+    return {
+        checkeds,
+        groupChange
+    }
+  }
+}
+</script>
+
+:::
+
 ::: title 完整案例
 :::
 

src/index.ts

@@ -36,6 +36,7 @@ import LayMenu from './module/menu/index'
 import LayMenuItem from './module/menuItem/index'
 import LayMenuChildItem from './module/menuChildItem/index'
 import LayCheckbox from './module/checkbox/index'
+import LayCheckboxGroup from './module/checkboxGroup/index'
 import LayForm from './module/form/index'
 import LayBreadcrumb from './module/breadcrumb/index'
 import LayBreadcrumbItem from './module/breadcrumbItem/index'
@@ -54,7 +55,6 @@ import LayTree from './module/tree/index'
 import LayTable from './module/table/index'
 import LayPage from './module/page/index'
 import LayTransfer from './module/transfer/index'
-import LayCheckboxGroup from './module/checkboxGroup/index'
 import LaySlider from './module/slider/index'
 import LayCarousel from './module/carousel/index'
 import LayCarouselItem from './module/carouselItem/index'

src/module/checkbox/index.vue

@@ -5,10 +5,10 @@ export default {
 </script>
 
 <script setup name="LayCheckbox" lang="ts">
-import { computed, defineProps } from "vue";
+import { computed, defineProps, inject } from "vue";
 import "./index.less";
 
-export interface LayCheckbox {
+export interface LayCheckboxProps {
   name?: string;
   skin?: string;
   label?: string;
@@ -16,16 +16,50 @@ export interface LayCheckbox {
   disabled?: boolean;
 }
 
-const props = withDefaults(defineProps<LayCheckbox>(), {
+const props = withDefaults(defineProps<LayCheckboxProps>(), {
-  modelValue: false
+  modelValue: false,
+});
+
+const checkboxGroup: any = inject("checkboxGroup", {});
+
+const isGroup = computed(() => {
+  return (
+    checkboxGroup != undefined && checkboxGroup?.name === "LayCheckboxGroup"
+  );
 });
 
 const emit = defineEmits(["update:modelValue", "change"]);
 
+const isChecked = computed({
+  get() {
+    if (isGroup.value) {
+      return checkboxGroup.modelValue.value.includes(props.label);
+    } else {
+      return props.modelValue;
+    }
+  },
+  set(val) {
+    if (isGroup.value) {
+      setModelValue(val);
+    }
+    emit("change", val);
+    emit("update:modelValue", val);
+  },
+});
+
+const setModelValue = function (checked: any) {
+  let groupModelValue = [...checkboxGroup.modelValue.value];
+  if (!checked) {
+    groupModelValue.splice(groupModelValue.indexOf(props.label), 1);
+  } else {
+    groupModelValue.push(props.label);
+  }
+  checkboxGroup.modelValue.value = groupModelValue;
+};
+
 const handleClick = function () {
   if (!props.disabled) {
-    emit("update:modelValue", !props.modelValue);
+    isChecked.value = !isChecked.value;
-    emit("change", { checked: !props.modelValue, value: props.label });
   }
 };
 </script>
@@ -37,7 +71,7 @@ const handleClick = function () {
       class="layui-unselect layui-form-checkbox"
       :class="{
         'layui-checkbox-disbaled layui-disabled': disabled,
-        'layui-form-checked': props.modelValue,
+        'layui-form-checked': isChecked,
       }"
       :lay-skin="skin"
     >

src/module/checkboxGroup/index.vue

@@ -1,8 +1,45 @@
 <template>
-    <div class="layui-checkbox-group"></div>
+  <div class="layui-checkbox-group">
+    <slot></slot>
+  </div>
 </template>
 
-<script setup name="LayCheckbox" lang="ts">
-import { defineProps, ref, watch } from 'vue'
 
+<script lang="ts">
+export default {
+  name: "LayCheckboxGroup",
+};
+</script>
+
+<script setup lang="ts">
+import { computed, defineProps, provide, ref, watch } from "vue";
+import { Recordable } from "../type";
+
+export interface LayCheckboxGroupProps {
+  modelValue?: Recordable[];
+}
+
+const props = withDefaults(defineProps<LayCheckboxGroupProps>(), {
+  modelValue: () => [],
+});
+
+const emit = defineEmits(["update:modelValue", "change"]);
+
+const modelValue = ref(props.modelValue);
+
+provide("checkboxGroup", { name: "LayCheckboxGroup", modelValue: modelValue });
+
+watch(
+  () => modelValue,
+  (val) => {
+    emit("change", modelValue.value);
+    emit("update:modelValue", modelValue.value);
+  },
+  { deep: true }
+);
+
+watch(
+  () => props.modelValue,
+  (val) => (modelValue.value = val)
+);
 </script>