import{c as t,o,C as d}from"./vendor.ed841bd5.js";const e={class:"markdown-body"},a=d('

Radio 单选按钮

介绍

用于在一组备选项中进行单选

安装

import { createApp } from 'vue';\n//vue\nimport { Radio } from '@nutui/nutui';\n//mp\nimport { Radio } from '@nutui/nutui@taro';\n\nconst app = createApp();\napp.use(Radio);\n

基本用法

通过 v-model 绑定值当前选项的 label 。并且必须 nut-radiogroup 和 nut-radio 相结合进行使用

<nut-radiogroup v-model="radioVal">\n  <nut-radio :label="1">单选框1</nut-radio>\n  <nut-radio :label="2">单选框2</nut-radio>\n</nut-radiogroup>\n
setup() {\n  return {\n    radioVal:"1",\n  };\n}\n

禁用选择

<nut-radiogroup v-model="radioVal3">\n  <nut-radio :label="1" disabled>禁用单选框</nut-radio>\n  <nut-radio :label="2" disabled>禁用单选框</nut-radio>\n</nut-radiogroup>\n
setup() {\n  return {\n    radioVal3:"1",\n  };\n}\n

自定义尺寸

<nut-radiogroup v-model="radioVal4">\n  <nut-radio :label="1" icon-size="12">自定义尺寸12</nut-radio>\n  <nut-radio :label="2" icon-size="12">自定义尺寸12</nut-radio>\n</nut-radiogroup>\n
setup() {\n  return {\n    radioVal4:"1",\n  };\n}\n

自定义图标

建议 icon-name icon-active-name 一起修改

<nut-radiogroup v-model="radioVal5">\n  <nut-radio :label="1" icon-name="checklist" icon-active-name="checklist">自定义图标</nut-radio>\n  <nut-radio :label="2" icon-name="checklist" icon-active-name="checklist">自定义图标</nut-radio>\n</nut-radiogroup>\n
setup() {\n  return {\n    radioVal5:"1",\n  };\n}\n

触发 change 事件

<nut-radiogroup v-model="radioVal6" @change="handleChange3">\n  <nut-radio :label="1" >触发事件</nut-radio>\n  <nut-radio :label="2" >触发事件</nut-radio>\n</nut-radiogroup>\n
setup() {\n  const handleChange3 = (value: any) => {\n    Toast.text(`您选中了${value}`);\n  }\n  return {\n    radioVal6:"1",\n    handleChange3\n  };\n}\n

Prop

Radio

字段说明类型默认值
disabled是否禁用选择Booleanfalse
icon-size图标尺寸String、Number18
icon-name图标名称，选中前(建议和icon-active-name一起修改)String'check-normal'
icon-active-name图标名称，选中后(建议和icon-name一起修改)String'check-checked'
label单选框标识String、Number、Boolean-

RadioGroup

字段说明类型默认值
v-model当前选中项的标识符，与label值一致时呈选中状态String、Number、Boolean-
text-position文本所在的位置，可选值：left,rightStringright

RadioGroup Event

字段说明回调参数
change值变化时触发当前选中项值（label）【设置label后有值、默认为空】
',29),n={expose:[],setup:d=>(d,n)=>(o(),t("div",e,[a]))};export default n;