import{c as t,o as e,A as d}from"./vendor.80bf15c7.js";const n={class:"markdown-body"},h=d('

switch组件

介绍

用来打开或关闭选项。

安装

import { createApp } from 'vue';\nimport { Switch } from '@nutui/nutui';\n\nconst app = createApp();\napp.use(Switch);\n\n

代码演示

基础用法

<nut-switch></nut-switch>\n

禁用状态

<nut-switch disable></nut-switch>\n

change事件

<nut-switch @switch-change="change"></nut-switch>\n

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

自定义颜色

<nut-switch active-color="blue"></nut-switch>\n

API

Props

参数	说明	类型	默认值
status	开关状态	Boolean	`true`
disable	禁用状态	Boolean	`false`
active-color	开关打开时的背景颜色	String	`rgb(250,63,25,1)`
inactive-color	开关关闭时的背景颜色	String	`rgba(235,235,235,1)`
label	支持内嵌文字,两种状态使用空格隔开	String	-

Events

事件名	说明	回调参数
switch-change	切换开关时触发	(event: Event, isOpen: boolean)

',20),c={expose:[],setup:d=>(d,c)=>(e(),t("div",n,[h]))};export default c;