ui-form-radio+单选框组件

版本：v2.3.11

单选框组件用于在表单中提供单选项的选择，支持单个单选框和单选框组两种使用方式，支持自定义样式和禁用状态。

基本使用

单个单选框

<template>
  <div class="form-radio-demo">
    <ui-form-radio v-model="checkedValue" value="1" label="选项1" />
    <ui-form-radio v-model="checkedValue" value="2" label="选项2" />
    <p>当前选中：{{ checkedValue }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const checkedValue = ref('1');
</script>

<style scoped>
.form-radio-demo {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
</style>

单选框组

<template>
  <div class="form-radio-group-demo">
    <ui-form-radio-group v-model="checkedValue">
      <ui-form-radio value="1" label="选项1" />
      <ui-form-radio value="2" label="选项2" />
      <ui-form-radio value="3" label="选项3" />
    </ui-form-radio-group>
    <p>当前选中：{{ checkedValue }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const checkedValue = ref('1');
</script>

<style scoped>
.form-radio-group-demo {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
</style>

单个单选框 Props

参数	类型	默认值	说明
modelValue	String/Number/Boolean	-	当前选中的值
value	String/Number/Boolean	-	单选框的值
label	String/Number	-	单选框标签文本
disabled	Boolean	false	是否禁用
shape	String	'circle'	单选框形状，可选值：circle、square
size	String	'medium'	单选框大小，可选值：small、medium、large

单个单选框 Events

事件名	说明	回调参数
change	选中值变化时触发	(value: String/Number/Boolean) 当前选中的值

单选框组 Props

参数	类型	默认值	说明
modelValue	String/Number/Boolean	-	当前选中的值
disabled	Boolean	false	是否禁用所有单选框
direction	String	'vertical'	单选框排列方向，可选值：vertical、horizontal

单选框组 Events

事件名	说明	回调参数
change	选中值变化时触发	(value: String/Number/Boolean) 当前选中的值

示例

水平排列的单选框组

<template>
  <div class="form-radio-group-horizontal-demo">
    <ui-form-radio-group v-model="checkedValue" direction="horizontal">
      <ui-form-radio value="1" label="选项1" />
      <ui-form-radio value="2" label="选项2" />
      <ui-form-radio value="3" label="选项3" />
    </ui-form-radio-group>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const checkedValue = ref('1');
</script>

<style scoped>
.form-radio-group-horizontal-demo {
  padding: 20px;
}
</style>

禁用状态

<template>
  <div class="form-radio-disabled-demo">
    <!-- 单个禁用 -->
    <ui-form-radio v-model="checkedValue" value="1" label="选项1" disabled />
    <ui-form-radio v-model="checkedValue" value="2" label="选项2" />
    
    <!-- 组禁用 -->
    <ui-form-radio-group v-model="checkedValue2" disabled>
      <ui-form-radio value="1" label="选项1" />
      <ui-form-radio value="2" label="选项2" />
    </ui-form-radio-group>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const checkedValue = ref('2');
const checkedValue2 = ref('1');
</script>

<style scoped>
.form-radio-disabled-demo {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
</style>

不同形状的单选框

<template>
  <div class="form-radio-shape-demo">
    <ui-form-radio v-model="checkedValue" value="1" label="圆形单选框" shape="circle" />
    <ui-form-radio v-model="checkedValue" value="2" label="方形单选框" shape="square" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
const checkedValue = ref('1');
</script>

<style scoped>
.form-radio-shape-demo {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
</style>

在线演示

扫码或点击链接在手机上查看完整演示

https://shadow-ui3-demo.nooko.cn/#/pages/form/form-radio/form-radio

在线演示

扫码或点击链接在手机上查看完整演示

https://shadow-ui3-demo.nooko.cn/#/pages/form/form-radio-group/form-radio-group