单选框 Radio

提示

需结合 pure-radio-group 使用。

兼容性

• 兼容：✅
• 不兼容：❌
• 未知：❔

H5	安卓	苹果	微信	支付宝	百度	抖音	QQ	快手	飞书	京东
✅	✅	✅	✅	✅	✅	✅	✅	✅	✅	✅

小红书	鸿蒙	360	华为快应用	快应用联盟
✅	❔	❔	❔	❔

插件市场地址

DCloud 插件市场地址

基础使用

• 通过 v-model 给 pure-radio-group 绑定选中的值。
• 通过 value 给 pure-radio 绑定当前项的值。
• 通过 label 给 pure-radio 绑定当前项的文字。

<template>
    <pure-radio-group v-model="checkedValue">
        <pure-radio v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></pure-radio>
    </pure-radio-group>
</template>

<script setup>
import { ref } from "vue";

// 选项列表
const options = [
	{ label: "橘子", value: 1 },
	{ label: "苹果", value: 2 },
	{ label: "香蕉", value: 3 },
	{ label: "西瓜", value: 4 },
	{ label: "草莓", value: 5 },
	{ label: "葡萄", value: 6 },
	{ label: "哈密瓜", value: 7 },
	{ label: "榴莲", value: 8 },
	{ label: "芒果", value: 9 },
	{ label: "柠檬", value: 10 },
	{ label: "柚子", value: 11 },
	{ label: "葡萄", value: 12 },
];

// 选中值
const checkedValue = ref(1);
</script>

异步切换

• 通过 async 属性设置是否开启异步切换。
• 通过 @asyncChange 事件手动控制绑定的选中项的值。

<template>
    <pure-radio-group v-model="checkedValue" async @asyncChange="handleAsyncChange">
        <pure-radio v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></pure-radio>
    </pure-radio-group>
</template>

<script setup>
import { ref } from "vue";

// 选项列表
const options = [
	{ label: "橘子", value: 1 },
	{ label: "苹果", value: 2 },
	{ label: "香蕉", value: 3 },
	{ label: "西瓜", value: 4 },
	{ label: "草莓", value: 5 },
	{ label: "葡萄", value: 6 },
	{ label: "哈密瓜", value: 7 },
	{ label: "榴莲", value: 8 },
	{ label: "芒果", value: 9 },
	{ label: "柠檬", value: 10 },
	{ label: "柚子", value: 11 },
	{ label: "葡萄", value: 12 },
];

// 选中值
const checkedValue = ref(1);

// 异步切换
function handleAsyncChange(value) {
	uni.showModal({
		title: '提示',
		content: '是否确认切换选中项？',
		success: (res) => {
			if (res.confirm) {
				checkedValue.value = value;
			}
		}
	})
}
</script>

主题

• 通过添加对应的辅助类实现。

提示

辅助类使用规则

<template>
    <!-- 给同组所有单选框设置 -->
    <pure-radio-group class="pure-radio-primary" v-model="checkedValue">
        <pure-radio label="橘子" :value="1"></pure-radio>
    </pure-radio-group>

    <!-- 给单独的单选框设置 -->
    <pure-radio label="橘子" :value="1" class="pure-radio-primary"></pure-radio>
    <pure-radio label="橘子" :value="1" class="pure-radio-success"></pure-radio>
    <pure-radio label="橘子" :value="1" class="pure-radio-danger"></pure-radio>
    <pure-radio label="橘子" :value="1" class="pure-radio-warning"></pure-radio>
    <pure-radio label="橘子" :value="1" class="pure-radio-info"></pure-radio>
</template>

禁用

• 给 pure-radio 添加 disabled 属性。

<template>
    <!-- 给同组所有单选框设置 -->
    <pure-radio-group class="pure-radio-primary" v-model="checkedValue">
        <pure-radio label="橘子" :value="1" disabled></pure-radio>
    </pure-radio-group>
</template>

方形框

• 添加辅助类名 pure-radio-square 即可使用。

提示

辅助类使用规则

<template>
    <!-- 给同组所有单选框设置 -->
    <pure-radio-group class="pure-radio-square" v-model="checkedValue">
        <pure-radio label="橘子" :value="1"></pure-radio>
    </pure-radio-group>

    <!-- 给单独的单选框设置 -->
    <pure-radio label="橘子" :value="1" class="pure-radio-square"></pure-radio>
</template>

浅化背景

• 添加辅助类名 pure-radio-light 即可使用。

提示

辅助类使用规则

<template>
    <!-- 给同组所有单选框设置 -->
    <pure-radio-group class="pure-radio-light" v-model="checkedValue">
        <pure-radio label="橘子" :value="1"></pure-radio>
    </pure-radio-group>

    <!-- 给单独的单选框设置 -->
    <pure-radio label="橘子" :value="1" class="pure-radio-light"></pure-radio>
</template>

反转布局

• 添加辅助类名 pure-radio-reversal 即可使用。默认布局是图标在左，文字在右边，反转布局是图标在右，文字在左边。

提示

辅助类使用规则

<template>
    <!-- 给同组所有单选框设置 -->
    <pure-radio-group class="pure-radio-reversal" v-model="checkedValue">
        <pure-radio label="橘子" :value="1"></pure-radio>
    </pure-radio-group>

    <!-- 给单独的单选框设置 -->
    <pure-radio label="橘子" :value="1" class="pure-radio-reversal"></pure-radio>
</template>

块级布局

• 添加辅助类名 pure-radio-block 即可使用。此时组件宽度为 100%。
• 使用块级布局后，因为默认文字左对齐，可能还需要添加 pure-text-right，让文字右对齐，具体看个人需要。

提示

辅助类使用规则

<template>
    <!-- 给同组所有单选框设置 -->
    <pure-radio-group class="pure-radio-block" v-model="checkedValue">
        <pure-radio label="橘子" :value="1"></pure-radio>
    </pure-radio-group>

    <!-- 给单独的单选框设置 -->
    <pure-radio label="橘子" :value="1" class="pure-radio-block pure-text-right"></pure-radio>
</template>

Props

pure-radio-group

属性名	说明	类型	默认值	可选值	版本
v-model	选中项的值	[String, Number]	""	-	+1.0.0
async	是否开启异步控制	Boolean	false	true	+1.0.0
disabledClass	组内所有单选框禁用类名	String	pure-disabled	-	+1.0.0

pure-radio

属性名	说明	类型	默认值	可选值	版本
value	当前项的值	[String, Number]	undefined	-	+1.0.0
label	显示文字	String	-	-	+1.0.0
icon	单选框图标	String	__gouxuan	-	+1.0.0
disabled	禁用状态	Boolean	false	true	+1.0.0
disabledClass	禁用类名	String	-	-	+1.0.0

Event

pure-radio-group

事件名	说明	回调参数	版本
change	切换事件	value: 被点击的单选框的值	+1.0.0
asyncChange	异步切换事件	value: 被点击的单选框的值	+1.0.0

pure-radio

事件名	说明	回调参数	版本
onClick	单选框项点击事件	value: 被点击的单选框的值	+1.0.0

Slots

名称	说明	参数	版本
default	文本、文字	-	+1.0.0