| 1 |
- import{c as t,o as e,A as d}from"./vendor.80bf15c7.js";const n={class:"markdown-body"},h=d('<h1>switch组件</h1><h3>介绍</h3><p>用来打开或关闭选项。</p><h3>安装</h3><pre><code class="language-javascript">import { createApp } from 'vue';\nimport { Switch } from '@nutui/nutui';\n\nconst app = createApp();\napp.use(Switch);\n\n</code></pre><h2>代码演示</h2><h3>基础用法</h3><pre><code class="language-html"><nut-switch></nut-switch>\n</code></pre><h3>禁用状态</h3><pre><code class="language-html"><nut-switch disable></nut-switch>\n</code></pre><h3>change事件</h3><pre><code class="language-html"><nut-switch @switch-change="change"></nut-switch>\n</code></pre><pre><code class="language-javascript">export default {\n setup() {\n const change = (event: Event, isOpen: boolean) => {\n console.log('触发了change事件,开关状态：', isOpen);\n };\n \n return {\n change\n };\n }\n};\n</code></pre><h3>自定义颜色</h3><pre><code class="language-html"><nut-switch active-color="blue"></nut-switch>\n</code></pre><h2>API</h2><h3>Props</h3><table><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>status</td><td>开关状态</td><td>Boolean</td><td><code>true</code></td></tr><tr><td>disable</td><td>禁用状态</td><td>Boolean</td><td><code>false</code></td></tr><tr><td>active-color</td><td>开关打开时的背景颜色</td><td>String</td><td><code>rgb(250,63,25,1)</code></td></tr><tr><td>inactive-color</td><td>开关关闭时的背景颜色</td><td>String</td><td><code>rgba(235,235,235,1)</code></td></tr><tr><td>label</td><td>支持内嵌文字,两种状态使用空格隔开</td><td>String</td><td>-</td></tr></tbody></table><h3>Events</h3><table><thead><tr><th>事件名</th><th>说明</th><th>回调参数</th></tr></thead><tbody><tr><td>switch-change</td><td>切换开关时触发</td><td>(event: Event, isOpen: boolean)</td></tr></tbody></table>',20),c={expose:[],setup:d=>(d,c)=>(e(),t("div",n,[h]))};export default c;
|
