潮州网站建设,东莞网络营销代运营,wordpress 微信 支付宝,网盟官方网站目录
#平台差异说明
#基本使用
#自定义形状
#禁用radio
#是否禁止点击提示语选中复选框
#自定义颜色
#横向排列形式
#横向两端排列形式
API
#Radio Props
#radioGroup Props
#radio Event
#radioGroup Event 单选框用于有一个选择#xff0c;用户只能选择其中一个…
目录
#平台差异说明
#基本使用
#自定义形状
#禁用radio
#是否禁止点击提示语选中复选框
#自定义颜色
#横向排列形式
#横向两端排列形式
API
#Radio Props
#radioGroup Props
#radio Event
#radioGroup Event 单选框用于有一个选择用户只能选择其中一个的场景。
#平台差异说明
AppvueAppnvueH5小程序√√√√
#基本使用
该组件需要搭配radioGroup组件使用以便用户进行操作时获得当前单选框组的选中情况通过v-model给radioGroup组件绑定一个变量对应的name将会被选中
templateu-radio-groupv-modelradiovalue1placementcolumnchangegroupChangeu-radio:customStyle{marginBottom: 8px}v-for(item, index) in radiolist1:keyindex:labelitem.name:nameitem.namechangeradioChange/u-radio/u-radio-group
/templatescript
export default {data() {return {// 基本案列数据radiolist1: [{name: 苹果,disabled: false},{name: 香蕉,disabled: false},{name: 橙子,disabled: false}, {name: 榴莲,disabled: false}],// u-radio-group的v-model绑定的值如果设置为某个radio的name就会被默认选中radiovalue1: 苹果,};},methods: {groupChange(n) {console.log(groupChange, n);},radioChange(n) {console.log(radioChange, n);}}
};
/script#自定义形状
可以通过设置shape为square或者circle将单选框设置为方形或者圆形
u-radio-group v-modelvalueu-radio shapecircle label月明人倚楼/u-radio
/u-radio-group#禁用radio
设置disabled为true即可禁用某个组件让用户无法点击
u-radio-group v-modelvalueu-radio :disabledtrue label明月几时有/u-radio
/u-radio-group#是否禁止点击提示语选中复选框
设置labelDisabled为true即可禁止点击提示语选中复选框
u-radio-group v-modelvalueu-radio :labelDisabledtrue label明月几时有/u-radio
/u-radio-group#自定义颜色
此处所指的颜色为radio选中时的背景颜色参数为activeColor
u-radio-group v-modelvalueu-radio activeColorred label思悠悠恨悠悠恨到归时方始休/u-radio
/u-radio-group#横向排列形式
可以通过设置placement为row或者column将复选框设置为横向排列或者竖向排列
u-radio-group v-modelvalueplacementrowu-radio activeColorred label思悠悠恨悠悠恨到归时方始休/u-radio
/u-radio-group#横向两端排列形式
可以通过设置iconPlacement为left或者right将复选框勾选图标的对齐设置为左对齐或者右对齐
u-radio-group v-modelvalueiconPlacementrightu-radio activeColorred label思悠悠恨悠悠恨到归时方始休/u-radio
/u-radio-group
API
#Radio Props
注意radio和radio-group二者同名参数中radio的参数优先级更高。
参数说明类型默认值可选值namecheckbox的名称String \ Number--shape形状square为方形circle为圆型Stringsquarecircledisabled是否禁用Boolean--labelDisabled是否禁止点击提示语选中复选框String \ Boolean--activeColor选中状态下的颜色如设置此值将会覆盖parent的activeColor值String--inactiveColor未选中的颜色String--iconSize图标的大小单位pxString \ Number--labelSizelabel的字体大小px单位String \ Number--labellabel提示文字因为nvue下直接slot进来的文字由于特殊的结构无法修改样式String \ Number--size整体的大小String \ Number--iconColor图标颜色String--labelColorlabel的颜色String--
#radioGroup Props
参数说明类型默认值可选值value绑定的值String\Number\Boolean[]-disabled是否禁用全部checkboxBooleanfalsetrueshape形状circle-圆形square-方形StringcirclesquareactiveColor选中状态下的颜色如子Checkbox组件设置此值将会覆盖本值String#2979ff-inactiveColor未选中的颜色String#c8c9cc-name标识符String--size整个组件的尺寸默认pxString \ Number18-placement布局方式row-横向column-纵向Stringrowcolumnlabel文本String--labelColorlabel的字体颜色String#303133-labelSizelabel的字体大小px单位String \ Number14-labelDisabled是否禁止点击文本操作BooleanfalsetrueiconColor图标颜色String#ffffff-iconSize图标的大小单位pxString \ Number12-borderBottom竖向配列时是否显示下划线BooleanfalsetrueiconPlacement勾选图标的对齐方式left-左边right-右边Stringleftright
#radio Event
事件名说明回调参数版本change某个radio状态发生变化时触发(选中状态)name: 通过props传递的name参数-
#radioGroup Event
事件名说明回调参数版本change任一个radio状态发生变化时触发name: 值为radio通过props传递的name值-
