《uni-app》表单组件-Checkbox组件
本文分享的checkbox组件为uni-app的内置组件checkbox,非扩展组件,两者在用法上其实大同小异,只是扩展组件的属性以及事件更多…没有本质上的区别~
《uni-app》表单组件-Checkbox组件
- 一. 简介
- 二. 基础用法
- 三. value属性
- 四. disabled禁用属性
- 五. checked选中属性
- 六. color颜色属性
- 6.1 说明
- 6.2 平台差异
- 七. 事件
- 八. demo示例演示
- 九. 小结
一. 简介
Checkbox,复选框,图形化界面基础组件之一,常用于复选多个选项时的业务场景,如问卷调查业务场景中的多项选择题等;
二. 基础用法
基础用法如下:
<checkbox />篮球
在基础用法下,uni-app将 启用一组内置在checkbox组件内部的默认参数(包括颜色,勾选状态,禁用状态等等),其表现形态 效果图 如下:
但 这种用法无法正常应用于实际的业务场景,原因是因为 复选框往往是成组的形式出现,哪怕这一组有且只有一个复选框选项;为了引入组的概念,因此除了 checkbox标签
之外,还额外提供了一个新的标签 checkbox-group标签
,基本用法如下:
<checkbox-group><checkbox />篮球<checkbox />足球<checkbox />网球
</checkbox-group>
其表现形态 效果图 如下:
通过 checkbox-group标签
的框定,使得checkbox被分为了一组~
三. value属性
value属性,用于代表checkbox的标识,什么是标识,简单的说就是内置在checkbox上用于被系统或者代码识别的值,这个值具有唯一性,说明如下
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
value | checkbox的标识,通过事件change可获得 | String |
代码示例如下:
<checkbox-group><checkbox value="bb" />篮球<checkbox value="fb" />足球<checkbox value="wb" />网球
</checkbox-group>
对于 标识 可能还是有小伙伴不大明白,那就再换一个说法,一个正常的checkbox往往会存在两个值:
- 一个用于 显示在用户UI界面的显示值,比如示例中的:篮球,足球,网球等显示文字,这类显示值的 长度长短不一,毕竟 选项的内容具有不确定性,在如问卷调查类型的业务场景中,往往有的复选框值会非常长;
- 另外一个是 内置在checkbox的标识,这类值代表着这个复选框在系统内部或者说在 代码层面上的可识别值,这个值会被用来运算,逻辑处理等等操作,并且这个值是具有 唯一性 的;
如果值没有被区分或者干脆就没有内部的标识,试想一下,假设需要显示的值非常长,甚至是文章中的一整个段落,难道将这个段落一直在代码中进行逻辑运算吗,显然这是不合理的
<checkbox-group><checkbox value="这是一个关于篮球文章的段落,假设锻炼有100个汉字" />这是一个关于篮球文章的段落,假设锻炼有100个汉字<checkbox value="这是一个关于足球文章的段落,假设锻炼有500个汉字" />这是一个关于足球文章的段落,假设锻炼有500个汉字<checkbox value="这是一个关于网球文章的段落,假设锻炼有50个汉字" />这是一个关于网球文章的段落,假设锻炼有50个汉字
</checkbox-group>
四. disabled禁用属性
disabled属性,用于控制checkbox是否可选中或取消选中,当复选框处于disabled状态下时,复选框的形态将 置灰 且用户 不可再进行选中/取消选中操作;
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
disabled | 当前复选框是否禁用 | Boolean | false |
代码示例如下:
<!-- disabled禁用属性 -->
<checkbox-group><checkbox :disabled="true" />篮球<checkbox disabled />足球<checkbox />网球
</checkbox-group>
其表现形态展示的 效果图 如下:
五. checked选中属性
checked属性,用于控制复选框是否处于选中状态,当复选框处于 :checked="true"
值时,复选框将默认选中,参数说明如下:
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
checked | 当前是否选中,可用来设置默认选中 | Boolean | false |
演示代码如下:
<!-- checked禁用属性 -->
<checkbox-group><checkbox :checked="true" />篮球<checkbox checked />足球<checkbox />网球
</checkbox-group>
其表现形态展示的 效果图 如下:
六. color颜色属性
6.1 说明
color属性,用于控制复选框内部选中时勾形图标的颜色,参数说明如下:
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
color | checkbox的颜色,同css的color | String |
不同的 color值将直接作用于勾形图标的颜色,另外,由于color属性 等同与CSS的color,因此值可以是具体的 颜色
,色号
,rgb
以及 rgba
,示例代码如下:
<!-- color颜色属性 -->
<checkbox-group><checkbox checked color="#FFCC33" />篮球<checkbox checked color="red" />足球<checkbox checked color="rgba(0,0,0,1)" />网球<checkbox checked color="rgb(0,0,0)" />乒乓球
</checkbox-group>
其表现形态 效果图 如下:
我们在基础用法中有一个 不带任何参数的示例,虽然使用时不带任何参数,但在组件内部color色其实是有 默认值 的,这个默认值跟随平台而定;
6.2 平台差异
我们知道uni-app是一个跨平台的解决方案,因此 某些属性在编译后存在一定的平台差异,在没有任何颜色设定的情况下,复选框的选中颜色有所区别,颜色会跟随系统平台的默认值而定,具体如下:
微信小程序、360小程序 | App、H5、百度小程序、支付宝小程序、飞书小程序、快应用、QQ小程序 | 字节跳动小程序 |
---|---|---|
绿色 | 蓝色 | 红色 |
也就是说,我们在uni-app中不为checkbox设定color属性,那么选中的颜色在 微信小程序 中会显示成 绿色,在 支付宝小程序 会显示成 蓝色,在 字节跳动小程序 中会显示成 红色,如果想保证所有平台的显示一致,可以在代码中手动指定 color属性的值;
七. 事件
在uni-app中的事件机制完全遵循于Vue的语法,那么理所当然的checkbox的事件也遵循Vue的语法,checkbox提供了一个 change事件,注意该事件绑定的位置在 checkbox-group 上,毕竟只有在 checkbox-group 上才可以获取到这一组checkbox上的值 ,这个事件带一个默认参数,参数的值为当前的事件参数集合,说明如下:
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
@change | EventHandle | 中选中项发生改变是触发 change 事件,detail = {value:[选中的checkbox的value的数组]} |
示例代码如下:
<template><view class="checkbox-conatiner"><!-- change事件 --><view class="checkbox-group"><h4>change事件</h4><!-- change事件 --><checkbox-group @change="handleChange"><checkbox value="bb" color="#FFCC33" />篮球<checkbox value="fb" color="red" />足球<checkbox value="wb" color="rgba(0,0,0,1)" />网球</checkbox-group><div>当前选中项的value值为:{{ value }}</div></view></view>
</template><script>
export default {data() {return {value: ''};},methods: {handleChange(e) {this.value = e.detail.value.join(';');}}
};
</script>
其表现形态 效果图 如下:
从效果图中可以看出,checkbox选中与取消选中时都会触发 checkbox-group 上的change事件,实际业务开发中可以在change事件中进行业务处理;
八. demo示例演示
本节期望通过一个具体的示例来更加清晰的描述checkbox的用法,demo实现的功能大致如下:从data中取到checkbox的list,使用v-for指令动态生成checkbox,之后使用button获取到checkbox选中项的值
第一步:使用v-for动态生成checkbox列表;
<!-- demo示例 -->
<checkbox-group><checkbox v-for="item in list" :key="item.value" :value="item.value">{{ item.title }}</checkbox>
</checkbox-group><script>
export default {data() {return {list: [{title: '篮球',value: 'bb'},{title: '足球',value: 'fb'},{title: '网球',value: 'wb'}],};},
};
</script>
其表现形态 效果图 如下:
第二步:绑定change事件,获得选中/未选中时对于的value值;
<template><view class="checkbox-conatiner"><!-- demo示例 --><checkbox-group @change="handleChange"><checkbox v-for="item in list" :key="item.value" :value="item.value">{{ item.title }}</checkbox></checkbox-group></view>
</template><script>
export default {data() {return {list: [{title: '篮球',value: 'bb'},{title: '足球',value: 'fb'},{title: '网球',value: 'wb'}],value: ''};},methods: {handleChange(e) {this.value = e.detail.value;}}
};
</script>
第三步:添加按钮,并为按钮添加点击事件,在点击事件汇总获取选中值;
<!-- demo示例 -->
<checkbox-group @change="handleChange"><checkbox v-for="item in list" :value="item.value" :key="item.value">{{ item.title }}</checkbox>
</checkbox-group><button @click="handleClick">获取选中值</button><script>
export default {data() {return {list: [{title: '篮球',value: 'bb'},{title: '足球',value: 'fb'},{title: '网球',value: 'wb'}],value: ''};},methods: {handleChange(e) {this.value = e.detail.value;},handleClick() {alert(this.value.join(';'));}}
};
</script>
其表现形态 效果图 如下:
九. 小结
本文主要分享了uni-app中内置组件checkbox的一些用法,主要包括 属性如value属性,禁用属性,选中属性等,以及checkbox提供的默认事件change的使用,最后示例了一个结合v-for指令,button组件完成了一个动态生成checkbox并获取选中值的示例demo;
我们知道checkbox同样是图形化界面中的基石之一,尤其是在一些表单控件的操作界面上,它与输入框,单选框等表单组件的使用频率非常高;
(PS:都已经看到这里了,点个赞,求个关注吧,万分感谢~)
《uni-app》表单组件-Checkbox组件相关推荐
- 移动端通用元件库+app通用元件库+数据展示+操作反馈+通用模板+数据录入+列表页+表单页+详情页+通用版布局+移动端手机模板+业务组件+反馈组件+展示组件+表单组件+导航组件
移动端通用元件库+app通用元件库+数据展示+操作反馈+通用模板+数据录入+列表页+表单页+详情页+通用版布局+移动端手机模板+业务组件+反馈组件+展示组件+表单组件+导航组件 原型展示及下载地址:h ...
- 基于Element-plus封装配置化表单组件(组件的v-model实现)
一.预备知识 1.1 组件的v-model 前面我们在input中可以使用v-model来完成双向绑定: 这个时候往往会非常方便,因为v-model默认帮助我们完成了两件事: v-bind:value ...
- jsf tree组件_JSF表单组件示例教程
jsf tree组件 JSF Form component is a collection of fields along with the data and submit functionality ...
- 微信小程序学习之路——表单组件(一)
radio组件 1.radio-group 在小程序中<radio/>不能单独使用,同一组<radio/>需要包含在一个<radio group/>中,这样才能形成 ...
- Vue form-create的基本使用 和 自定义表单组件的数据通迅
前言 由于之前有个Web项目,大部分都是表单,而且这些表单是通过请求后端接口返回的数据,动态生成对应的DOM(表单类型),以及表单的初始数据渲染,和修改表单后的数据提交. 根据以上项目情况,所以这次就 ...
- 微信小程序 - 基础 - 003 - WEUI - 基本表单组件 - form - 页面数据提交和获取 - 01
前言:form作为数据提交的重要控件,历来在前端设计中非常重要.微信给出了完整的form的例子.参考了一些微信设计的书籍,大多数都是copy 粘贴了例子的东西.... 其实微信的例子给的比较充分了: ...
- flutter - 图文讲解表单组件基本使用 注册实战
图文讲解表单组件,创建表单组件.校验表单.复杂表单.复杂校验规则.动态控制表单 实现一个注册界面 创建表单组件 创建form组件 Form组件函数(准确说叫widget),然后写一个key,因为我们等 ...
- [React网络整理]React之表单组件的学习笔记
表单组件 诸如 <input>.<textarea>.<option> 这样的表单组件不同于其他组件,因为他们可以通过用户交互发生变化.这些组件提供的界面使响应用户 ...
- 微信小程序开发之(表单组件的使用)代码篇
表单组件 1.工程目录 2.详细代码 3.结果展示 4.获取资源 这篇文章介绍微信小程序的表单组件的使用 内容包括添加视频播放.轮转图片.多选框 单选框.实时获取输入值.按钮提交输入控件的数据 笔者直 ...
- 表单引擎之表单组件详细说明
简介 表单组件是表单引擎的核心,下面将对常用表单组件进行详细的说明. 文档约定 字符"●"标识"是". 字符"○"表示"否&quo ...
最新文章
- 嵌入式视频处理考虑(一)
- 神策数据加入猿团程序员大牛卡,创客大礼包助力开发。
- 关于silverlight+MVVM+WCF保存数据出错的问题
- Gitee X Serverless Devs 邀你来“领赏”啦!
- html模板(base标签,meta标签,禁用浏览器缓存)+JSP自定义标签荔枝
- java内容置剪贴板
- 工作流实战_12_flowable 流程实例 终止流程
- Linux练习(函数调用复制文件)
- java中super_java中super的两种用法
- .rpt文件内容读取java_好程序员前端教程-nodejs如何读取文件夹目录的内容
- linux环境下编译Qt源码
- 无线OSS-高精度整数加法
- mysql数据库原理及应用教案_《数据库原理及应用》全套教案.doc
- 长虹电视刷机固件包汇总
- HTTP协议之报文格式
- ffmpeg 截取切割视频报错
- SQL(08)_SQL约束
- 最好的java代码编辑器_推荐 5 款牛逼的代码编辑器
- 史上最详细Lip-reading with Hierarchical Pyramidal Convolution and Self-Attention文章记录
- Gromacs 的第一步_能量最小化
热门文章
- 向下兼容性格什么意思_男人择偶“向下兼容”,背后的2个真相是什么?
- 《一只狗的生活意见》--[英]梅尔
- CSDN博客编辑小技巧
- .弧度转角度/角度转弧度
- 六边形蜂巢的相关算法
- java方法用泛函_关于函数式语言的只言片语
- 解决GPar的常见并发问题
- 选购小主机的伙伴的避坑小建议,特别想要安装Esxi的伙伴。(仅“适合第一次计划入手小主机的朋友”,老师傅们请绕道。)不要浪费时间。
- 2010最新小小说投稿邮箱(2010-06-10 07:34:24)
- Linux高级命令10:远程登录、远程拷贝命令