import{c as t,o as e,C as n}from"./vendor.870c33cc.js";const c={class:"markdown-body"},o=n('

Switch 开关

介绍

用来打开或关闭选项。

安装

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

代码演示

基础用法

<nut-switch v-model="checked" />\n

import { ref } from 'vue';\nexport default {\n  setup() {\n    const checked = ref(true);\n    return { checked };\n  },\n};\n

禁用状态

<nut-switch v-model="checked" disable />\n

change事件

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

import { ref, getCurrentInstance } from 'vue';\nexport default {\n  setup() {\n    let { proxy } = getCurrentInstance() as any;\n    const checked = ref(true);\n    const change = (value: boolean, event: Event) => {\n      proxy.$toast.text(`触发了change事件，开关状态：${value}`);\n    };\n    return {\n      checked,\n      change\n    };\n  }\n};\n

异步控制

<nut-switch :model-value="checkedAsync" @change="changeAsync" />\n

import { ref, getCurrentInstance } from 'vue';\nexport default {\n  setup() {\n    let { proxy } = getCurrentInstance() as any;\n    const checkedAsync = ref(true);\n    const changeAsync = (value: boolean, event: Event) => {\n      proxy.$toast.text(`2秒后异步触发 ${value}`);\n      setTimeout(() => {\n        checkedAsync.value = value;\n      }, 2000);\n    };\n    \n    return {\n      checkedAsync,\n      changeAsync\n    };\n  }\n};\n

自定义颜色

<nut-switch v-model="checked" @change="switchChange" active-color="blue" />\n

支持文字

<nut-switch v-model="checked" @change="switchChange" active-text="开" inactive-text="关" />\n

API

Props

参数	说明	类型	默认值
v-model	开关状态	Boolean	`false`
disable	禁用状态	Boolean	`false`
active-color	打开时的背景颜色	String	`#fa2c19`
inactive-color	关闭时的背景颜色	String	`#ebebeb`
active-text	打开时文字描述	String	-
inactive-text	关闭时文字描述	String	-

Events

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

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