theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
0o张不歪o0
2022-07-12 10:36:09 +08:00
parent 786e1efb7a
commit 65f0e1b82e
11 changed files with 80 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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` |

18
package/document-component/src/document/zh-CN/components/form.md
View File

@@ -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>

30
package/document-component/src/document/zh-CN/components/radio.md
View File

@@ -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 | 选中值 | -- |
:::

6
package/document-component/src/document/zh-CN/components/table.md
View File

@@ -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>

11
package/document-component/src/document/zh-CN/guide/changelog.md
View File

@@ -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>