[新增] checkbox-group 复选框组

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>(), {
-  modelValue: false
+const props = withDefaults(defineProps<LayCheckboxProps>(), {
+  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);
-    emit("change", { checked: !props.modelValue, value: props.label });
+    isChecked.value = !isChecked.value;
   }
 };
 </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>