import{e as a,o as n,G as t}from"./vendor.d721e0a0.js";const l={class:"markdown-body"},e=t(`

Switch \u5F00\u5173

\u4ECB\u7ECD

\u7528\u6765\u6253\u5F00\u6216\u5173\u95ED\u9009\u9879\u3002

\u5B89\u88C5

import { createApp } from 'vue';
//vue
import { Switch } from '@nutui/nutui';
//taro
import { Switch } from '@nutui/nutui-taro';

const app = createApp();
app.use(Switch);

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

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

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

\u7981\u7528\u72B6\u6001

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

change\u4E8B\u4EF6

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

import { ref, getCurrentInstance } from 'vue';
export default {
  setup() {
    let { proxy } = getCurrentInstance() as any;
    const checked = ref(true);
    const change = (value: boolean, event: Event) => {
      proxy.$toast.text(\`\u89E6\u53D1\u4E86change\u4E8B\u4EF6\uFF0C\u5F00\u5173\u72B6\u6001\uFF1A\${value}\`);
    };
    return {
      checked,
      change
    };
  }
};

\u5F02\u6B65\u63A7\u5236

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

import { ref, getCurrentInstance } from 'vue';
export default {
  setup() {
    let { proxy } = getCurrentInstance() as any;
    const checkedAsync = ref(true);
    const changeAsync = (value: boolean, event: Event) => {
      proxy.$toast.text(\`2\u79D2\u540E\u5F02\u6B65\u89E6\u53D1 \${value}\`);
      setTimeout(() => {
        checkedAsync.value = value;
      }, 2000);
    };
    
    return {
      checkedAsync,
      changeAsync
    };
  }
};

\u81EA\u5B9A\u4E49\u989C\u8272

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

\u652F\u6301\u6587\u5B57

<nut-switch v-model="checked" @change="switchChange" active-text="\u5F00" inactive-text="\u5173" />

API

Props

\u53C2\u6570	\u8BF4\u660E	\u7C7B\u578B	\u9ED8\u8BA4\u503C
v-model	\u5F00\u5173\u72B6\u6001	Boolean	`false`
disable	\u7981\u7528\u72B6\u6001	Boolean	`false`
active-color	\u6253\u5F00\u65F6\u7684\u80CC\u666F\u989C\u8272	String	`#fa2c19`
inactive-color	\u5173\u95ED\u65F6\u7684\u80CC\u666F\u989C\u8272	String	`#ebebeb`
active-text	\u6253\u5F00\u65F6\u6587\u5B57\u63CF\u8FF0	String	-
inactive-text	\u5173\u95ED\u65F6\u6587\u5B57\u63CF\u8FF0	String	-

Events

\u4E8B\u4EF6\u540D	\u8BF4\u660E	\u56DE\u8C03\u53C2\u6570
change	\u5207\u6362\u5F00\u5173\u65F6\u89E6\u53D1	(value: boolean,event: Event)

`,26),p=[e],j={setup(c,{expose:s}){return s({frontmatter:{}}),(r,o)=>(n(),a("div",l,p))}};export{j as default};