radio-group

radio-group 兼容性

属性

事件

UniRadioGroupChangeEvent

展示全部

# radio-group

组件类型：UniRadioGroupElement

单选组，内部由多个 radio 组成

# radio-group 兼容性

Android	iOS	web
3.9	4.11	4.0

# 属性

名称	类型	默认值	描述
name	string	-	表单的控件名称，作为键值对的一部分与表单(form组件)一同提交
@change	(event: UniRadioGroupChangeEvent) => void	-	radio-group 中的选中项发生变化时触发 change 事件，event.detail = {value: 选中项radio的value}

# 事件

# UniRadioGroupChangeEvent

# UniRadioGroupChangeEvent 的属性值

名称

类型

必填

默认值

描述

detail

UniRadioGroupChangeEventDetail

是

名称	类型	必备	默认值	描述
value	string	是	-	-

bubbles

boolean

是

是否冒泡

cancelable

boolean

是

是否可以取消

type

string

是

事件类型

target

UniElement | null

否

UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。

currentTarget

UniElement | null

否

UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。

timeStamp

number

是

事件发生时的时间戳

# UniRadioGroupChangeEvent 的方法

名称	类型	必填	默认值	描述
stopPropagation	() => void	是	-	阻止当前事件的进一步传播
preventDefault	() => void	是	-	阻止当前事件的默认行为

# radio-group 属性兼容性

	Android	iOS	web
name	3.9	4.11	4.0
@change	3.9	4.11	4.0

# 子组件

radio

# 参见

# radio

组件类型：UniRadioElement

单选项。在1组radio-group中只能选中1个

# radio 兼容性

Android	iOS	web
3.9	4.11	4.0

# 属性

名称	类型	默认值	描述
disabled	boolean	false	是否禁用
value	string	-	<radio/> 标识。当该radio 选中时，radio-group的 change 事件会携带radio的value
checked	boolean	false	<radio/> 当前是否选中
color	string(string.ColorString)	"#007AFF"	radio的颜色
backgroundColor	string(string.ColorString)	"#ffffff"	radio默认的背景颜色
borderColor	string(string.ColorString)	"#d1d1d1"	radio默认的边框颜色
activeBackgroundColor	string(string.ColorString)	"#007AFF"	radio选中时的背景颜色，优先级大于color属性
activeBorderColor	string(string.ColorString)	""	radio选中时的边框颜色
iconColor	string(string.ColorString)	"#ffffff"	radio的图标颜色

# radio 属性兼容性

	Android	iOS	web
disabled	3.9	4.11	4.0
value	3.9	4.11	4.0
checked	3.9	4.11	4.0
color	3.9	4.11	4.0
backgroundColor	3.9	4.11	4.0
borderColor	3.9	4.11	4.0
activeBackgroundColor	3.9	4.11	4.0
activeBorderColor	3.9	4.11	4.0
iconColor	3.9	4.11	4.0

# 示例

hello uni-app x

Template

Script



<template>
  <view class="main">
    <radio :disabled="disabled_boolean" :checked="checked_boolean" :color="color_input"
      :backgroundColor="backgroundColor_input" :borderColor="borderColor_input"
      :activeBackgroundColor="activeBackgroundColor_input" :activeBorderColor="activeBorderColor_input"
      :iconColor="iconColor_input" @click="radio_click" @touchstart="radio_touchstart" @touchmove="radio_touchmove"
      @touchcancel="radio_touchcancel" @touchend="radio_touchend" @tap="radio_tap" @longpress="radio_longpress">
      <text>uni-app-x</text>
    </radio>
  </view>

  <scroll-view style="flex: 1">
    <view class="content">
      <page-head title="组件属性"></page-head>
      <boolean-data :defaultValue="false" title="<radio/> 当前是否选中" @change="change_checked_boolean"></boolean-data>
      <boolean-data :defaultValue="false" title="是否禁用" @change="change_disabled_boolean"></boolean-data>
      <input-data defaultValue="#007AFF" title="radio的颜色" type="text" @confirm="confirm_color_input"></input-data>
      <input-data defaultValue="#ffffff" title="radio默认的背景颜色" type="text"
        @confirm="confirm_backgroundColor_input"></input-data>
      <input-data defaultValue="#d1d1d1" title="radio默认的边框颜色" type="text"
        @confirm="confirm_borderColor_input"></input-data>
      <input-data defaultValue="#007AFF" title="radio选中时的背景颜色，优先级大于color属性" type="text"
        @confirm="confirm_activeBackgroundColor_input"></input-data>
      <input-data defaultValue="" title="radio选中时的边框颜色" type="text"
        @confirm="confirm_activeBorderColor_input"></input-data>
      <input-data defaultValue="#ffffff" title="radio的图标颜色" type="text" @confirm="confirm_iconColor_input"></input-data>
    </view>

    <view>
      <page-head title="默认及使用"></page-head>
      <view class="uni-padding-wrap">
        <view class="uni-title uni-common-mt">
          <text class="uni-title-text"> 默认样式 </text>
        </view>
        <radio-group class="uni-flex uni-row radio-group" @change="testChange" style="flex-wrap: wrap">
          <radio value="r" :checked="checked" :color="color" style="margin-right: 15px" class="radio r">选中
          </radio>
          <radio value="r1" style="margin-right: 15px" class="radio r1">{{
            text
          }}</radio>
          <radio value="r2" :disabled="disabled" class="radio r2">禁用</radio>
          <radio value="r3" class="radio r3" style="margin-top: 10px">{{
            wrapText
          }}</radio>
        </radio-group>
      </view>

      <view class="uni-padding-wrap">
        <view class="uni-title uni-common-mt">
          <text class="uni-title-text"> 不同颜色和尺寸的radio </text>
        </view>
        <radio-group class="uni-flex uni-row radio-group">
          <radio value="r1" :checked="true" color="#FFCC33" style="transform: scale(0.7); margin-right: 15px"
            class="radio">选中
          </radio>
          <radio value="r2" color="#FFCC33" style="transform: scale(0.7)" class="radio">未选中</radio>
        </radio-group>
      </view>

      <view class="uni-padding-wrap">
        <view class="uni-title uni-common-mt">
          <text class="uni-title-text"> 推荐展示样式 </text>
        </view>
      </view>
      <view class="uni-list uni-common-pl">
        <radio-group @change="radioChange" class="radio-group">
          <radio class="uni-list-cell uni-list-cell-pd radio" v-for="(item, index) in items" :key="item.value"
            :class="index < items.length - 1 ? 'uni-list-cell-line' : ''" :value="item.value"
            :checked="index === current">
            {{ item.name }}
          </radio>
        </radio-group>
      </view>
    </view>
  </scroll-view>
</template>

<style>
  .main {
    max-height: 250px;
    padding: 5px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    flex-direction: row;
    justify-content: center;
  }

  .main .list-item {
    width: 100%;
    height: 100px;
    border: 1px solid #666;
  }

  .uni-list-cell {
    justify-content: flex-start;
  }
</style>