LimeUI+1.2.0

主题

LimeRadio 单选框 ​

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

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

文档链接 ​

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

安装方法 ​

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

代码演示 ​

基础演示 ​

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

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

选项组 ​

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

html
<!-- 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>
js
const checked = ref('Beijing');

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

禁用 ​

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

搭配单元格组件使用 ​

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

html
<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>

快速预览 ​

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

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

插件标签说明 ​

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

Vue2使用说明 ​

插件使用了composition-api，如果你希望在Vue2中使用，请按官方教程vue-composition-api配置。

关键代码是在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是否允许取消选中booleanfalse
checked是否选中booleanfalse
disabled是否为禁用态booleanfalse
readonly是否为只读booleanfalse
icon自定义选中图标和非选中图标，可选值：circle、line、dotstringcircle
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是否允许取消选中booleanfalse
disabled是否为禁用态booleanfalse
readonly是否为只读booleanfalse
direction排列方向，可选值为verticalstringhorizontal
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 变量，可用于自定义样式。

变量名称默认值描述
--l-radio-icon-size20px标准尺寸单选框图标大小
--l-radio-font-size16px标准尺寸文本字体大小
--l-radio-small-icon-size14px小尺寸单选框图标大小
--l-radio-small-font-size15px小尺寸文本字体大小
--l-radio-large-icon-size22px大尺寸单选框图标大小
--l-radio-large-font-size18px大尺寸文本字体大小
--l-radio-icon-border-width1px单选框边框宽度
--l-radio-icon-border-radius999px单选框圆角半径（圆形）
--l-radio-icon-bg-color$bg-color-container单选框背景色
--l-radio-icon-border-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选中状态颜色
--l-radio-text-color$text-color-1文本颜色
--l-radio-icon-text-gap$spacer-xs图标与文本间距

支持与赞赏 ​

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

支付宝赞助微信赞助

源代码 ​

组件源码