LimeRadio 单选框

• 在一组备选项中进行单选。

文档

radio

安装

导入即可，首次导入可能需要重新编译

代码演示

基础演示

通过allowUncheck可设置单个是否允许取消选中

<l-radio allowUncheck>单选框</l-radio>

选项组

通过 v-model 绑定值当前选中项的 value或name,vue2使用的value被占用，故可以使用name。

<l-radio-group v-model="checked" @change="onChange">
	<l-radio value="Beijing" label="北京" />
	<l-radio value="Shanghai" label="上海" />
	<l-radio value="Guangzhou" label="广州" />
	<l-radio value="Shenzen" label="深圳" />
</l-radio-group>
<!-- vue2使用的`value`被占用，故可以使用`name` -->
<l-radio-group v-model="checked" @change="onChange">
	<l-radio name="Beijing" label="北京" />
	<l-radio name="Shanghai" label="上海" />
	<l-radio name="Guangzhou" label="广州" />
	<l-radio name="Shenzen" label="深圳" />
</l-radio-group>

const checked = ref('Beijing');

禁用

通过 disabled 属性禁止选项切换，在 Radio 上设置 disabled 可以禁用单个选项。

<l-radio-group v-model="checked" disabled>
	<l-radio value="Beijing" label="北京" />
	<l-radio value="Shanghai" label="上海" />
	<l-radio value="Guangzhou" label="广州" />
	<l-radio value="Shenzen" label="深圳" />
</l-radio-group>

样式

icon 属性可选值为 line 和 dot，单选框形状分别对应线勾和圆点形。

<l-radio-group icon="dot">
	<l-radio value="Beijing" label="北京" />
	<l-radio value="Guangzhou" label="广州" />
	<l-radio value="Shenzen" label="深圳" />
</l-radio-group>
<l-radio-group icon="line">
	<l-radio value="Beijing" label="北京" />
	<l-radio value="Guangzhou" label="广州" />
	<l-radio value="Shenzen" label="深圳" />
</l-radio-group>

自定义颜色

通过 checked-color 属性设置选中状态的图标颜色。

<l-radio-group checked-color="#ee0a24">
	<l-radio value="Beijing" label="北京" />
	<l-radio value="Guangzhou" label="广州" />
	<l-radio value="Shenzen" label="深圳" />
</l-radio-group>

自定义大小

通过 icon-size 属性可以自定义图标的大小。

<l-radio-group>
	<l-radio icon-size="44px" value="Beijing" label="北京" />
	<l-radio icon-size="34px" value="Guangzhou" label="广州" />
	<l-radio icon-size="24px" value="Shenzen" label="深圳" />
</l-radio-group>

自定义图标

通过 icon 插槽自定义图标，并通过 slotProps 判断是否为选中状态。

<l-radio-group>
	<l-radio value="Beijing" label="北京">
		<template #icon="{checked}">
			<image v-show="checked" style="width:20px; height:20px" src="https://fastly.jsdelivr.net/npm/@vant/assets/user-active.png"></image>
			<image v-show="!checked" style="width:20px; height:20px" src="https://fastly.jsdelivr.net/npm/@vant/assets/user-inactive.png"></image>
		</template>
	</l-radio>
	<l-radio value="Guangzhou" label="广州">
		<template #icon="{checked}">
			<image v-show="checked" style="width:20px; height:20px" src="https://fastly.jsdelivr.net/npm/@vant/assets/user-active.png"></image>
			<image v-show="!checked" style="width:20px; height:20px" src="https://fastly.jsdelivr.net/npm/@vant/assets/user-inactive.png"></image>
		</template>
	</l-radio>
	<l-radio value="Shenzen" label="深圳">
		<template #icon="{checked}">
			<image v-show="checked" style="width:20px; height:20px" src="https://fastly.jsdelivr.net/npm/@vant/assets/user-active.png"></image>
			<image v-show="!checked" style="width:20px; height:20px" src="https://fastly.jsdelivr.net/npm/@vant/assets/user-inactive.png"></image>
		</template>
	</l-radio>
</l-radio-group>

插件标签

• 默认 l-radio 为 component
• 默认 lime-radio 为 demo

关于vue2的使用方式

• 插件使用了composition-api, 如果你希望在vue2中使用请按官方的教程vue-composition-api配置
• 关键代码是: 在main.js中 在vue2部分加上这一段即可.

// vue2
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

API

Radio Props

参数	说明	类型	默认值
name	标识符，通常为一个唯一的字符串或数字	string|number	-
value	单选按钮的值	any	-
allowUncheck	是否允许取消选中	boolean	false
checked	是否选中	boolean	false
disabled	是否为禁用态	boolean	false
readonly	是否为只读	boolean	false
icon	自定义选中图标和非选中图标可选值`'circle'	'line'	'dot'`
label	主文案	string	``
fontSize	文本大小	string	``
iconSize	图标大小	string	``
checkedColor	选中状态颜色	string	``
iconBgColor	图标背景颜色	string	``
iconBorderColor	图标描边颜色	string	``
iconDisabledColor	图标禁用颜色	string	``
iconDisabledBgColor	图标禁用背景颜色	string	``
labelStyle	文本样式	string|object	``

RadioGroup Props

参数	说明	类型	默认值
v-model	标识符，通常为一个唯一的字符串或数字	string|number	-
name	标识符，通常为一个唯一的字符串或数字	string|number	-
value	单选按钮的值	any	-
allowUncheck	是否允许取消选中	boolean	false
disabled	是否为禁用态	boolean	false
readonly	是否为只读	boolean	false
direction	排列方向，可选值为vertical	string	horizontal
fontSize	文本大小	string	``
iconSize	图标大小	string	``
checkedColor	选中状态颜色	string	``
iconBgColor	图标背景颜色	string	``
iconBorderColor	图标描边颜色	string	``
iconDisabledColor	图标禁用颜色	string	``
iconDisabledBgColor	图标禁用背景颜色	string	``

Events

事件名	说明	回调参数
change	当绑定值变化时触发的事件	currentValue: any

Radio Slots

插槽名	说明	回调参数
default	自定义文本	-
radio	整体	{ checked: boolean, disabled: boolean }
icon	自定义图标	{ checked: boolean, disabled: boolean }

主题定制

样式变量

组件提供了下列 CSS 变量，可用于自定义样式，uvue app无效。

名称	默认值	描述
--l-radio-icon-size	40rpx	-
--l-radio-font-size	32rpx	-
--l-radio-icon-bg-color	white	-
--l-radio-border-icon-color	$gray-5	-
--l-radio-icon-disabled-color	$gray-5	-
--l-radio-icon-disabled-bg-color	$gray-1	-
--l-radio-icon-checked-color	$primary-color	-

打赏

如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。

源代码

组件源码