| 1 |
- import{c as t,o,A as a}from"./vendor.80bf15c7.js";const d={class:"markdown-body"},l=a('<h1>Radio 单选按钮</h1><h2>Radio 基本用法</h2><p>通过 <strong>v-model</strong> 绑定值当前选中项的 <strong>label</strong> ，二者一致时 <strong>Radio</strong> 选中。</p><pre><code class="language-html"><nut-radio v-model:value="radioVal" :label="b">备选项1</nut-radio>\n</code></pre><pre><code class="language-javascript">setup() {\n return {\n radioVal:"a",\n };\n}\n</code></pre><h2>组合使用 Radio</h2><pre><code class="language-html"><nut-radio v-model:value="radioVal" :label="1">备选项1</nut-radio>\n<nut-radio v-model:value="radioVal" :label="2">备选项2</nut-radio>\n</code></pre><pre><code class="language-javascript">setup() {\n return {\n radioVal:"2",\n };\n}\n</code></pre><h2>RadioGroup基本用法</h2><pre><code class="language-html"><nut-radiogroup v-model:value="radioGroupVal">\n <nut-radio label="a">备选项1</nut-radio>\n <nut-radio label="b">备选项2</nut-radio>\n</nut-radiogroup>\n</code></pre><pre><code class="language-javascript">setup() {\n return {\n radioGroupVal:"b",\n };\n}\n</code></pre><h2>Radio 禁用</h2><p>通过给 <strong>disabled</strong> 传布尔值 <strong>false</strong> ，可将组件禁用</p><pre><code class="language-html"><nut-radio :disabled="true" label="禁用">备选项1</nut-radio>\n</code></pre><h2>RadioGroup 整体禁用</h2><pre><code class="language-html"><nut-radiogroup v-model:value="radioGroupVal" :animated="false">\n <nut-radio label="a">备选项1</nut-radio>\n <nut-radio label="b">备选项2</nut-radio>\n <nut-radio label="c">备选项3</nut-radio>\n</nut-radiogroup>\n</code></pre><pre><code class="language-javascript">setup() {\n return {\n radioGroupVal:"c",\n };\n}\n</code></pre><h2>Radio 自定义尺寸</h2><p>内置 <strong>small</strong>，<strong>base</strong>，<strong>large</strong> 三种规格供使用。</p><pre><code class="language-html"><nut-radio size="small">小号</nut-radio>\n<nut-radio size="base">默认</nut-radio>\n<nut-radio size="large">大号</nut-radio>\n</code></pre><h2>RadioGroup整体定义尺寸</h2><p>内置 <strong>small</strong>，<strong>base</strong>，<strong>large</strong> 三种规格供使用。</p><pre><code class="language-html"><nut-radiogroup v-model:value="radioGroupVal" size="large">\n <nut-radio label="1">备选项1</nut-radio>\n <nut-radio label="2">备选项2</nut-radio>\n <nut-radio label="3">备选项3</nut-radio>\n</nut-radiogroup>\n</code></pre><pre><code class="language-javascript">setup() {\n return {\n radioGroupVal:"2",\n };\n}\n</code></pre><h2>禁用动效</h2><p>通过给 <strong>animated</strong> 传布尔值 <strong>false</strong> ，禁用自带动效</p><pre><code class="language-html"><nut-radio :animated="false" v-model:value="radioVal" label="a">备选项1</nut-radio>\n<nut-radio :animated="false" v-model:value="radioVal" label="b">备选项2</nut-radio>\n</code></pre><pre><code class="language-javascript">setup() {\n return {\n radioVal: 'b',\n };\n}\n</code></pre><h2>RadioGroup 禁用动效</h2><pre><code class="language-html"><nut-radiogroup v-model:value="radioGroupVal" :animated="false">\n <nut-radio label="a">备选项1</nut-radio>\n <nut-radio label="b">备选项2</nut-radio>\n <nut-radio label="c">备选项3</nut-radio>\n</nut-radiogroup>\n</code></pre><pre><code class="language-javascript">setup() {\n return {\n radioGroupVal: 'c',\n };\n}\n</code></pre><h2>新增自定义class</h2><pre><code class="language-html"><nut-radio class="my-radio">备选项</nut-radio>\n</code></pre><p><strong>RadioGroup</strong> 也支持新增自定义class</p><h2>Prop</h2><h3>Radio</h3><table><thead><tr><th>字段</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>v-model:value</td><td>当前选中项的标识符，与label值一致时呈选中状态</td><td>任意类型</td><td>-</td></tr><tr><td>label</td><td>标识符，与v-model值一致时呈选中状态</td><td>任意类型</td><td>-</td></tr><tr><td>size</td><td>尺寸，可选值small/base/large</td><td>String</td><td>base</td></tr><tr><td>disabled</td><td>是否禁用</td><td>Boolean</td><td>false</td></tr><tr><td>animated</td><td>是否需要动效</td><td>Boolean</td><td>true</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:value</td><td>当前选中项的标识符，与label值一致时呈选中状态</td><td>String、Number、Boolean</td><td>-</td></tr><tr><td>size</td><td>尺寸，可选值small/base/large</td><td>String</td><td><code>base</code></td></tr><tr><td>disabled</td><td>是否禁用</td><td>Boolean</td><td><code>false</code></td></tr><tr><td>animated</td><td>是否需要动效</td><td>Boolean</td><td><code>true</code></td></tr></tbody></table><h2>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>',41),e={expose:[],setup:a=>(a,e)=>(o(),t("div",d,[l]))};export default e;
|
