peaf(checkbox): 重构 checkbox 逻辑

This commit is contained in:
就眠仪式
2021-10-12 16:22:26 +08:00
parent 6e9c4f3153
commit c89c04839c
4 changed files with 114 additions and 15 deletions

View File

@@ -0,0 +1,85 @@
::: demo
<template>
<lay-form>
<lay-checkbox name="like" skin="primary" label="1">普通</lay-checkbox>
</lay-form>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
return {
}
}
}
</script>
:::
::: demo
<template>
<lay-form>
<lay-checkbox name="like" skin="primary" v-model:checked="checked1" label="1">写作</lay-checkbox>
<lay-checkbox name="like" skin="primary" v-model:checked="checked2" label="2">画画</lay-checkbox>
<lay-checkbox name="like" skin="primary" v-model:checked="checked3" label="3">运动</lay-checkbox>
</lay-form>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const checked1 = ref(true);
const checked2 = ref(true);
const checked3 = ref(true);
return {
checked1, checked2, checked3
}
}
}
</script>
:::
::: demo
<template>
<lay-form>
<lay-checkbox name="like" skin="primary" label="1" @change="change">回调</lay-checkbox>
</lay-form>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const change = function(isChecked) {
console.log("是否选中:" + isChecked)
}
return {
change
}
}
}
</script>
:::
| | | | |
| -------- | ---- | ----------------------- | --- |
| xs | 尺寸 | 超小屏幕 (手机<768px) | 12 |

View File

@@ -273,6 +273,12 @@ export default {
subTitle: 'transfer',
path: '/zh-CN/components/transfer',
},
{
id: 32,
title: '复选框',
subTitle: 'checkbox',
path: '/zh-CN/components/checkbox',
},
]
const selected = ref(1)

View File

@@ -174,6 +174,10 @@ const zhCN = [
path: '/zh-CN/components/transfer',
component: () => import('../../docs/zh-CN/components/transfer.md'),
meta: { title: '穿梭框' },
},{
path: '/zh-CN/components/checkbox',
component: () => import('../../docs/zh-CN/components/checkbox.md'),
meta: { title: '复选框' },
},
],
},