peaf(checkbox): 重构 checkbox 逻辑
This commit is contained in:
85
docs/docs/zh-CN/components/checkbox.md
Normal file
85
docs/docs/zh-CN/components/checkbox.md
Normal 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 |
|
||||
@@ -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)
|
||||
|
||||
@@ -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: '复选框' },
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user