更新记录

0.1.9（2025-09-08） 下载此版本

• chore: 更新注释

0.1.8（2025-09-08） 下载此版本

• fix: 修复uniapp鸿蒙缺少勾

0.1.7（2025-06-10） 下载此版本

• fix: 修复由hbx4.71更新导致用户下载的目录问题

平台兼容性

uni-app(4.56)

uni-app x(4.62)

lime-radio 单选框

一个功能丰富的单选框组件，用于在一组备选项中进行单选。组件支持v-model双向数据绑定，提供多种自定义样式选项，包括不同形状、颜色和大小的单选框。组件支持单独使用和组合使用，可以搭配单元格组件使用，兼容uniapp/uniappx。

插件依赖：lime-style、lime-shared

文档链接

📚 组件详细文档请访问以下站点：

• 单选框文档 - 站点1
• 单选框文档 - 站点2
• 单选框文档 - 站点3

安装方法

1. 在uni-app插件市场中搜索并导入lime-radio
2. 首次导入可能需要重新编译
3. 在页面中使用l-radio和l-radio-group组件

代码演示

基础演示

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

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

选项组

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

<!-- Vue3使用value属性 -->
<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使用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');

const onChange = (value: any) => {
  console.log('onChange', value);
};

禁用

通过 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>

搭配单元格组件使用

搭配单元格组件使用时，需要再引入 lime-cell 组件。并且 radio-group 的 direction设置vertical让内容垂直布局。

<l-radio-group v-model="checked" direction="vertical">
  <l-cell-group inset>
    <l-cell title="单选框 1" @click="checked = '1'">
      <template #rightIcon>
        <l-radio value="1" />
      </template>
    </l-cell>
    <l-cell title="单选框 2" @click="checked = '2'">
      <template #rightIcon>
        <l-radio value="2" />
      </template>
    </l-cell>
  </l-cell-group>
</l-radio-group>

快速预览

导入插件后，可以直接使用以下标签查看演示效果：

<!-- 代码位于 uni_modules/lime-radio/components/lime-radio -->
<lime-radio />

插件标签说明

• 默认 l-radio 为组件标签
• 默认 lime-radio 为演示标签

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

RadioGroup Props

Events

Radio Slots

主题定制

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

支持与赞赏

如果你觉得本插件解决了你的问题，可以考虑支持作者：

支付宝赞助	微信赞助