| 1 |
- import{c as t,o as e,C as o}from"./vendor.0d0a34e4.js";const c={class:"markdown-body"},n=o('<h1>Checkbox 复选按钮</h1><h3>介绍</h3><p>多选按钮用于选择。</p><h3>安装</h3><pre><code class="language-ts">import { createApp } from 'vue';\n// vue\nimport { Checkbox } from '@nutui/nutui';\n// taro\nimport { Checkbox } from '@nutui/nutui-taro';\n\nconst app = createApp();\napp.use(Checkbox);\n</code></pre><h2>基本用法</h2><pre><code class="language-html"><nut-checkbox v-model="checkbox1" label="复选框">复选框</nut-checkbox>\n<nut-checkbox v-model="checkbox2" text-position="left">复选框</nut-checkbox>\n</code></pre><pre><code class="language-ts">setup() {\n return {\n checkbox1: false,\n checkbox2: false,\n };\n}\n</code></pre><h2>禁用状态</h2><pre><code class="language-html"><nut-checkbox v-model="checkbox3" disabled>未选时禁用状态</nut-checkbox>\n<nut-checkbox v-model="checkbox4" disabled>选中时禁用状态</nut-checkbox>\n</code></pre><pre><code class="language-ts">setup() {\n return {\n checkbox3: false,\n checkbox4: true,\n };\n}\n</code></pre><h2>自定义尺寸</h2><pre><code class="language-html"><nut-checkbox v-model="checkbox5" icon-size="25">自定义尺寸25</nut-checkbox>\n<nut-checkbox v-model="checkbox6" icon-size="10">自定义尺寸10</nut-checkbox>\n</code></pre><pre><code class="language-ts">setup() {\n return {\n checkbox5: true,\n checkbox6: false,\n };\n}\n\n</code></pre><h2>自定义图标</h2><p>这里建议同时设置 <code>icon-name</code> 和 <code>icon-active-name</code> 属性</p><pre><code class="language-html"><nut-checkbox v-model="checkbox7" icon-name="checklist" icon-active-name="checklist">自定义图标</nut-checkbox>\n</code></pre><pre><code class="language-ts">setup() {\n return {\n checkbox7: true,\n };\n}\n\n</code></pre><h2>change事件</h2><p>值发生变化时，将触发change事件</p><pre><code class="language-html"><nut-checkbox v-model="checkbox8" @change="changeBox3">change复选框</nut-checkbox>\n</code></pre><pre><code class="language-ts">setup() {\n const checkbox = ref(false);\n const changeBox3= (checked: boolean, label: string) => {\n console.log('change事件触发' + checked, label);\n\t} \n return {\n checkbox,\n changeBox3\n };\n}\n</code></pre><h2>checkboxGroup使用</h2><pre><code class="language-html"><nut-checkboxgroup v-model="checkboxgroup1">\n <nut-checkbox v-model="checkbox9" label="1">组合复选框</nut-checkbox>\n <nut-checkbox v-model="checkbox10" label="2">组合复选框</nut-checkbox>\n <nut-checkbox v-model="checkbox11" label="3">组合复选框</nut-checkbox>\n <nut-checkbox v-model="checkbox12" label="4">组合复选框</nut-checkbox>\n</nut-checkboxgroup>\n</code></pre><pre><code class="language-ts">setup() {\n return {\n checkbox9: false,\n checkbox10: false,\n checkbox11: false,\n checkbox12: false,\n checkboxgroup1: ['2', '3'],\n };\n}\n</code></pre><h2>checkboxGroup 全选/取消</h2><pre><code class="language-html"><nut-checkboxgroup v-model="checkboxgroup3" ref="group" @change="changeBox4">\n <nut-checkbox v-model="checkbox15" label="1">组合复选框</nut-checkbox>\n <nut-checkbox v-model="checkbox16" label="2">组合复选框</nut-checkbox>\n</nut-checkboxgroup>\n<span class="btn">\n <nut-button type="primary" @click="toggleAll(true)">全选</nut-button>\n <nut-button type="primary" @click="toggleAll(false)">取消</nut-button>\n</span>\n</code></pre><pre><code class="language-ts">setup() {\n const group = ref(null);\n const changeBox4 = (label: any[]) => {\n Toast.text(`${label.length ? '全选' : '取消全选'}`);\n };\n\n const toggleAll = (f: boolean) => {\n (group.value as any).toggleAll(f);\n };\n return {\n checkbox15: false,\n checkbox16: false,\n changeBox4: false,\n checkbox12: false,\n checkboxgroup3: ['2'],\n group,\n changeBox4,\n toggleAll\n };\n}\n</code></pre><h2>Checkbox</h2><table><thead><tr><th>字段</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>v-model</td><td>是否处于选中状态</td><td>Boolean</td><td><code>false</code></td></tr><tr><td>disabled</td><td>是否禁用选择</td><td>Boolean</td><td><code>false</code></td></tr><tr><td>text-position</td><td>文本所在的位置，可选值：<code>left</code>,<code>right</code></td><td>String</td><td><code>right</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>'checked'</code></td></tr><tr><td>label</td><td>复选框的文本内容</td><td>String</td><td>-</td></tr></tbody></table><h2>CheckboxGroup</h2><table><thead><tr><th>字段</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>v-model</td><td>当前选中项的标识符，和 <code>label</code> 相对应</td><td>String</td><td>-</td></tr><tr><td>disabled</td><td>是否禁用选择,将用于其下的全部复选框</td><td>Boolean</td><td><code>false</code></td></tr></tbody></table><h2>Checkbox Event</h2><table><thead><tr><th>字段</th><th>说明</th><th>回调参数</th></tr></thead><tbody><tr><td>change</td><td>值变化时触发</td><td>(state, label),<code>state</code>代表当前状态，<code>label</code>表示当前选中的值</td></tr></tbody></table><h2>CheckboxGroup Event</h2><table><thead><tr><th>字段</th><th>说明</th><th>回调参数</th></tr></thead><tbody><tr><td>change</td><td>值变化时触发</td><td>label,<code>label</code>返回一个数组，表示当前选中项的集合</td></tr></tbody></table>',36),d={setup:o=>(o,d)=>(e(),t("div",c,[n]))};export default d;
|
