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

2022-07-12 10:36:09 +08:00 · 2022-07-12 10:36:09 +08:00 · 65f0e1b82e
commit 65f0e1b82e
parent 786e1efb7a
11 changed files with 80 additions and 60 deletions
--- a/package/component/src/component/checkbox/index.vue
+++ b/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
--- a/package/component/src/component/radio/index.vue
+++ b/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>
--- a/package/component/src/component/selectOption/index.vue
+++ b/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>
--- a/package/component/src/component/table/TableRow.vue
+++ b/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>
--- a/package/component/src/component/table/index.vue
+++ b/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>
--- a/package/component/src/component/tree/TreeNode.vue
+++ b/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);
--- a/package/document-component/src/document/zh-CN/components/checkbox.md
+++ b/package/document-component/src/document/zh-CN/components/checkbox.md
@ -13,7 +13,10 @@
 ::: demo 使用 `lay-checkbox` 标签, 创建一个复选框

 <template>
-    <lay-checkbox name="like" skin="primary"  v-model="checked1" label="1" ></lay-checkbox>
+    <lay-checkbox name="like" skin="primary"  v-model="checked1" value="1" label="复选框案例"></lay-checkbox>
+    <lay-checkbox name="like" skin="primary"  v-model="checkedSlot" value="1">
+      自定义slot
+    </lay-checkbox>
 </template>

 <script>
@ -23,7 +26,7 @@ export default {
  setup() {

    const checked1 = ref(false)
-
+    const checkedSlot = ref(false)
    return {
      checked1
    }
@ -39,7 +42,7 @@ export default {
 ::: demo

 <template>
-    <lay-checkbox name="like" label="1" v-model="checked2" >普通</lay-checkbox>
+    <lay-checkbox name="like" value="1" v-model="checked2" >普通</lay-checkbox>
 </template>

 <script>
@ -66,9 +69,9 @@ export default {

 <template>
    <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 name="like" skin="primary" value="1">写作</lay-checkbox>
+      <lay-checkbox name="like" skin="primary" value="2">画画</lay-checkbox>
+      <lay-checkbox name="like" skin="primary" value="3">运动</lay-checkbox>
    </lay-checkbox-group>
 </template>

@ -99,9 +102,9 @@ export default {
 ::: demo

 <template>
-    <lay-checkbox name="like" skin="primary" v-model="checked3" label="1">写作</lay-checkbox>
-    <lay-checkbox name="like" skin="primary" v-model="checked4" label="2">画画</lay-checkbox>
-    <lay-checkbox name="like" skin="primary" v-model="checked5" label="3">运动</lay-checkbox>
+    <lay-checkbox name="like" skin="primary" v-model="checked3" value="1">写作</lay-checkbox>
+    <lay-checkbox name="like" skin="primary" v-model="checked4" value="2">画画</lay-checkbox>
+    <lay-checkbox name="like" skin="primary" v-model="checked5" value="3">运动</lay-checkbox>
 </template>

 <script>
@ -129,7 +132,7 @@ export default {
 ::: demo

 <template>
-    <lay-checkbox name="like" skin="primary" label="1" :disabled="disabled" v-model="checked6">禁用</lay-checkbox>
+    <lay-checkbox name="like" skin="primary" value="1" :disabled="disabled" v-model="checked6">禁用</lay-checkbox>
 </template>

 <script>
@ -157,7 +160,7 @@ export default {
 ::: demo

 <template>
-    <lay-checkbox name="like" skin="primary" label="1" @change="change" v-model="checked7">回调</lay-checkbox>
+    <lay-checkbox name="like" skin="primary" value="1" @change="change" v-model="checked7">回调</lay-checkbox>
 </template>

 <script>
@ -188,7 +191,7 @@ export default {
 ::: demo 在实现全选效果时，你可能会用到 isIndeterminate 属性。

 <template>
-    <lay-checkbox name="like" skin="primary" label="1" :isIndeterminate="true" v-model="checked8">半选</lay-checkbox>
+    <lay-checkbox name="like" skin="primary" value="1" :isIndeterminate="true" v-model="checked8">半选</lay-checkbox>
 </template>

 <script>
@ -217,7 +220,8 @@ export default {
 | ------------------- | ------------- | -------------------- |
 | name                | 原始属性 name | --                   |
 | skin                | 主题          | --                   |
-| label               | 选中值        | --                   |
+| label               | 显示内容        | --                  |
+| value               | 选中值        | --                   |
 | v-model             | 是否选中      | `true` `false`       |
 | isIndeterminate     | 半选状态      | `true` `false`       |

--- a/package/document-component/src/document/zh-CN/components/form.md
+++ b/package/document-component/src/document/zh-CN/components/form.md
@ -22,9 +22,9 @@
      </lay-select>
    </lay-form-item>
    <lay-form-item label="特长" prop="specialty">
-      <lay-radio v-model="model.specialty" name="specialty" label="1">写作</lay-radio>
-      <lay-radio v-model="model.specialty" name="specialty" label="2">画画</lay-radio>
-      <lay-radio v-model="model.specialty" name="specialty" label="3">编码</lay-radio>
+      <lay-radio v-model="model.specialty" name="specialty" value="1">写作</lay-radio>
+      <lay-radio v-model="model.specialty" name="specialty" value="2">画画</lay-radio>
+      <lay-radio v-model="model.specialty" name="specialty" value="3">编码</lay-radio>
    </lay-form-item>
    <lay-form-item label="描述" prop="desc">
      <lay-textarea placeholder="请输入描述" v-model="model.desc"></lay-textarea>
@ -91,9 +91,9 @@ export default {
      </lay-select>
    </lay-form-item>
    <lay-form-item label="特长" :label-position="labelPosition" prop="specialty">
-      <lay-radio v-model="labelPosition" name="labelPosition" label="left">左</lay-radio>
-      <lay-radio v-model="labelPosition" name="labelPosition" label="top">上</lay-radio>
-      <lay-radio v-model="labelPosition" name="labelPosition" label="right">右</lay-radio>
+      <lay-radio v-model="labelPosition" name="labelPosition" value="left">左</lay-radio>
+      <lay-radio v-model="labelPosition" name="labelPosition" value="top">上</lay-radio>
+      <lay-radio v-model="labelPosition" name="labelPosition" value="right">右</lay-radio>
    </lay-form-item>
    <lay-form-item label="描述" :label-position="labelPosition" prop="desc">
      <lay-textarea placeholder="请输入描述" v-model="model.desc"></lay-textarea>
@ -163,9 +163,9 @@ export default {
      </lay-select>
    </lay-form-item>
    <lay-form-item label="特长" prop="specialty">
-      <lay-radio v-model="validateModel.specialty" name="specialty" label="1">写作</lay-radio>
-      <lay-radio v-model="validateModel.specialty" name="specialty" label="2">画画</lay-radio>
-      <lay-radio v-model="validateModel.specialty" name="specialty" label="3">编码</lay-radio>
+      <lay-radio v-model="validateModel.specialty" name="specialty" value="1">写作</lay-radio>
+      <lay-radio v-model="validateModel.specialty" name="specialty" value="2">画画</lay-radio>
+      <lay-radio v-model="validateModel.specialty" name="specialty" value="3">编码</lay-radio>
    </lay-form-item>
    <lay-form-item label="描述" prop="desc">
      <lay-textarea placeholder="请输入描述" v-model="validateModel.desc"></lay-textarea>
--- a/package/document-component/src/document/zh-CN/components/radio.md
+++ b/package/document-component/src/document/zh-CN/components/radio.md
@ -13,9 +13,10 @@
 ::: demo 使用 `lay-radio` 标签, 创建一个单选框

 <template>
-    <lay-radio v-model="selected1" name="action" label="1">写作</lay-radio>
-    <lay-radio v-model="selected1" name="action" label="2">画画</lay-radio>
-    <lay-radio v-model="selected1" name="action" label="3">运动</lay-radio>
+    <lay-radio v-model="selected1" name="action" value="1" label="写作"></lay-radio>
+    <lay-radio v-model="selected1" name="action" value="2" label="画画"></lay-radio>
+    <lay-radio v-model="selected1" name="action" value="3" label="运动"></lay-radio>
+    <lay-radio v-model="selected1" name="action" value="4">自定义slot</lay-radio>
 </template>

 <script>
@ -41,10 +42,10 @@ export default {
 ::: demo

 <template>
-    <lay-radio v-model="selected2" name="action" label="1">写作</lay-radio>
-    <lay-radio v-model="selected2" name="action" label="2">画画</lay-radio>
-    <lay-radio v-model="selected2" name="action" label="3">运动</lay-radio>
-    <lay-radio v-model="selected2" name="action" label="4" :disabled="disabled">禁用</lay-radio>
+    <lay-radio v-model="selected2" name="action" value="1">写作</lay-radio>
+    <lay-radio v-model="selected2" name="action" value="2">画画</lay-radio>
+    <lay-radio v-model="selected2" name="action" value="3">运动</lay-radio>
+    <lay-radio v-model="selected2" name="action" value="4" :disabled="disabled">禁用</lay-radio>
 </template>

 <script>
@ -72,9 +73,9 @@ export default {
 ::: demo

 <template>
-    <lay-radio v-model="selected3" name="action" label="1" @change="change">写作</lay-radio>
-    <lay-radio v-model="selected3" name="action" label="2" @change="change">画画</lay-radio>
-    <lay-radio v-model="selected3" name="action" label="3" @change="change">运动</lay-radio>
+    <lay-radio v-model="selected3" name="action" value="1" @change="change">写作</lay-radio>
+    <lay-radio v-model="selected3" name="action" value="2" @change="change">画画</lay-radio>
+    <lay-radio v-model="selected3" name="action" value="3" @change="change">运动</lay-radio>
 </template>

 <script>
@ -104,9 +105,9 @@ export default {

 <template>
    <lay-radio-group name="action" v-model="selected4" @change="change4">
-      <lay-radio label="1">写作</lay-radio>
-      <lay-radio label="2">画画</lay-radio>
-      <lay-radio label="3">运动</lay-radio>
+      <lay-radio value="1">写作</lay-radio>
+      <lay-radio value="2">画画</lay-radio>
+      <lay-radio value="3">运动</lay-radio>
    </lay-radio-group>
 </template>

@ -138,7 +139,8 @@ export default {
 | 属性    | 描述          | 默认值 |
 | ------- | ------------- | ------ |
 | name    | 原始属性 name | --     |
-| label   | 当前值        | --     |
+| label   | 显示值        | --     |
+| value   | 绑定值        | --     |
 | v-model | 选中值        | --     |

 :::
--- a/package/document-component/src/document/zh-CN/components/table.md
+++ b/package/document-component/src/document/zh-CN/components/table.md
@ -66,9 +66,9 @@ export default {

 <template>
  <lay-form>
-    <lay-radio v-model="size2" name="action" label="sm">sm</lay-radio>
-    <lay-radio v-model="size2" name="action" label="md">md</lay-radio>
-    <lay-radio v-model="size2" name="action" label="lg">lg</lay-radio>
+    <lay-radio v-model="size2" name="action" value="sm">sm</lay-radio>
+    <lay-radio v-model="size2" name="action" value="md">md</lay-radio>
+    <lay-radio v-model="size2" name="action" value="lg">lg</lay-radio>
  </lay-form>
  <lay-table :columns="columns2" :dataSource="dataSource2" :size="size2"></lay-table>
 </template>
--- a/package/document-component/src/document/zh-CN/guide/changelog.md
+++ b/package/document-component/src/document/zh-CN/guide/changelog.md
@ -10,6 +10,17 @@
 ::: demo
 <template>
 <lay-timeline>
+  <lay-timeline-item title="1.3.x">
+    <ul> 
+      <a name="1-3-0"></a> 
+      <li> 
+        <h3>1.3.0 <span class="layui-badge-rim">2022-07-12</span></h3> 
+        <ul>         
+          <li><span style="color:#FF5722">[破坏性更新]</span> 统一checkbox与radio属性语义 两个组件受到影响 label代表显示值，value代表绑定值。 by @SmallWai</li> 
+        </ul>
+      </li>
+    </ul>   
+  </lay-timeline-item>
  <lay-timeline-item title="1.2.x">
    <ul> 
      <a name="1-2-9"></a>