Tantalum UI

Appearance

Return to top
On this page

Radio/RadioGroup 单选项

vue
<template>
  <ta-group title="基础用法">
    <ta-cell label="默认">
      <ta-radio />
    </ta-cell>
    <ta-cell label="带文案">
      <ta-radio v-model:checked="value">勾选</ta-radio>
    </ta-cell>
    <ta-cell label="默认激活">
      <ta-radio checked>勾选</ta-radio>
    </ta-cell>
    <ta-cell label="自定义颜色">
      <ta-radio checked activeColor="#8b1721">勾选</ta-radio>
    </ta-cell>
    <ta-cell label="禁用">
      <ta-radio disabled>勾选</ta-radio>
    </ta-cell>
  </ta-group>
  <ta-group title="RadioGroup">
    <ta-cell label="默认">
      <ta-radio-group v-model="groupValue">
        <ta-radio v-for="item in options" :key="item.value" :checkedValue="item.value">
          {{ item.label }}
        </ta-radio>
      </ta-radio-group>
    </ta-cell>
    <ta-cell label="内联">
      <ta-radio-group inline v-model="groupValue" activeColor="#8b1721">
        <ta-radio v-for="item in options" :key="item.value" :checkedValue="item.value">
          {{ item.label }}
        </ta-radio>
      </ta-radio-group>
    </ta-cell>
    <ta-cell label="禁用">
      <ta-radio-group modelValue="man" disabled>
        <ta-radio v-for="item in options" :key="item.value" :checkedValue="item.value">
          {{ item.label }}
        </ta-radio>
      </ta-radio-group>
    </ta-cell>
    <ta-cell label="通过options设置">
      <ta-radio-group v-model="groupOptionValue" :options="options" />
    </ta-cell>
  </ta-group>
  <ta-group title="事件监听">
    <ta-cell label="change">
      <ta-radio-group @change="onChange" name="gender">
        <ta-radio v-for="item in options" :key="item.value" :checkedValue="item.value">
          {{ item.label }}
        </ta-radio>
      </ta-radio-group>
    </ta-cell>
  </ta-group>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { showToast } from '@/index'

export default defineComponent({
  name: 'ExpRadio',
  props: {},
  data() {
    return {
      value: false,
      groupValue: 'man',
      groupOptionValue: 'woman',
      options: [
        { value: 'man', label: '男' },
        { value: 'woman', label: '女' }
      ]
    }
  },
  methods: {
    onChange(value: string | number) {
      console.log('change', value)
      showToast(`Change Value: ${value}`)
    }
  }
})
</script>

Import

js
import { TaRadio, TaRadioGroup } from 'tantalum-ui-mobile'

具体的引入方式可以参考引入组件。

Import Type

组件导出的类型定义：

ts
import type { RadioOptionItem } from 'tantalum-ui-mobile'

Radio

Radio Props

属性类型默认值必填说明
v-model:checkedbooleanfalse否当前是否选中，可用来设置默认选中
checked-valuestring | number''否该项值，RadioGroup 的 change 事件会携带 radio 的 checkedValue
disabledbooleanfalse否是否禁用
active-colorstring否自定义激活态的图标颜色

Radio Events

事件名称描述回调函数参数
checked-change勾选发生改变时触发checked: boolean

Radio Slots

vue
<ta-radio>男</ta-radio>
<ta-radio>女</ta-radio>

RadioGroup

注：

  • 内部由多个 Radio 组成。
  • 支持表单，具体可参考 Form。

RadioGroup Props

属性类型默认值必填说明
v-modelstring | number''否当前选择子项的 value 值
namestring否标识
inlinebooleanfalse否是否使用内联布局，默认纵向布局
active-colorstring否自定义子项激活态的图标颜色
optionsRadioOptionItem[]否子项配置，优先级低于 slot 放入 Radio 组件

RadioOptionItem

key类型默认值必填说明
valuestring | number是值， 同 Radio 组件 value
labelstring是描述，同 Radio 组件 slot default

RadioGroup Events

事件描述回调函数参数
change选中项发生改变时触发value: string | number

RadioGroup Slots

#default

vue
<ta-radio-group>
  <ta-radio>男</ta-radio>
  <ta-radio>女</ta-radio>
</ta-radio-group>