| 1 |
- import{c as t,o,C as d}from"./vendor.ed841bd5.js";const e={class:"markdown-body"},a=d('<h1>Radio 单选按钮</h1><h3>介绍</h3><p>用于在一组备选项中进行单选</p><h3>安装</h3><pre><code class="language-ts">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</code></pre><h2>基本用法</h2><p>通过 <strong>v-model</strong> 绑定值当前选项的 <strong>label</strong> 。并且必须 <strong>nut-radiogroup</strong> 和 <strong>nut-radio</strong> 相结合进行使用</p><pre><code class="language-html"><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</code></pre><pre><code class="language-ts">setup() {\n return {\n radioVal:"1",\n };\n}\n</code></pre><h2>禁用选择</h2><pre><code class="language-html"><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</code></pre><pre><code class="language-ts">setup() {\n return {\n radioVal3:"1",\n };\n}\n</code></pre><h2>自定义尺寸</h2><pre><code class="language-html"><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</code></pre><pre><code class="language-ts">setup() {\n return {\n radioVal4:"1",\n };\n}\n</code></pre><h2>自定义图标</h2><p>建议 <code>icon-name</code> <code>icon-active-name</code> 一起修改</p><pre><code class="language-html"><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</code></pre><pre><code class="language-ts">setup() {\n return {\n radioVal5:"1",\n };\n}\n</code></pre><h2>触发 change 事件</h2><pre><code class="language-html"><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</code></pre><pre><code class="language-ts">setup() {\n const handleChange3 = (value: any) => {\n Toast.text(`您选中了${value}`);\n }\n return {\n radioVal6:"1",\n handleChange3\n };\n}\n</code></pre><h2>Prop</h2><h3>Radio</h3><table><thead><tr><th>字段</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>disabled</td><td>是否禁用选择</td><td>Boolean</td><td><code>false</code></td></tr><tr><td>icon-size</td><td><a href="#/icon">图标尺寸</a></td><td>String、Number</td><td><code>18</code></td></tr><tr><td>icon-name</td><td><a href="#/icon">图标名称</a>，选中前(建议和<code>icon-active-name</code>一起修改)</td><td>String</td><td><code>'check-normal'</code></td></tr><tr><td>icon-active-name</td><td><a href="#/icon">图标名称</a>，选中后(建议和<code>icon-name</code>一起修改)</td><td>String</td><td><code>'check-checked'</code></td></tr><tr><td>label</td><td>单选框标识</td><td>String、Number、Boolean</td><td>-</td></tr></tbody></table><h3>RadioGroup</h3><table><thead><tr><th>字段</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>v-model</td><td>当前选中项的标识符，与label值一致时呈选中状态</td><td>String、Number、Boolean</td><td>-</td></tr><tr><td>text-position</td><td>文本所在的位置，可选值：<code>left</code>,<code>right</code></td><td>String</td><td><code>right</code></td></tr></tbody></table><h2>RadioGroup Event</h2><table><thead><tr><th>字段</th><th>说明</th><th>回调参数</th></tr></thead><tbody><tr><td>change</td><td>值变化时触发</td><td>当前选中项值（label）【设置label后有值、默认为空】</td></tr></tbody></table>',29),n={expose:[],setup:d=>(d,n)=>(o(),t("div",e,[a]))};export default n;
|
