Home Explore Help
Sign In
githab
/
nutui
3
0
Fork 0
Files
Tree: f6b55df85f
Branches Tags
nutui
/
assets
/
doc.6ca88694.js

doc.6ca88694.js 3.9 KB
History Raw

1 
  1. import{c as t,o as e,B as c}from"./vendor.5724c378.js";const o={class:"markdown-body"},d=c('<h1>Checkbox 复选按钮</h1><h3>介绍</h3><p>多选按钮用于选择。</p><h3>安装</h3><pre><code class="language-ts">import { createApp } from &#39;vue&#39;;\nimport { Checkbox } from &#39;@nutui/nutui&#39;;\n\nconst app = createApp();\napp.use(Checkbox);\n</code></pre><h2>基本用法</h2><pre><code class="language-html">&lt;nut-checkbox v-model=&quot;checkbox1&quot; label=&quot;复选框&quot;&gt;&lt;span&gt;复选框&lt;/span&gt;&lt;/nut-checkbox&gt;\n&lt;nut-checkbox v-model=&quot;checkbox2&quot; text-position=&quot;left&quot;&gt;复选框&lt;/nut-checkbox&gt;\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">&lt;nut-checkbox v-model=&quot;checkbox3&quot; disabled&gt;未选时禁用状态&lt;/nut-checkbox&gt;\n&lt;nut-checkbox v-model=&quot;checkbox4&quot; disabled&gt;选中时禁用状态&lt;/nut-checkbox&gt;\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">&lt;nut-checkbox v-model=&quot;checkbox5&quot; icon-size=&quot;25&quot;&gt;自定义尺寸25&lt;/nut-checkbox&gt;\n&lt;nut-checkbox v-model=&quot;checkbox6&quot; icon-size=&quot;10&quot;&gt;自定义尺寸10&lt;/nut-checkbox&gt;\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">&lt;nut-checkbox v-model=&quot;checkbox7&quot; icon-name=&quot;checklist&quot; icon-active-name=&quot;checklist&quot;&gt;自定义图标&lt;/nut-checkbox&gt;\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">&lt;nut-checkbox v-model=&quot;checkbox8&quot; @change=&quot;changeBox3&quot;&gt;change复选框&lt;/nut-checkbox&gt;\n</code></pre><pre><code class="language-ts">setup() {\n  const checkbox = ref(false);\n  const changeBox3= (checked: boolean, label: string) =&gt; {\n    console.log(&#39;change事件触发&#39; + checked, label);\n\t}  \n  return {\n    checkbox,\n    changeBox3\n  };\n}\n</code></pre><h2>Prop</h2><table><thead><tr><th>字段</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>v-model</td><td>是否处于选中状态</td><td>String</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>&#39;check-normal&#39;</code></td></tr><tr><td>icon-active-name</td><td><a href="#/icon">图标名称</a>，选中后(建议和<code>icon-name</code>一起修改)</td><td>String</td><td><code>&#39;checked&#39;</code></td></tr><tr><td>label</td><td>复选框的文本内容</td><td>String</td><td>-</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>(state, label),<code>state</code>代表当前状态，<code>label</code>表示当前选中的值</td></tr></tbody></table>',26),n={expose:[],setup:c=>(c,n)=>(e(),t("div",o,[d]))};export default n;
    2.