表单组件

2024-04-03 12:24| 来源: 网络整理| 查看: 265

Radio 单选框引入代码演示基础用法禁用状态自定义形状自定义颜色自定义大小自定义图标禁用文本点击与 Cell 组件一起使用APIRadioGroup PropsRadio PropsRadio EventRadio 外部样式类RadioGroup EventRadio 单选框引入

在app.json或index.json中引入组件，详细介绍见快速上手

"usingComponents": { "van-radio": "@vant/weapp/radio/index", "van-radio-group": "@vant/weapp/radio-group/index"}代码演示基础用法

通过value绑定值当前选中项的 name

单选框 1 单选框 2Page({ data: { radio: '1', }, onChange(event) { this.setData({ radio: event.detail, }); },});禁用状态

通过disabled属性禁止选项切换，在Radio上设置diabled可以禁用单个选项

单选框 1 单选框 2自定义形状

将shape属性设置为square，单选框的形状会变成方形

单选框 1 单选框 2自定义颜色

通过checked-color属性设置选中状态的图标颜色

单选框 1 单选框 2自定义大小

通过icon-size属性可以自定义图标的大小

单选框 1 单选框 2自定义图标

通过icon插槽自定义图标，需要设置use-icon-slot属性

自定义图标自定义图标 Page({ data: { radio: true, icon: { normal: '//img.yzcdn.cn/icon-normal.png', active: '//img.yzcdn.cn/icon-active.png', }, }, onChange(event) { this.setData({ radio: event.detail, }); },});禁用文本点击

通过设置label-disabled属性可以禁用单选框文本点击

单选框 1 单选框 2与 Cell 组件一起使用

此时你需要再引入Cell和CellGroup组件。

Page({ data: { radio: '1', }, onChange(event) { this.setData({ radio: event.detail, }); }, onClick(event) { const { name } = event.currentTarget.dataset; this.setData({ radio: name, }); },});APIRadioGroup Props参数说明类型默认值版本name在表单内提交时的标识符string--value当前选中项的标识符any--disabled是否禁用所有单选框booleanfalse- Radio Props参数说明类型默认值版本name标识符string--shape形状，可选值为 squarestringround-disabled是否为禁用状态booleanfalse-label-disabled是否禁用文本内容点击booleanfalse-label-position文本位置，可选值为 leftstringright-icon-size图标大小，默认单位为pxstring | number20px-checked-color选中状态颜色string#1989fa-use-icon-slot是否使用 icon 插槽booleanfalse- Radio Event事件名说明回调参数bind:change当绑定值变化时触发的事件当前选中项的 name Radio 外部样式类类名说明custom-class根节点样式类icon-class图标样式类label-class描述信息样式类 RadioGroup Event事件名说明回调参数bind:change当绑定值变化时触发的事件当前选中项的 name

【本文地址】

公司简介

联系我们