import{e as a,o as n,G as t}from"./vendor.js";const l={class:"markdown-body"},p=t(`

Radio \u5355\u9009\u6309\u94AE

\u4ECB\u7ECD

\u7528\u4E8E\u5728\u4E00\u7EC4\u5907\u9009\u9879\u4E2D\u8FDB\u884C\u5355\u9009

\u5B89\u88C5

import { createApp } from 'vue';
//vue
import { Radio,RadioGroup } from '@nutui/nutui';
//taro
import { Radio,RadioGroup } from '@nutui/nutui-taro';

const app = createApp();
app.use(Radio);
app.use(RadioGroup);

\u57FA\u672C\u7528\u6CD5

\u901A\u8FC7 v-model \u7ED1\u5B9A\u503C\u5F53\u524D\u9009\u9879\u7684 label \u3002\u5E76\u4E14\u5FC5\u987B nut-radiogroup \u548C nut-radio \u76F8\u7ED3\u5408\u8FDB\u884C\u4F7F\u7528

<nut-radiogroup v-model="radioVal">
  <nut-radio :label="1">\u5355\u9009\u68461</nut-radio>
  <nut-radio :label="2">\u5355\u9009\u68462</nut-radio>
</nut-radiogroup>

setup() {
  return {
    radioVal:"1",
  };
}

\u7981\u7528\u9009\u62E9

<nut-radiogroup v-model="radioVal3">
  <nut-radio :label="1" disabled>\u7981\u7528\u5355\u9009\u6846</nut-radio>
  <nut-radio :label="2" disabled>\u7981\u7528\u5355\u9009\u6846</nut-radio>
</nut-radiogroup>

setup() {
  return {
    radioVal3:"1",
  };
}

\u81EA\u5B9A\u4E49\u5C3A\u5BF8

<nut-radiogroup v-model="radioVal4">
  <nut-radio :label="1" icon-size="12">\u81EA\u5B9A\u4E49\u5C3A\u5BF812</nut-radio>
  <nut-radio :label="2" icon-size="12">\u81EA\u5B9A\u4E49\u5C3A\u5BF812</nut-radio>
</nut-radiogroup>

setup() {
  return {
    radioVal4:"1",
  };
}

\u81EA\u5B9A\u4E49\u56FE\u6807

\u5EFA\u8BAE icon-name icon-active-name \u4E00\u8D77\u4FEE\u6539

<nut-radiogroup v-model="radioVal5">
  <nut-radio :label="1" icon-name="checklist" icon-active-name="checklist">\u81EA\u5B9A\u4E49\u56FE\u6807</nut-radio>
  <nut-radio :label="2" icon-name="checklist" icon-active-name="checklist">\u81EA\u5B9A\u4E49\u56FE\u6807</nut-radio>
</nut-radiogroup>

setup() {
  return {
    radioVal5:"1",
  };
}

\u89E6\u53D1 change \u4E8B\u4EF6

<nut-radiogroup v-model="radioVal6" @change="handleChange3">
  <nut-radio :label="1" >\u89E6\u53D1\u4E8B\u4EF6</nut-radio>
  <nut-radio :label="2" >\u89E6\u53D1\u4E8B\u4EF6</nut-radio>
</nut-radiogroup>

setup() {
  const handleChange3 = (value: any) => {
    Toast.text(\`\u60A8\u9009\u4E2D\u4E86\${value}\`);
  }
  return {
    radioVal6:"1",
    handleChange3
  };
}

Prop

Radio

\u5B57\u6BB5	\u8BF4\u660E	\u7C7B\u578B	\u9ED8\u8BA4\u503C
disabled	\u662F\u5426\u7981\u7528\u9009\u62E9	Boolean	`false`
icon-size	\u56FE\u6807\u5C3A\u5BF8	String\u3001Number	`18`
icon-name	\u56FE\u6807\u540D\u79F0\uFF0C\u9009\u4E2D\u524D(\u5EFA\u8BAE\u548C`icon-active-name`\u4E00\u8D77\u4FEE\u6539)	String	`'check-normal'`
icon-active-name	\u56FE\u6807\u540D\u79F0\uFF0C\u9009\u4E2D\u540E(\u5EFA\u8BAE\u548C`icon-name`\u4E00\u8D77\u4FEE\u6539)	String	`'check-checked'`
label	\u5355\u9009\u6846\u6807\u8BC6	String\u3001Number\u3001Boolean	-

RadioGroup

\u5B57\u6BB5	\u8BF4\u660E	\u7C7B\u578B	\u9ED8\u8BA4\u503C
v-model	\u5F53\u524D\u9009\u4E2D\u9879\u7684\u6807\u8BC6\u7B26\uFF0C\u4E0Elabel\u503C\u4E00\u81F4\u65F6\u5448\u9009\u4E2D\u72B6\u6001	String\u3001Number\u3001Boolean	-
text-position	\u6587\u672C\u6240\u5728\u7684\u4F4D\u7F6E\uFF0C\u53EF\u9009\u503C\uFF1A`left`,`right`	String	`right`

RadioGroup Event

\u5B57\u6BB5	\u8BF4\u660E	\u56DE\u8C03\u53C2\u6570
change	\u503C\u53D8\u5316\u65F6\u89E6\u53D1	\u5F53\u524D\u9009\u4E2D\u9879\u503C\uFF08label\uFF09\u3010\u8BBE\u7F6Elabel\u540E\u6709\u503C\u3001\u9ED8\u8BA4\u4E3A\u7A7A\u3011

`,29),c=[p],j={setup(o,{expose:s}){return s({frontmatter:{}}),(r,h)=>(n(),a("div",l,c))}};export{j as default};