✨(checkbox): 新增 size 属性

package/component/src/component/checkbox/index.less

@@ -1,3 +1,48 @@
+@lg: 18px;
+@md: 16px;
+@sm: 14px;
+@xs: 12px;
+
+@lg-font-size: 16px;
+@md-font-size: 14px;
+@sm-font-size: 12px;
+@xs-font-size: 10px;
+
+.set-size(@size, @font-size) {
+  & {
+    height: @size;
+    line-height: @size;
+    .layui-form-checkbox[lay-skin="primary"]  {
+      .layui-icon {
+        width: @size;
+        height: @size;
+        font-size: @font-size;
+      }
+      .layui-checkbox-label {
+        height: @size;
+        line-height: @size;
+        font-size: @font-size;
+        margin-top: 1px;
+      }
+    }
+  }
+}
+
+.layui-checkbox{
+  &[size="lg"] {
+    .set-size(@lg, @lg-font-size);
+  }
+  &[size="md"] {
+    .set-size(@md, @md-font-size);
+  }
+  &[size="sm"] {
+    .set-size(@sm, @sm-font-size);
+  }
+  &[size="xs"] {
+    .set-size(@xs, @xs-font-size);
+  }
+}
+
 .layui-checkbox input[type="checkbox"] {
   display: none;
 }

package/component/src/component/checkbox/index.vue

@@ -17,6 +17,7 @@ export interface LayCheckboxProps {
   isIndeterminate?: boolean;
   modelValue?: boolean | Array<string | object>;
   disabled?: boolean;
+  size?: 'lg' | 'md' | 'sm' | 'xs';
 }
 
 const props = withDefaults(defineProps<LayCheckboxProps>(), {
@@ -24,6 +25,7 @@ const props = withDefaults(defineProps<LayCheckboxProps>(), {
   modelValue: false,
   disabled: false,
   label: "",
+  size: "md"
 });
 
 const checkboxGroup: any = inject("checkboxGroup", {});
@@ -92,11 +94,11 @@ const setArrayModelValue = function (checked: any) {
 };
 
 const handleClick = function () {
-  if (!ifDisabled.value) {
+  if (!isDisabled.value) {
     isChecked.value = !isChecked.value;
   }
 };
-const ifDisabled = computed(() => {
+const isDisabled = computed(() => {
   if (props.disabled) {
     return true;
   }
@@ -111,19 +113,18 @@ const ifDisabled = computed(() => {
 </script>
 
 <template>
-  <span @click.stop="handleClick" class="layui-checkbox">
+  <span @click.stop="handleClick" class="layui-checkbox" :size="size">
     <input type="checkbox" :name="name" :value="value" />
     <div
       class="layui-unselect layui-form-checkbox"
       :class="{
         'layui-form-checked': isChecked,
-        'layui-checkbox-disabled layui-disabled': ifDisabled,
+        'layui-checkbox-disabled layui-disabled': isDisabled,
       }"
       :lay-skin="skin"
     >
-      <span
-        ><slot>{{ label }}</slot></span
-      >
+      <span class="layui-checkbox-label"
+        ><slot>{{ label }}</slot></span>
       <lay-icon
         :type="
           props.isIndeterminate && isChecked

package/component/src/component/radio/index.vue

@@ -9,7 +9,7 @@ export default {
 import "./index.less";
 
 export interface LayRadioProps {
-  size?: 'lg' | 'md' | 'sm' | 'xs';
+  size?: "lg" | "md" | "sm" | "xs";
   modelValue?: string | boolean;
   disabled?: boolean;
   value?: string;
@@ -18,7 +18,7 @@ export interface LayRadioProps {
 }
 
 const props = withDefaults(defineProps<LayRadioProps>(), {
-  size: "md"
+  size: "md",
 });
 
 const emit = defineEmits(["update:modelValue", "change"]);

package/document-component/src/document/zh-CN/components/checkbox.md

@@ -126,6 +126,37 @@ export default {
 
 :::
 
+::: title 不同尺寸
+:::
+
+::: demo
+
+<template>
+    <lay-checkbox name="like" skin="primary" size="lg" v-model="checked3" value="1">写作</lay-checkbox>
+    <lay-checkbox name="like" skin="primary" size="md" v-model="checked4" value="2">画画</lay-checkbox>
+    <lay-checkbox name="like" skin="primary" size="sm" v-model="checked5" value="3">运动</lay-checkbox>
+    <lay-checkbox name="like" skin="primary" size="xs" v-model="checked5" value="4">游泳</lay-checkbox>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const checked3 = ref(true);
+    const checked4 = ref(true);
+    const checked5 = ref(true);
+
+    return {
+        checked3, checked4, checked5
+    }
+  }
+}
+</script>
+
+:::
+
 ::: title 禁用状态
 :::