♻️(component): 统一CheckBox与Radio组件 属性语义

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

@@ -12,7 +12,8 @@ import "./index.less";
 export interface LayCheckboxProps {
   name?: string;
   skin?: string;
-  label: string | object;
+  value: string | object;
+  label?: string;
   isIndeterminate?: boolean;
   modelValue?: boolean | Array<string | object>;
   disabled?: boolean;
@@ -22,6 +23,7 @@ const props = withDefaults(defineProps<LayCheckboxProps>(), {
   isIndeterminate: false,
   modelValue: false,
   disabled: false,
+  label:''
 });
 
 const checkboxGroup: any = inject("checkboxGroup", {});
@@ -37,10 +39,10 @@ const emit = defineEmits(["update:modelValue", "change"]);
 const isChecked = computed({
   get() {
     if (isGroup.value) {
-      return checkboxGroup.modelValue.value.includes(props.label);
+      return checkboxGroup.modelValue.value.includes(props.value);
     } else {
       if (Array.isArray(props.modelValue)) {
-        return props.modelValue.includes(props.label);
+        return props.modelValue.includes(props.value);
       } else {
         return props.modelValue;
       }
@@ -71,9 +73,9 @@ const arrayModelValue = computed(() => {
 const setGroupModelValue = function (checked: any) {
   let groupModelValue = [...checkboxGroup.modelValue.value];
   if (!checked) {
-    groupModelValue.splice(groupModelValue.indexOf(props.label), 1);
+    groupModelValue.splice(groupModelValue.indexOf(props.value), 1);
   } else {
-    groupModelValue.push(props.label);
+    groupModelValue.push(props.value);
   }
   checkboxGroup.modelValue.value = groupModelValue;
 };
@@ -81,9 +83,9 @@ const setGroupModelValue = function (checked: any) {
 const setArrayModelValue = function (checked: any) {
   let arr = [...arrayModelValue.value];
   if (!checked) {
-    arr.splice(arr.indexOf(props.label), 1);
+    arr.splice(arr.indexOf(props.value), 1);
   } else {
-    arr.push(props.label);
+    arr.push(props.value);
   }
   emit("change", arr);
   emit("update:modelValue", arr);
@@ -98,7 +100,7 @@ const handleClick = function () {
 
 <template>
   <span @click.stop="handleClick" class="layui-checkbox">
-    <input type="checkbox" :name="name" :value="label" />
+    <input type="checkbox" :name="name" :value="value" />
     <div
       class="layui-unselect layui-form-checkbox"
       :class="{
@@ -107,7 +109,7 @@ const handleClick = function () {
       }"
       :lay-skin="skin"
     >
-      <span v-if="$slots?.default"><slot></slot></span>
+      <span><slot>{{label}}</slot></span>
       <lay-icon
         :type="
           props.isIndeterminate && isChecked

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

@@ -11,6 +11,7 @@ import "./index.less";
 export interface LayRadioProps {
   modelValue?: string | boolean;
   disabled?: boolean;
+  value?: string;
   label?: string;
   name?: string;
 }
@@ -36,18 +37,18 @@ const naiveName = computed(() => {
 const isChecked = computed({
   get() {
     if (isGroup.value) {
-      return radioGroup.modelValue.value === props.label;
+      return radioGroup.modelValue.value === props.value;
     } else {
-      return props.modelValue === props.label;
+      return props.modelValue === props.value;
     }
   },
   set(val) {
     if (isGroup.value) {
-      radioGroup.modelValue.value = props.label;
+      radioGroup.modelValue.value = props.value;
     } else {
       if (val) {
-        emit("change", props.label);
-        emit("update:modelValue", props.label);
+        emit("change", props.value);
+        emit("update:modelValue", props.value);
       }
     }
   },
@@ -62,7 +63,7 @@ const handleClick = function () {
 
 <template>
   <span class="layui-radio">
-    <input type="radio" :value="label" :name="naiveName" />
+    <input type="radio" :value="value" :name="naiveName" />
     <div
       class="layui-unselect layui-form-radio"
       :class="{
@@ -79,7 +80,7 @@ const handleClick = function () {
         class="layui-anim layui-icon layui-anim-scaleSpring layui-form-radioed"
         >&#xe63f;</i
       >
-      <span><slot></slot></span>
+      <span><slot>{{label}}</slot></span>
     </div>
   </span>
 </template>

package/component/src/component/selectOption/index.vue

@@ -80,7 +80,7 @@ onMounted(() => {
         skin="primary"
         v-model="selected"
         @change="selectHandle"
-        label
+        :value="props.value"
       />
     </template>
     <slot>{{ label }}</slot>

package/component/src/component/table/TableRow.vue

@@ -181,7 +181,7 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
       <div class="layui-table-cell laytable-cell-checkbox">
         <lay-checkbox
           v-model="tableSelectedKeys"
-          :label="data[id]"
+          :value="data[id]"
           skin="primary"
         />
       </div>

package/component/src/component/table/index.vue

@@ -316,7 +316,7 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
                   v-model="tableColumnKeys"
                   skin="primary"
                   :key="column.key"
-                  :label="column.key"
+                  :value="column.key"
                   >{{ column.title }}</lay-checkbox
                 >
               </div>
@@ -365,7 +365,7 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
                       v-model="hasChecked"
                       :is-indeterminate="!allChecked"
                       skin="primary"
-                      label="all"
+                      value="all"
                       @change="changeAll"
                     />
                   </div>

package/component/src/component/tree/TreeNode.vue

@@ -152,7 +152,7 @@ const isChildAllSelected = computed(() => {
           :modelValue="node.isChecked"
           :disabled="node.isDisabled"
           skin="primary"
-          label=""
+          value=""
           @change="
             (checked) => {
               handleChange(checked, node);