layui/docs/docs/zh-CN/components/checkbox.md

162 lines
2.6 KiB
Markdown
Raw Normal View History

2021-10-24 21:31:42 +08:00
::: field 基础使用
:::
2021-10-12 16:22:26 +08:00
::: demo
<template>
<lay-form>
2021-10-14 15:33:11 +08:00
<lay-checkbox name="like" skin="primary" v-model:checked="checked1" label="1" ></lay-checkbox>
2021-10-12 16:22:26 +08:00
</lay-form>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const checked1 = ref(false)
2021-10-12 16:22:26 +08:00
return {
checked1
2021-10-12 16:22:26 +08:00
}
}
}
</script>
:::
2021-10-24 21:31:42 +08:00
::: field 默认样式
:::
2021-10-13 10:04:43 +08:00
::: demo
<template>
<lay-form>
<lay-checkbox name="like" label="1" v-model:checked="checked2" >普通</lay-checkbox>
2021-10-13 10:04:43 +08:00
</lay-form>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const checked2 = ref(false)
2021-10-13 10:04:43 +08:00
return {
checked2
2021-10-13 10:04:43 +08:00
}
}
}
</script>
:::
2021-10-24 21:31:42 +08:00
::: field 完整案例
:::
2021-10-12 16:22:26 +08:00
::: demo
<template>
<lay-form>
<lay-checkbox name="like" skin="primary" v-model:checked="checked3" label="1">写作</lay-checkbox>
<lay-checkbox name="like" skin="primary" v-model:checked="checked4" label="2">画画</lay-checkbox>
<lay-checkbox name="like" skin="primary" v-model:checked="checked5" label="3">运动</lay-checkbox>
2021-10-12 16:22:26 +08:00
</lay-form>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const checked3 = ref(true);
const checked4 = ref(true);
const checked5 = ref(true);
2021-10-12 16:22:26 +08:00
return {
checked3, checked4, checked5
2021-10-12 16:22:26 +08:00
}
}
}
</script>
:::
2021-10-24 21:31:42 +08:00
::: field 禁用状态
:::
::: demo
<template>
<lay-form>
<lay-checkbox name="like" skin="primary" label="1" :disabled="disabled" v-model:checked="checked6">禁用</lay-checkbox>
</lay-form>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const disabled = ref(true)
const checked6 = ref(false);
return {
disabled,checked6
}
}
}
</script>
2021-10-12 16:22:26 +08:00
:::
2021-10-12 16:22:26 +08:00
2021-10-24 21:31:42 +08:00
::: field 事件回调
:::
2021-10-12 16:22:26 +08:00
::: demo
<template>
<lay-form>
<lay-checkbox name="like" skin="primary" label="1" @change="change" v-model:checked="checked7">回调</lay-checkbox>
2021-10-12 16:22:26 +08:00
</lay-form>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const checked7 = ref(true);
2021-10-12 16:22:26 +08:00
const change = function(isChecked) {
console.log("是否选中:" + isChecked)
}
return {
change,
checked7
2021-10-12 16:22:26 +08:00
}
}
}
</script>
:::
2021-10-24 21:31:42 +08:00
::: field checkbox 属性
:::
| Name | Description | Accepted Values |
| ------------------- | ------------- | -------------------- |
| name | 原始属性 name | -- |
| skin | 主题 | -- |
| label | 选中值 | -- |
| checked ( v-model ) | 是否选中 | `true` `false` |
| change | 切换事件 | isChecked : 当前状态 |