radio | uni-app-x

# radio

组件类型：UniRadioElement

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

# 兼容性

Web	Android	iOS
4.0	3.9	4.11

# 属性

名称

类型

默认值

兼容性

描述

disabled

boolean

false

是否禁用

value

string

<radio/> 标识。当该radio 选中时，radio-group的 change 事件会携带radio的value

checked

boolean

false

<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选中时的边框颜色

foreColor

string(string.ColorString)

"#ffffff"

radio的图标颜色

~~iconColor~~

string(string.ColorString)

"#ffffff"

radio的图标颜色 (使用foreColor替代)

~~color~~

string(string.ColorString)

"#007AFF"

radio的颜色 (使用foreColor替代)

# 示例

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 id="trigger-change" 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 recommand" 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>