开发指南
组件
- 起步
- 基础组件
- 表单组件
- 数据组件
- 反馈组件
- 布局组件
- 导航组件
- 其他组件
JS
- 开发指南
- 网络
- 工具库
模板
文章来源于网络收集而来,版权归原创者所有,如有侵权请及时联系!
Checkbox 复选框
Checkbox 复选框 平台差异说明
App | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 | QQ小程序 |
---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | √ | √ |
基本使用
- 该组件无需强制搭配
checkboxGroup
组件使用(视情况而定),可以单个独立使用u-checkbox
组件 - 通过
v-model
给checkbox
绑定一个变量,这个绑定的变量是双向的(初始值只能是true
或者false
),也就是说,您可以无需监听checkbox
或者checkboxGroup
组件的change
事件,也能知道哪个复选框 被勾选了
<template>
<view class="">
<u-checkbox-group @change="checkboxGroupChange">
<u-checkbox
@change="checkboxChange"
v-model="item.checked"
v-for="(item, index) in list" :key="index"
:name="item.name"
>{{item.name}}</u-checkbox>
</u-checkbox-group>
<u-button @click="checkedAll">全选</u-button>
</view>
</template>
<script>
export default {
data() {
return {
list: [
{
name: 'apple',
checked: false,
disabled: false
},
{
name: 'banner',
checked: false,
disabled: false
},
{
name: 'orange',
checked: false,
disabled: false
}
]
};
},
methods: {
// 选中某个复选框时,由checkbox时触发
checkboxChange(e) {
//console.log(e);
},
// 选中任一checkbox时,由checkbox-group触发
checkboxGroupChange(e) {
// console.log(e);
},
// 全选
checkedAll() {
this.list.map(val => {
val.checked = true;
})
}
}
};
</script>
禁用checkbox
设置disabled
为true
,即可禁用某个组件,让用户无法点击,禁用分为两种状态,一是未勾选前禁用,这时只显示一个灰色的区域。二是已勾选后 再禁用,会有灰色的已勾选的图标,但此时依然是不可操作的。
<u-checkbox-group>
<u-checkbox v-model="checked" :disabled="false">天涯</u-checkbox>
</u-checkbox-group>
自定义形状
可以通过设置shape
为square
或者circle
,将复选框设置为方形或者圆形
<u-checkbox-group>
<u-checkbox v-model="checked" shape="circle">明月</u-checkbox>
</u-checkbox-group>
自定义颜色
此处所指的颜色,为checkbox
选中时的背景颜色,参数为active-color
<u-checkbox-group>
<u-checkbox v-model="checked" active-color="red">光影</u-checkbox>
</u-checkbox-group>
文本是否可点击
设置label-disabled
为false
,点击文本时,无法操作checkbox
<u-checkbox-group>
<u-checkbox v-model="checked" :label-disabled="false">剑舞</u-checkbox>
</u-checkbox-group>
API
Checkbox Props
注意:需要给checkbox
组件通过v-model
绑定一个布尔值,来初始化checkbox
的状态,随后该值被双向绑定, 当用户勾选复选框时,该值在checkbox
内部被修改为true
,并反映到父组件,否则为false
,换言之,您无需监听checkbox
的change
事件,也能 知道某一个checkbox
是否被选中的状态
注意:checkbox
和checkbox-group
二者同名参数中,checkbox
的参数优先级更高。
参数 | 说明 | 类型 | 默认值 | 可选值 |
---|---|---|---|---|
v-model | 双向绑定某一个checkbox 的值,如果将该变量设置为true ,将会被选中 | String \ Number | - | - |
size | 组件整体的大小,单位rpx | String \ Number | - | - |
label-size | label字体大小,单位rpx | String \ Number | - | - |
icon-size | 图标大小,单位rpx | String \ Number | - | - |
name | checkbox 组件的标示符 | String \ Number | - | - |
shape | 形状,见上方说明 | String | - | square |
disabled | 是否禁用 | Boolean | - | false / true |
label-disabled | 是否禁止点击文本操作checkbox | Boolean | - | false / true |
active-color | 选中时的颜色,如设置CheckboxGroup 的active-color 将失效 | String | - | - |
CheckboxGroup Props
参数 | 说明 | 类型 | 默认值 | 可选值 |
---|---|---|---|---|
max | 最多能选中多少个checkbox | String \ Number | 999 | - |
disabled | 是否禁用所有checkbox | Boolean | false | true |
icon-size | 图标大小,单位rpx | String \ Number | 20 | - |
size | 组件整体的大小,单位rpx | String \ Number | 34 | - |
shape | 形状,见上方说明 | String | circle | square |
active-color | 选中时的颜色,应用到所有子Checkbox 组件 | String | #2979ff | - |
label-disabled | 是否禁止点击文本操作checkbox | Boolean | false | true |
width 1.3.0 | checkbox 的宽度,需带单位,如50% ,150rpx | String | auto | - |
wrap 1.3.0 | 是否每个checkbox 占一行 | Boolean | false | true |
Checkbox Event
事件名 | 说明 | 回调参数 | 版本 |
---|---|---|---|
change | 某个checkbox 状态发生变化时触发,回调为一个对象 | detail = {value: [true或者false,true为被选中,否则反之], name: [通过props传递的name 参数] } | - |
CheckboxGroup Event
事件名 | 说明 | 回调参数 | 版本 |
---|---|---|---|
change | 任一个checkbox 状态发生变化时触发,回调为一个对象 | detail = array( [元素为被选中的checkbox 的name ] ) | - |
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论