更新记录

0.0.1（2024-12-11） 下载此版本

• init

平台兼容性

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

RadioGroup Props

Events

Radio Slots

主题定制

样式变量

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

打赏

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