Ued-Plus

Appearance

Radio 单选框 ​

在一组备选项中进行单选

基础用法 ​

单选框不应该有太多的可选项， 如果你有很多的可选项你应该使用选择框而不是单选框。

要使用 Radio 组件，只需要设置v-model绑定变量， 选中意味着变量的值为相应 Radio value属性的值， value可以是String、Number 或 Boolean。

显示代码
vue
<template>
	<div class="radio-content">
		<div class="radio-basic-single">
			<ued-radio v-model="radioBasic" :value="1" label="radio1" />
			<ued-radio v-model="radioBasic" :value="2">radio2</ued-radio>
		</div>
		<div class="radio-basic-group">
			<ued-radio-group v-model="radioGroupBasic">
				<ued-radio :value="1" label="radio1" />
				<ued-radio :value="2" label="radio2" />
			</ued-radio-group>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const radioBasic = ref(1)
const radioGroupBasic = ref(1)
</script>

带有边框 ​

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

可以给radio单独设置属性，也可以给radio-group设置，此时radio的 border 属性无效

显示代码
vue
<template>
	<div class="radio-content">
		<div class="radio-border-group">
			<ued-radio-group v-model="border">
				<ued-radio border :value="1" label="radio1" />
				<ued-radio :value="2" label="radio2" />
			</ued-radio-group>
		</div>
		<div class="radio-border-group">
			<ued-radio-group v-model="borderGroup" border>
				<ued-radio :value="1" label="radio1" />
				<ued-radio :value="2" label="radio2" />
			</ued-radio-group>
		</div>
		<div class="radio-border-group">
			<ued-radio-group v-model="borderGroupDisabled" border disabled>
				<ued-radio :value="1" label="radio1" />
				<ued-radio :value="2" label="radio2" />
			</ued-radio-group>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const border = ref(1)
const borderGroup = ref(1)
const borderGroupDisabled = ref(1)
</script>

按钮样式 ​

你可以让单选框看起来像一个按钮一样。

只需要把 ued-radio 元素换成 ued-radio-button 元素即可

如果需要改变按钮选中时的背景色和字体颜色，可以在 radio-group 分别设置 fill 和 text-color 属性

显示代码
vue
<template>
	<div class="radio-content">
		<div class="radio-button-basic">
			<ued-radio-button v-model="button" value="button1" />
			<ued-radio-button v-model="button" value="button2" />
			<ued-radio-button v-model="button" value="button3" />
		</div>
		<div class="radio-group-basic">
			<ued-radio-group v-model="buttonGroup">
				<ued-radio-button value="button1" />
				<ued-radio-button value="button2" />
				<ued-radio-button value="button3" />
			</ued-radio-group>
		</div>
		<div class="radio-size-basic">
			<ued-radio-group v-model="large" size="large">
				<ued-radio-button value="button1" />
				<ued-radio-button value="button2" />
				<ued-radio-button value="button3" />
			</ued-radio-group>
		</div>
		<div class="radio-size-basic">
			<ued-radio-group v-model="small" size="small">
				<ued-radio-button value="button1" />
				<ued-radio-button value="button2" />
				<ued-radio-button value="button3" />
			</ued-radio-group>
		</div>
		<div class="radio-size-basic">
			<ued-radio-group
				v-model="style"
				fill="#67c23a"
				text-color="rgba(0, 0, 0, 1)"
			>
				<ued-radio-button value="button1" />
				<ued-radio-button value="button2" />
				<ued-radio-button value="button3" />
			</ued-radio-group>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const button = ref('button1')
const buttonGroup = ref('button1')
const large = ref('button1')
const small = ref('button1')
const style = ref('button1')
</script>

禁用状态 ​

disabled 属性可以用来控制单选框的禁用状态。

你只需要为单选框设置 disabled 属性就能控制其禁用状态。

可以单独给radio设置，也可以给radio-group设置

显示代码
vue
<template>
	<div class="radio-content">
		<div class="radio-disabled-group">
			<ued-radio-group v-model="disabled" disabled>
				<ued-radio :value="1" label="radio1" />
				<ued-radio :value="2" label="radio2" />
			</ued-radio-group>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const disabled = ref(1)
</script>

大小尺寸 ​

设置 size 属性可以控制大小尺寸，可选值: large、default、small

可以单独给 radio 设置，也可以给 radio-group设置

显示代码
vue
<template>
	<div class="radio-content">
		<div class="radio-size-group">
			<ued-radio-group v-model="largeRadio" size="large">
				<ued-radio :value="1" label="radio1" />
				<ued-radio :value="2" label="radio2" />
			</ued-radio-group>
		</div>
		<div class="radio-size-group">
			<ued-radio-group v-model="defaultRadio">
				<ued-radio :value="1" label="radio1" />
				<ued-radio :value="2" label="radio2" />
			</ued-radio-group>
		</div>
		<div class="radio-size-group">
			<ued-radio-group v-model="smallRadio">
				<ued-radio :value="1" label="radio1" size="small" />
				<ued-radio :value="2" label="radio2" size="small" />
			</ued-radio-group>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const largeRadio = ref(1)
const defaultRadio = ref(1)
const smallRadio = ref(1)
</script>

Radio API ​

属性 ​

属性名说明类型默认值
model-value/v-model选中项绑定值string/number/boolean-
value单选框的值，无label时，value同时为labelstring/number/boolean-
label单选框的 labelstring/number/boolean-
disabled是否禁用单选框booleanfalse
border是否显示边框booleanfalse
size单选框的尺寸large/default/small-
name原始 name 属性string-

事件 ​

事件名说明类型
change绑定值变化时触发的事件(value: string | number | boolean) => void

插槽 ​

插槽名说明
default自定义默认内容

RadioGroup API ​

属性 ​

属性名说明类型默认值
model-value/v-model选中项绑定值string/number/boolean-
disabled是否禁用单选框booleanfalse
border是否显示边框booleanfalse
size单选框的尺寸large/default/small-
name原始 name 属性string-
id原始 id 属性string-
text-color按钮形式的 Radio 激活时的文本颜色string#ffffff
fill按钮形式的 Radio 激活时的填充色和边框色string#409eff

事件 ​

事件名说明类型
change绑定值变化时触发的事件(value: string | number | boolean) => void

插槽 ​

插槽名说明子标签
default自定义默认内容Radio / RadioButton

RadioButton API ​

属性 ​

属性名说明类型默认值
model-value/v-model选中项绑定值string/number/boolean-
value单选框的值，无label时，value同时为labelstring/number/boolean-
label单选框的 labelstring/number/boolean-
disabled是否禁用单选框booleanfalse
size单选框的尺寸large/default/small-
name原始 name 属性string-

事件 ​

事件名说明类型
change绑定值变化时触发的事件(value: string | number | boolean) => void

插槽 ​

插槽名说明
default自定义默认内容