更新记录

1.0（2025-08-13） 下载此版本

上传组件

平台兼容性

uni-app(4.07)

使用说明

插件功能介绍

1.自定义radio组件。
2.可自定义颜色，大小。
3.可取消选中状态，当该组件嵌套在radio-group组件中时，不支持取消选中。

属性

事件（Events）

自定义样式

使用样例

<view class="content">
  <view class="item">
    <text>自定义主题：</text>
    <nRadio v-model="radioValue" :name="1" style="--n-radio-color: green;">男</nRadio>
    <nRadio v-model="radioValue" :name="2" style="--n-radio-color: rgba(135, 14, 155, .75);;margin-left: 12px;">女</nRadio>
    <nRadio v-model="radioValue" :name="3" style="--n-radio-color: rgba(35, 49, 155, .5);margin-left: 12px;">未知</nRadio>
  </view>
  <view class="item">
    <text>自定义大小：</text>
    <nRadio v-model="radioValue" :name="1" style="--n-radio-size: 1em; --n-radio-color: green;">男</nRadio>
    <nRadio v-model="radioValue" :name="2" style="--n-radio-size: 1.4em; --n-radio-color: red;margin-left: 12px;">女</nRadio>
    <nRadio v-model="radioValue" :name="3" style="--n-radio-size: 20px; --n-radio-color: rgba(35, 49, 155, .5);margin-left: 12px;">未知</nRadio>
  </view>
  <view class="item">
    <text>禁用：</text>
    <nRadio :modelValue="1" :name="1" :disabled="true" style="--n-radio-size: 1em;">男</nRadio>
    <nRadio :modelValue="1" :name="2" :disabled="true" style="--n-radio-size: 1em;margin-left: 12px;">女</nRadio>
    <nRadio :modelValue="1" :name="3" :disabled="true" style="--n-radio-size: 1em;margin-left: 12px;">未知</nRadio>
  </view>
  <radio-group @change="change">
    <view v-for="i in 5">
      <nRadio :modelValue="radioValue" :name="i" :canCancel="i != 3" :disabled="i == 1" :isRadioGroup="true" style="--n-radio-size: 16px;">圣诞节{{i}}</nRadio>
    </view>
  </radio-group>
</view>

import nRadio from '../../uni_modules/components/n-radio/n-radio.vue';

change(val) {
  this.radioValue = val.detail.value * 1;
},

.content {
  padding: 12px;
  .item {
    margin-bottom: 12px;
    display: flex;
    flex-direction: row;
    align-items: center;
  }
}