0


《uni-app》表单组件-Checkbox组件

在这里插入图片描述

本文分享的checkbox组件为uni-app的内置组件checkbox,非扩展组件,两者在用法上其实大同小异,只是扩展组件的属性以及事件更多…没有本质上的区别~

《uni-app》表单组件-Checkbox组件

一. 简介

Checkbox,复选框,图形化界面基础组件之一,常用于复选多个选项时的业务场景,如问卷调查业务场景中的多项选择题等;

二. 基础用法

基础用法如下:

<checkbox/>篮球

在基础用法下,uni-app将 启用一组内置在checkbox组件内部的默认参数(包括颜色,勾选状态,禁用状态等等),其表现形态 效果图 如下:
在这里插入图片描述
这种用法无法正常应用于实际的业务场景,原因是因为 复选框往往是成组的形式出现,哪怕这一组有且只有一个复选框选项;为了引入组的概念,因此除了 **

checkbox标签

** 之外,还额外提供了一个新的标签 **

checkbox-group标签

**,基本用法如下:

<checkbox-group><checkbox/>
  篮球
  <checkbox/>
  足球
  <checkbox/>
  网球
</checkbox-group>

其表现形态 效果图 如下:
在这里插入图片描述

通过 **

checkbox-group标签

** 的框定,使得checkbox被分为了一组~

三. value属性

value属性,用于代表checkbox的标识,什么是标识,简单的说就是内置在checkbox上用于被系统或者代码识别的值,这个值具有唯一性,说明如下
参数说明类型****默认值valuecheckbox的标识,通过事件change可获得String
代码示例如下:

<checkbox-group><checkboxvalue="bb"/>篮球
  <checkboxvalue="fb"/>足球
  <checkboxvalue="wb"/>网球
</checkbox-group>

对于 标识 可能还是有小伙伴不大明白,那就再换一个说法,一个正常的checkbox往往会存在两个值:

  • 一个用于 显示在用户UI界面的显示值,比如示例中的:篮球,足球,网球等显示文字,这类显示值的 长度长短不一,毕竟 选项的内容具有不确定性,在如问卷调查类型的业务场景中,往往有的复选框值会非常长;
  • 另外一个是 内置在checkbox的标识,这类值代表着这个复选框在系统内部或者说在 代码层面上的可识别值,这个值会被用来运算,逻辑处理等等操作,并且这个值是具有 唯一性 的;

如果值没有被区分或者干脆就没有内部的标识,试想一下,假设需要显示的值非常长,甚至是文章中的一整个段落,难道将这个段落一直在代码中进行逻辑运算吗,显然这是不合理的

<checkbox-group><checkboxvalue="这是一个关于篮球文章的段落,假设锻炼有100个汉字"/>这是一个关于篮球文章的段落,假设锻炼有100个汉字
  <checkboxvalue="这是一个关于足球文章的段落,假设锻炼有500个汉字"/>这是一个关于足球文章的段落,假设锻炼有500个汉字
  <checkboxvalue="这是一个关于网球文章的段落,假设锻炼有50个汉字"/>这是一个关于网球文章的段落,假设锻炼有50个汉字
</checkbox-group>

四. disabled禁用属性

disabled属性,用于控制checkbox是否可选中或取消选中,当复选框处于disabled状态下时,复选框的形态将 置灰 且用户 不可再进行选中/取消选中操作
参数说明类型默认值disabled当前复选框是否禁用Booleanfalse
代码示例如下:

<!-- disabled禁用属性 --><checkbox-group><checkbox:disabled="true"/>
  篮球
  <checkboxdisabled/>
  足球
  <checkbox/>
  网球
</checkbox-group>

其表现形态展示的 效果图 如下:
在这里插入图片描述

五. checked选中属性

checked属性,用于控制复选框是否处于选中状态,当复选框处于 **

:checked="true"

** 值时,复选框将默认选中,参数说明如下:
参数说明类型默认值checked当前是否选中,可用来设置默认选中Booleanfalse
演示代码如下:

<!-- checked禁用属性 --><checkbox-group><checkbox:checked="true"/>
  篮球
  <checkboxchecked/>
  足球
  <checkbox/>
  网球
</checkbox-group>

其表现形态展示的 效果图 如下:
在这里插入图片描述

六. color颜色属性

6.1 说明

color属性,用于控制复选框内部选中时勾形图标的颜色,参数说明如下:
参数说明类型默认值colorcheckbox的颜色,同css的colorString
不同的 color值将直接作用于勾形图标的颜色,另外,由于color属性 等同与CSS的color,因此值可以是具体的 **

颜色

色号

rgb

** 以及 **

rgba

**,示例代码如下:

<!-- color颜色属性 --><checkbox-group><checkboxcheckedcolor="#FFCC33"/>
  篮球
  <checkboxcheckedcolor="red"/>
  足球
  <checkboxcheckedcolor="rgba(0,0,0,1)"/>
  网球
  <checkboxcheckedcolor="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上的值 ,这个事件带一个默认参数,参数的值为当前的事件参数集合,说明如下:
属性名类型默认值说明@changeEventHandle中选中项发生改变是触发 change 事件,detail = {value:[选中的checkbox的value的数组]}
示例代码如下:

<template><viewclass="checkbox-conatiner"><!-- change事件 --><viewclass="checkbox-group"><h4>change事件</h4><!-- change事件 --><checkbox-group@change="handleChange"><checkboxvalue="bb"color="#FFCC33"/>
                篮球
                <checkboxvalue="fb"color="red"/>
                足球
                <checkboxvalue="wb"color="rgba(0,0,0,1)"/>
                网球
            </checkbox-group><div>当前选中项的value值为:{{ value }}</div></view></view></template><script>exportdefault{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><checkboxv-for="item in list":key="item.value":value="item.value">
    {{ item.title }}
  </checkbox></checkbox-group><script>exportdefault{data(){return{list:[{title:'篮球',value:'bb'},{title:'足球',value:'fb'},{title:'网球',value:'wb'}],};},};</script>

其表现形态 效果图 如下:
在这里插入图片描述

第二步:绑定change事件,获得选中/未选中时对于的value值;

<template><viewclass="checkbox-conatiner"><!-- demo示例 --><checkbox-group@change="handleChange"><checkboxv-for="item in list":key="item.value":value="item.value">
          {{ item.title }}
        </checkbox></checkbox-group></view></template><script>exportdefault{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"><checkboxv-for="item in list":value="item.value":key="item.value">
    {{ item.title }}
  </checkbox></checkbox-group><button@click="handleClick">获取选中值</button><script>exportdefault{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 ui 移动开发

本文转载自: https://blog.csdn.net/zy21131437/article/details/126569962
版权归原作者 Oliver尹 所有, 如有侵权,请联系我们删除。

“《uni-app》表单组件-Checkbox组件”的评论:

还没有评论