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

目录

#平台差异说明

#基本使用

#自定义形状

#禁用radio

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

#自定义颜色

#横向排列形式

#横向两端排列形式

API

#Radio Props

#radioGroup Props

#radio Event

#radioGroup Event

---

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

#平台差异说明

App（vue）	App（nvue）	H5	小程序
√	√	√	√

#基本使用

• 该组件需要搭配radioGroup组件使用，以便用户进行操作时，获得当前单选框组的选中情况
• 通过v-model给radioGroup组件绑定一个变量，对应的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>

#自定义形状

可以通过设置shape为square或者circle，将单选框设置为方形或者圆形

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

#禁用radio

设置disabled为true，即可禁用某个组件，让用户无法点击

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

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

设置labelDisabled为true，即可禁止点击提示语选中复选框

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

#横向排列形式

可以通过设置placement为row或者column，将复选框设置为横向排列或者竖向排列

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

#横向两端排列形式

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

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

API

#Radio Props

注意：radio和radio-group二者同名参数中，radio的参数优先级更高。

参数	说明	类型	默认值	可选值
name	checkbox的名称	String \ Number	-	-
shape	形状，square为方形，circle为圆型	String	square	circle
disabled	是否禁用	Boolean	-	-
labelDisabled	是否禁止点击提示语选中复选框	String \ Boolean	-	-
activeColor	选中状态下的颜色，如设置此值，将会覆盖parent的activeColor值	String	-	-
inactiveColor	未选中的颜色	String	-	-
iconSize	图标的大小，单位px	String \ Number	-	-
labelSize	label的字体大小，px单位	String \ Number	-	-
label	label提示文字，因为nvue下，直接slot进来的文字，由于特殊的结构，无法修改样式	String \ Number	-	-
size	整体的大小	String \ Number	-	-
iconColor	图标颜色	String	-	-
labelColor	label的颜色	String	-	-

#radioGroup Props

参数	说明	类型	默认值	可选值
value	绑定的值	String\Number\Boolean	[]	-
disabled	是否禁用全部checkbox	Boolean	false	true
shape	形状，circle-圆形，square-方形	String	circle	square
activeColor	选中状态下的颜色，如子Checkbox组件设置此值，将会覆盖本值	String	#2979ff	-
inactiveColor	未选中的颜色	String	#c8c9cc	-
name	标识符	String	-	-
size	整个组件的尺寸，默认px	String \ Number	18	-
placement	布局方式，row-横向，column-纵向	String	row	column
label	文本	String	-	-
labelColor	label的字体颜色	String	#303133	-
labelSize	label的字体大小，px单位	String \ Number	14	-
labelDisabled	是否禁止点击文本操作	Boolean	false	true
iconColor	图标颜色	String	#ffffff	-
iconSize	图标的大小，单位px	String \ Number	12	-
borderBottom	竖向配列时，是否显示下划线	Boolean	false	true
iconPlacement	勾选图标的对齐方式，left-左边，right-右边	String	left	right

#radio Event

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

#radioGroup Event

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