搜索Ctrl K

深色模式

单选框 Radio ​

提示

需结合 pure-radio-group 使用。

插件市场地址 ​

https://ext.dcloud.net.cn/plugin?name=pure-radio

基础使用 ​

  • 通过 v-model 给 pure-radio-group 绑定选中的值。
  • 通过 value 给 pure-radio 绑定当前项的值。
  • 通过 v-model 给 pure-radio 绑定选中项的值（见下方提示）。
  • 通过 label 给 pure-radio 绑定当前项的文字。

提示

由于飞书小程序无法 inject 到 provide 的数据，所以，在飞书小程序中需要给每个单选框单独绑定 v-model，值为选中项的 value，如果需要异步切换，还需单独给单选框设置 async 属性，为了全端兼容，建议始终给单选框设置 v-model 和 async，v-model 和 async 设置为同 pure-radio-group 同属性绑定的值，设置后不影响可以使用 provide/inject 的其他端。

vue
<template>
<pure-radio-group v-model="checkedValue">
    <!-- 为了全端兼容，建议始终给单选框设置 v-model -->
    <pure-radio v-for="item in options" :key="item.value" :label="item.label" :value="item.value" v-model="checkedValue"></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 属性设置是否开启异步切换，通过 pure-radio-group 的 change 事件或 pure-radio 的 onClick 事件手动控制绑定的选中项的值，为了全端兼容，建议始终添加上 pure-radio 的 onClick 事件。

vue
<template>
<pure-radio-group v-model="checkedValue" @change="handleChange" async>
    <!-- 为了全端兼容，建议始终给单选框设置 v-model -->
    <pure-radio v-for="item in options" :key="item.value" :label="item.label" :value="item.value" v-model="checkedValue" async @onClick="handleChange"></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 handleChange(value) {
	uni.showModal({
		title: '提示',
		content: '是否确认切换选中项？',
		success: (res) => {
			if (res.confirm) {
				checkedValue.value = value;
			}
		}
	})
}
</script>

主题 ​

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

提示

使用辅助类时，如果项目设置了 mergeVirtualHostAttributes(合并小程序组件虚拟节点外层属性)，则可以直接把辅助类名添加到组件上，否则，需将辅助类名添加到外层元素上。

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

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

方形框 ​

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

提示

使用辅助类时，如果项目设置了 mergeVirtualHostAttributes(合并小程序组件虚拟节点外层属性)，则可以直接把辅助类名添加到组件上，否则，需将辅助类名添加到外层元素上。

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

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

浅化背景 ​

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

提示

使用辅助类时，如果项目设置了 mergeVirtualHostAttributes(合并小程序组件虚拟节点外层属性)，则可以直接把辅助类名添加到组件上，否则，需将辅助类名添加到外层元素上。

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

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

反转布局 ​

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

提示

使用辅助类时，如果项目设置了 mergeVirtualHostAttributes(合并小程序组件虚拟节点外层属性)，则可以直接把辅助类名添加到组件上，否则，需将辅助类名添加到外层元素上。

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

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

块级布局 ​

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

提示

使用辅助类时，如果项目设置了 mergeVirtualHostAttributes(合并小程序组件虚拟节点外层属性)，则可以直接把辅助类名添加到组件上，否则，需将辅助类名添加到外层元素上。

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

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

Props ​

pure-radio-group ​

属性名说明类型默认值可选值版本
v-model选中项的值[String, Number]""-+1.0.0
async是否开启异步控制Booleanfalsetrue+1.0.0

pure-radio ​

属性名说明类型默认值可选值版本
v-model选中项的值[String, Number]""-+1.0.0
async是否开启异步控制Booleanfalsetrue+1.0.0
value当前项的值[String, Number]undefined-+1.0.0
label显示文字String--+1.0.0
icon单选框图标String__gouxuan-+1.0.0

Event ​

pure-radio-group ​

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

pure-radio ​

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

Slots ​

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

样式变量 ​

pure-radio-group ​

变量名默认值版本
--pure-radio-group-displayflex+1.0.0
--pure-radio-group-flex-directionrow+1.0.0
--pure-radio-group-flex-wrapwrap+1.0.0
--pure-radio-group-gap10px+1.0.0
--pure-radio-group-background-+1.0.0
--pure-radio-group-font-size-+1.0.0
--pure-radio-group-padding-+1.0.0
--pure-radio-group-border-radius-+1.0.0

pure-radio ​

变量名默认值版本
--pure-radio-displayinline-flex+1.0.0
--pure-radio-flex-directionrow+1.0.0
--pure-radio-align-itemscenter+1.0.0
--pure-radio-justify-contentcenter+1.0.0
--pure-radio-gap4px+1.0.0
--pure-radio-font-size-+1.0.0
--pure-radio-line-height1+1.0.0
--pure-radio-width-+1.0.0
--pure-radio-transition-duration0.2s+1.0.0
--pure-radio-transition-timing-functionease-in-out+1.0.0
--pure-radio-box-size1.25em+1.0.0
--pure-radio-box-border-radius50%+1.0.0
--pure-radio-box-overflowhidden+1.0.0
--pure-radio-box-background-+1.0.0
--pure-radio-box-background-opacity1+1.0.0
--pure-radio-box-border-width2px+1.0.0
--pure-radio-box-border-stylesolid+1.0.0
--pure-radio-box-border-colorvar(--pure-theme-info)+1.0.0
--pure-radio-icon-font-size-+1.0.0
--pure-radio-icon-color#ffffff+1.0.0
--pure-radio-box-checked-backgroundvar(--pure-radio-theme, var(--pure-theme-primary))+1.0.0
--pure-radio-box-checked-border-colorvar(--pure-radio-theme, var(--pure-theme-primary))+1.0.0

基于 MIT 许可发布

版权所有 © 2024-2029 济南晨霜信息技术有限公司