Radio 单选框

在一组备选项中进行单选

基础用法

由于选项默认可见，不宜过多，若选项过多，建议使用 Select 选择器。

备选项备选项

<template>
  <s-radio v-model="radio" value="1">备选项</s-radio>
  <s-radio v-model="radio" value="2">备选项</s-radio>
</template>

<script setup>
import SRadio from '@/components/Radio'
import { ref } from 'vue'
const radio = ref('1')
</script>

<style lang="scss" scoped></style>

禁用状态

单选框不可用的状态。

备选项备选项

<template>
  <s-radio disabled v-model="radio" value="1">备选项</s-radio>
  <s-radio disabled v-model="radio" value="2">备选项</s-radio>
</template>

<script setup>
import SRadio from '@/components/Radio'
import { ref } from 'vue'
const radio = ref('1')
</script>

<style lang="scss" scoped></style>

单选框组

适用于在多个互斥的选项中选择的场景

备选项备选项备选项

<template>
  <s-radio-group v-model="radio">
    <s-radio value="1">备选项</s-radio>
    <s-radio value="2">备选项</s-radio>
    <s-radio value="3">备选项</s-radio>
  </s-radio-group>
</template>

<script setup>
import SRadio, { SRadioGroup} from '@/components/Radio'
import { ref } from 'vue'
const radio = ref('1')
</script>

<style lang="scss" scoped></style>

按钮样式

按钮样式的单选组合。

<template>
  <div>
    <s-radio-group v-model="radio1">
      <s-radio-button value="上海"></s-radio-button>
      <s-radio-button value="北京"></s-radio-button>
      <s-radio-button value="广州"></s-radio-button>
      <s-radio-button value="深圳"></s-radio-button>
    </s-radio-group>
  </div>
  <div style="margin-top: 20px">
    <s-radio-group v-model="radio2" size="medium">
      <s-radio-button value="上海" ></s-radio-button>
      <s-radio-button value="北京"></s-radio-button>
      <s-radio-button value="广州"></s-radio-button>
      <s-radio-button value="深圳"></s-radio-button>
    </s-radio-group>
  </div>
  <div style="margin-top: 20px">
    <s-radio-group v-model="radio3" size="small">
      <s-radio-button value="上海"></s-radio-button>
      <s-radio-button value="北京" disabled ></s-radio-button>
      <s-radio-button value="广州"></s-radio-button>
      <s-radio-button value="深圳"></s-radio-button>
    </s-radio-group>
  </div>
  <div style="margin-top: 20px">
    <s-radio-group v-model="radio4" disabled size="mini">
      <s-radio-button value="上海"></s-radio-button>
      <s-radio-button value="北京"></s-radio-button>
      <s-radio-button value="广州"></s-radio-button>
      <s-radio-button value="深圳"></s-radio-button>
    </s-radio-group>
  </div>
</template>

<script setup>
import{ SRadioGroup,SRadioButton} from '@/components/Radio'
import { ref } from 'vue'
const radio1 = ref('上海')
const radio2 = ref('上海')
const radio3 = ref('上海')
const radio4= ref('上海')
</script>

<style lang="scss" scoped></style>

带有边框

设置border属性可以渲染为带有边框的单选框。

备选项1备选项2

备选项1备选项2

备选项1备选项2

备选项1备选项2

<template>
  <div>
    <s-radio v-model="radio1" value="1" border>备选项1</s-radio>
    <s-radio v-model="radio1" value="2" border>备选项2</s-radio>
  </div>
  <div style="margin-top: 20px">
    <s-radio v-model="radio2" value="1" border size="medium">备选项1</s-radio>
    <s-radio v-model="radio2" value="2" border size="medium">备选项2</s-radio>
  </div>
  <div style="margin-top: 20px">
    <s-radio-group v-model="radio3" size="small">
      <s-radio value="1" border>备选项1</s-radio>
      <s-radio value="2" border disabled>备选项2</s-radio>
    </s-radio-group>
  </div>
  <div style="margin-top: 20px">
    <s-radio-group v-model="radio4" size="mini" disabled>
      <s-radio value="1" border>备选项1</s-radio>
      <s-radio value="2" border>备选项2</s-radio>
    </s-radio-group>
  </div>
</template>

<script setup>
import SRadio, { SRadioGroup} from '@/components/Radio'
import { ref } from 'vue'
const radio1 = ref('1')
const radio2 = ref('1')
const radio3 = ref('1')
const radio4 = ref('1')
</script>

<style lang="scss" scoped></style>

API

Radio Attributes

参数	说明	类型	可选值	默认值
value/ v-model	选中状态的值	string / number / boolean	—	—
label	选项的标识符	string	—	—
disabled	是否禁用	boolean	—	false
border	是否显示边框	boolean	—	false
size	单选框的尺寸	string	medium / small / mini	—
name	原生 name 属性	string	—	—
checked	当前是否选中	boolean	—	false

Radio Events

事件名称	说明	回调参数
input	绑定值变化时触发的事件	选中的 Radio label 值

Radio-group Attributes

参数	说明	类型	可选值	默认值
value/ v-model	选中项的绑定值	string / number / boolean	—	—
size	单选框的尺寸	string	medium / small / mini	—
disabled	是否禁用	boolean	—	false
text-color	按钮形式的 Radio 激活时的文本颜色	string	—	#ffffff
fill	按钮形式的 Radio 激活时的填充色和边框色	string	—	#409EFF

Radio-group Events

事件名称	说明	回调参数
input	绑定值变化时触发的事件	选中的 Radio label 值

Radio-button Attributes

参数	说明	类型	可选值	默认值
label	Radio 的 value	string	—	—
disabled	是否禁用	boolean	—	false
name	原生 name 属性	string	—	—