uniapp中组件库的Radio 单选框丰富的使用方法

发布时间:2024年01月03日

目录

#平台差异说明

#基本使用

#自定义形状

#禁用radio

#是否禁止点击提示语选中复选框

#自定义颜色

#横向排列形式

#横向两端排列形式

API

#Radio Props

#radioGroup Props

#radio Event

#radioGroup Event


单选框用于有一个选择,用户只能选择其中一个的场景。

#平台差异说明

App(vue)App(nvue)H5小程序

#基本使用

  • 该组件需要搭配radioGroup组件使用,以便用户进行操作时,获得当前单选框组的选中情况
  • 通过v-modelradioGroup组件绑定一个变量,对应的name将会被选中
<template>
  <u-radio-group
    v-model="radiovalue1"
    placement="column"
    @change="groupChange"
  >
    <u-radio
      :customStyle="{marginBottom: '8px'}"
      v-for="(item, index) in radiolist1"
      :key="index"
      :label="item.name"
      :name="item.name"
      @change="radioChange"
    >
    </u-radio>
  </u-radio-group>
</template>

<script>
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>

#自定义形状

可以通过设置shapesquare或者circle,将单选框设置为方形或者圆形

<u-radio-group v-model="value">
	<u-radio shape="circle" label="月明人倚楼"></u-radio>
</u-radio-group>

#禁用radio

设置disabledtrue,即可禁用某个组件,让用户无法点击

<u-radio-group v-model="value">
	<u-radio :disabled="true" label="明月几时有"></u-radio>
</u-radio-group>

#是否禁止点击提示语选中复选框

设置labelDisabledtrue,即可禁止点击提示语选中复选框

<u-radio-group v-model="value">
	<u-radio :labelDisabled="true" label="明月几时有"></u-radio>
</u-radio-group>

#自定义颜色

此处所指的颜色,为radio选中时的背景颜色,参数为activeColor

<u-radio-group v-model="value">
	<u-radio activeColor="red" label="思悠悠,恨悠悠,恨到归时方始休"></u-radio>
</u-radio-group>

#横向排列形式

可以通过设置placementrow或者column,将复选框设置为横向排列或者竖向排列

<u-radio-group 
    v-model="value"
    placement="row">
	<u-radio activeColor="red" label="思悠悠,恨悠悠,恨到归时方始休"></u-radio>
</u-radio-group>

#横向两端排列形式

可以通过设置iconPlacementleft或者right,将复选框勾选图标的对齐设置为左对齐或者右对齐

<u-radio-group 
    v-model="value"
    iconPlacement="right">
	<u-radio activeColor="red" label="思悠悠,恨悠悠,恨到归时方始休"></u-radio>
</u-radio-group>

API

#Radio Props

注意:radioradio-group二者同名参数中,radio的参数优先级更高。

参数说明类型默认值可选值
namecheckbox的名称String \ Number--
shape形状,square为方形,circle为圆型Stringsquarecircle
disabled是否禁用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是否禁用全部checkboxBooleanfalsetrue
shape形状,circle-圆形,square-方形Stringcirclesquare
activeColor选中状态下的颜色,如子Checkbox组件设置此值,将会覆盖本值String#2979ff-
inactiveColor未选中的颜色String#c8c9cc-
name标识符String--
size整个组件的尺寸,默认pxString \ Number18-
placement布局方式,row-横向,column-纵向Stringrowcolumn
label文本String--
labelColorlabel的字体颜色String#303133-
labelSizelabel的字体大小,px单位String \ Number14-
labelDisabled是否禁止点击文本操作Booleanfalsetrue
iconColor图标颜色String#ffffff-
iconSize图标的大小,单位pxString \ Number12-
borderBottom竖向配列时,是否显示下划线Booleanfalsetrue
iconPlacement勾选图标的对齐方式,left-左边,right-右边Stringleftright

#radio Event

事件名说明回调参数版本
change某个radio状态发生变化时触发(选中状态)name: 通过props传递的name参数-

#radioGroup Event

事件名说明回调参数版本
change任一个radio状态发生变化时触发name: 值为radio通过props传递的name-

文章来源:https://blog.csdn.net/m0_72603435/article/details/135368820
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。