contract-front/uni_modules/lime-radio/readme.md

# lime-radio 单选框
- 在一组备选项中进行单选。

## 安装
在插件市场导入即可，首次导入可能需要重新编译

## 代码演示
### 基础演示
通过`allowUncheck`可设置单个是否允许取消选中
```html
<l-radio allowUncheck>单选框</l-radio>
```

### 选项组
通过 v-model 绑定值当前选中项的 `value`或`name`,vue2使用的`value`被占用，故可以使用`name`。
```html
<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>
```
```js
const checked = ref('Beijing');
```

### 禁用
通过 `disabled` 属性禁止选项切换，在 Radio 上设置 `disabled` 可以禁用单个选项。
```html
<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`，单选框形状分别对应线勾和圆点形。
```html
<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` 属性设置选中状态的图标颜色。
```html
<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` 属性可以自定义图标的大小。
```html
<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 判断是否为选中状态。
```html
<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](https://uniapp.dcloud.net.cn/tutorial/vue-composition-api.html)配置
- 关键代码是: 在main.js中 在vue2部分加上这一段即可.

```js
// 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` |
| icon | 自定义选中图标和非选中图标可选值`'circle' | 'line' | 'dot'` | _string_ | `circle` |
| label | 主文案 | _string_ | `` |
| fontSize | 文本大小 | _string_ | `` |
| iconSize | 图标大小 | _string_ | `` |
| checkedColor | 选中状态颜色 | _string_ | `` |
| iconBgColor | 图标背景颜色 | _string_ | `` |
| iconBorderColor | 图标描边颜色 | _string_ | `` |
| iconDisabledColor | 图标禁用颜色 | _string_ | `` |
| iconDisabledBgColor | 图标禁用背景颜色 | _string_ | `` |

### RadioGroup Props

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| v-model | 标识符，通常为一个唯一的字符串或数字 | _string\|number_ | - |
| name | 标识符，通常为一个唯一的字符串或数字 | _string\|number_ | - |
| value | 单选按钮的值 | _any_ | - |
| allowUncheck | 是否允许取消选中 | _boolean_ | `false` |
| disabled | 是否为禁用态 | _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_ | -    |


## 打赏

如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。  
![](https://testingcf.jsdelivr.net/gh/liangei/image@1.9/alipay.png)
![](https://testingcf.jsdelivr.net/gh/liangei/image@1.9/wpay.png)