## DataCheckbox 数据驱动的单选复选框
> **组件名:uni-data-checkbox**
> 代码块: `uDataCheckbox`
本组件是基于uni-app基础组件checkbox的封装。本组件要解决问题包括:
1. 数据绑定型组件:给本组件绑定一个data,会自动渲染一组候选内容。再以往,开发者需要编写不少代码实现类似功能
2. 自动的表单校验:组件绑定了data,且符合[uni-forms](https://ext.dcloud.net.cn/plugin?id=2773)组件的表单校验规范,搭配使用会自动实现表单校验
3. 本组件合并了单选多选
4. 本组件有若干风格选择,如普通的单选多选框、并列button风格、tag风格。开发者可以快速选择需要的风格。但作为一个封装组件,样式代码虽然不用自己写了,却会牺牲一定的样式自定义性
在uniCloud开发中,`DB Schema`中配置了enum枚举等类型后,在web控制台的[自动生成表单](https://uniapp.dcloud.io/uniCloud/schema?id=autocode)功能中,会自动生成``uni-data-checkbox``组件并绑定好data
> **注意事项**
> 为了避免错误使用,给大家带来不好的开发体验,请在使用组件前仔细阅读下面的注意事项,可以帮你避免一些错误。
> - 组件需要依赖 `sass` 插件 ,请自行手动安装
> - 本组件为数据驱动,目的是快速投入使用,只可通过 style 覆盖有限样式,不支持自定义更多样式
> - 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
> - 组件支持 nvue ,需要在 `manifest.json > app-plus` 节点下配置 `"nvueStyleCompiler" : "uni-app"`
> - 如组件显示有问题 ,请升级 `HBuilderX` 为 `v3.1.0` 以上
### 安装方式
本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范,`HBuilderX 2.5.5`起,只需将本组件导入项目,在页面`template`中即可直接使用,无需在页面中`import`和注册`components`。
如需通过`npm`方式使用`uni-ui`组件,另行文档:[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55)
### 基本用法
设置 `localdata` 属性后,组件会通过数据渲染出对应的内容,默认显示的是单选框
需要注意 `:multiple="false"` 时(单选) , `value/v-model` 的值是 `String|Number` 类型
```html
<template>
<view>
<uni-data-checkbox v-model="value" :localdata="range" @change="change"></uni-data-checkbox>
</view>
</template>
```
```javascript
export default {
data() {
return {
value: 0,
range: [{"value": 0,"text": "篮球" },{"value": 1,"text": "足球"},{"value": 2,"text": "游泳"}]
}
},
methods: {
change(e){
console.log('e:',e);
}
}
}
```
### 多选框
设置 `multiple` 属性,组件显示为多选框
需要注意 `:multiple="true"` 时(多选) , `value/v-model` 的值是 `Array` 类型
```html
<template>
<view>
<uni-data-checkbox multiple v-model="value" :localdata="range" @change="change"></uni-data-checkbox>
</view>
</template>
```
```javascript
export default {
data() {
return {
value: [0,2],
range: [{"value": 0,"text": "篮球" },{"value": 1,"text": "足球"},{"value": 2,"text": "游泳"}]
}
},
methods: {
change(e){
console.log('e:',e);
}
}
}
```
### 设置最大最小值
设置 `:multiple="true"` 时(多选) ,可以设置 `min`、`max` 属性
如果选中个数小于 `min` 属性设置的值,那么选中内容将不可取消,只有当选中个数大于等于 `min`且小于 `max` 时,才可取消选中
如果选中个数大于等于 `max` 属性设置的值,那么其他未选中内容将不可选
```html
<template>
<view>
<uni-data-checkbox min="1" max="2" multiple v-model="value" :localdata="range" @change="change"></uni-data-checkbox>
</view>
</template>
```
```javascript
export default {
data() {
return {
value: [0,2],
range: [{"value": 0,"text": "篮球" },{"value": 1,"text": "足球"},{"value": 2,"text": "游泳"}]
}
},
methods: {
change(e){
console.log('e:',e);
}
}
}
```
### 设置禁用
如果需要禁用某项,需要在 `localdata` 属性的数据源中添加 `disable` 属性,而不是在组件中添加 `disable` 属性
```html
<template>
<view>
<uni-data-checkbox v-model="value" :localdata="range" @change="change"></uni-data-checkbox>
</view>
</template>
```
```javascript
export default {
data() {
return {
value: 0,
range: [{
"value": 0,
"text": "篮球"
},
{
"value": 1,
"text": "足球",
// 禁用当前项
"disable":true
},
{
"value": 2,
"text": "游泳"
}
]
}
},
methods: {
change(e){
console.log('e:',e);
}
}
}
```
### 自定义选中颜色
设置 `selectedColor` 属性,可以修改组件选中后的图标及边框颜色
设置 `selectedTextColor` 属性,可以修改组件选中后的文字颜色,如不填写默认同 `selectedColor` 属性 ,`mode` 属性为 `tag` 时,默认为白色
```html
<template>
<view>
<uni-data-checkbox selectedColor="red" selectedTextColor="red" multiple v-model="value" :localdata="range" @change="change"></uni-data-checkbox>
</view>
</template>
```
```javascript
export default {
data() {
return {
value: [0,2],
range: [{"value": 0,"text": "篮球" },{"value": 1,"text": "足球"},{"value": 2,"text": "游泳"}]
}
},
methods: {
change(e){
console.log('e:',e);
}
}
}
```
### 更多模式
设置 `mode` 属性,可以设置更多显示样式,目前内置样式有四种 `default/list/button/tag`
如果需要禁用某项,需要在 `localdata` 属性的数据源中添加 `disable` 属性,而不是在组件中添加 `disable` 属性
```html
<template>
<view>
<!-- 默认 default -->
<uni-data-checkbox v-model="value" :localdata="range" @change="change"></uni-data-checkbox>
<!-- 列表 list ,显示左侧图标 -->
<uni-data-checkbox mode="list" icon="left" v-model="value" :localdata="range" @change="change"></uni-data-checkbox>
<!-- 列表 list ,显示右侧图标 -->
<uni-data-checkbox mode="list" icon="right" v-model="value" :localdata="range" @change="change"></uni-data-checkbox>
<!-- 按钮 button -->
<uni-data-checkbox mode="button" v-model="value" :localdata="range" @change="change"></uni-data-checkbox>
<!-- 标签 tag -->
<uni-data-checkbox mode="tag" v-model="value" :localdata="range" @change="change"></uni-data-checkbox>
</view>
</template>
```
```javascript
export default {
data() {
return {
value: 0,
range: [{"value": 0,"text": "篮球" },{"value": 1,"text": "足球"},{"value": 2,"text": "游泳"}]
}
},
methods: {
change(e){
console.log('e:',e);
}
}
}
```
## API
### DataCheckbox Props
| 属性名 | 类型 |可选值 | 默认值| 说明 |
| :-: | :-: |:-: |:-: | :-: |
|value/v-model|Array/String/Number|- |- |默认值,multiple=true时为 Array类型,否则为 String或Number类型 |
|localdata |Array |- |- |本地渲染数据, |
|mode | String |default/list/button/tag|default|显示模式 |
|multiple |Boolean |- |false |是否多选 |
|min |String/Number |- |- |最小选择个数 ,multiple为true时生效 |
|max |String/Number |- |- |最大选择个数 ,multiple为true时生效 |
|wrap |Boolean |- |- |是否换行显示 |
|icon |String |left/right |left |list 列表模式下 icon 显示的位置 |
|selectedColor|String |- |#007aff|选中颜色|
|selectedTextColor|String |- |#333 |选中文本颜色,如不填写则自动显示|
|emptyText |String |- |暂无数据 |没有数据时显示的文字 ,本地数据无效|
|map |Obje
没有合适的资源?快使用搜索试试~ 我知道了~
花花省APP带自营商城本地生活CPS外卖优惠电影票话费更新渠道跟单生活特权V3
共627个文件
png:185个
vue:168个
nvue:114个
需积分: 1 5 下载量 178 浏览量
2022-04-23
10:20:26
上传
评论 2
收藏 4.51MB ZIP 举报
温馨提示
1、首页 首页广告位、淘口令识别、微信登录、淘宝登录、淘宝返佣、拼多多返佣、京东返佣、唯品会返佣、热销榜、聚划算、天猫超市、9.9包邮、品牌特卖、新人攻略 、小米有品、优惠加油、阿里巴巴、去哪网、电影票、飞猪旅行、美团酒店、当当网、肯德基、热门抖货、商品推荐、商品详情、商品海报、APP检测升级、配置动态化、分享海报、会员授权、获取剪切板、精选商品、签到、积分兑换、淘口令解析、热门搜索、搜索历史、走路赚(选配),主页面主流布局,特色功能板块 2、分类 分类商品分类 、分类详情、多平台比价、海报生成 3、发现 抖货商品、随机出现、点赞评论、视频带货 4、发圈素材 淘系素材,京东素材 5、我的 我的提现、积分明细、消息中心、反馈、使用帮助、团队成员、提现明细、会员、订单明细、我的收藏、推广中心、推广订单、账号安全、设置、提现设置、换绑手机号、修改密码、邀请成员、推广海报、钱包明细,消息通知 6、自营商城(选配) 商城首页、商城推荐、商城分类、商品列表、商品详情、我的订单、我的返利、团队返利、我的团队,地址管理,订单详情,支付页面,退款、确认收货、提醒发货、物流信息、订单明细等
资源详情
资源评论
资源推荐
收起资源包目录
花花省APP带自营商城本地生活CPS外卖优惠电影票话费更新渠道跟单生活特权V3 (627个子文件)
._components 216B
iconfont.css 79KB
simplepro.css 53KB
common.css 41KB
simple-ui-weex.css 35KB
index.css 4KB
u-parse.css 4KB
simple-wexx.css 4KB
global.css 3KB
uni-plate-input.css 3KB
daren.css 2KB
control.css 1KB
.DS_Store 6KB
._.DS_Store 216B
dy.gif 68KB
fuligif.gif 65KB
logins.gif 43KB
yw_1222_baichuan.jpg 86KB
yw_1222_baichuan.jpg 86KB
shiwangl.jpg 60KB
safe.jpg 16B
safe.jpg 16B
area.js 122KB
index.js 100KB
allBrands.js 47KB
async-validator.js 34KB
weCropper.js 32KB
data.js 24KB
we-cropper.js 18KB
MpHtmlParser.js 17KB
update.js 17KB
helper.js 16KB
city.js 14KB
md5.js 12KB
circleChart.js 12KB
md5.js 12KB
index.js 11KB
index.js 11KB
permission.js 9KB
httpRequest.js 7KB
html2json.js 7KB
shanyan_theme.js 7KB
wxDiscode.js 7KB
index.js 6KB
bindingx.js 6KB
htmlparser.js 5KB
html-parser.js 5KB
test.js 4KB
index.js 4KB
indexHome.js 4KB
ad.js 4KB
taojin-app.js 3KB
pickFile.js 3KB
plus-listener.js 3KB
mpother.js 3KB
CssHandler.js 3KB
route.js 3KB
colorGradient.js 3KB
index.js 3KB
indexmixins.js 3KB
mpalipay.js 3KB
config.js 3KB
plus-shanyan-login.js 2KB
http.interceptor.js 2KB
webview.js 2KB
cache.js 2KB
icons.js 2KB
timeFormat.js 2KB
emitter.js 2KB
simple-share.js 2KB
guid.js 2KB
getParent.js 2KB
mpwxs.js 2KB
plus-login.js 2KB
timeFrom.js 2KB
mixin.js 2KB
config.js 2KB
queryParams.js 2KB
province.js 1KB
type2icon.js 1011B
http.api.js 939B
utils.js 930B
debounce.js 910B
color.js 892B
deepMerge.js 818B
throttle.js 802B
$parent.js 794B
deepClone.js 681B
config.js 598B
main.js 584B
index.js 522B
index.js 502B
popup.js 389B
popup.js 387B
addUnit.js 381B
message.js 372B
zIndex.js 362B
message.js 356B
trim.js 354B
mpShare.js 296B
共 627 条
- 1
- 2
- 3
- 4
- 5
- 6
- 7
河北清兮网络科技
- 粉丝: 358
- 资源: 2
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- sony 索尼IMX334摄像头模组电路板AD版硬件PCB图(6层板).zip
- 基于flask和echarts融合交易策略的bitfinex可视化微服务.zip
- 包含了wvp-assist.tar wvp-talk.tar zlmediakit.tar .
- 3r4efgh53wgrf43tw
- 2024新版Java基础从入门到精通全套视频+资料下载
- Spring AI大模型视频教程+ChatGPT视频教程+OpenAI大模型视频教程(资料+视频教程)
- ABB工业机器人教程PDF版本
- 123321123323211
- yolov8实战第八天-pyqt5-yolov8实现车牌识别系统(论文(8700+字+数据集+完整部署代码+代码使用说明)
- 三相桥式全桥整流电路MATALB Simulink仿真文件
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0