nutui/site_docs/docs/switch/doc.md

Switch 开关

介绍

用来打开或关闭选项。

安装

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

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

代码演示

基础用法

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

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

禁用状态

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

加载状态

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

change事件

<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(`触发了change事件，开关状态：${value}`);
    };
    return {
      checked,
      change
    };
  }
};

异步控制

<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秒后异步触发 ${value}`);
      setTimeout(() => {
        checkedAsync.value = value;
      }, 2000);
    };
    
    return {
      checkedAsync,
      changeAsync
    };
  }
};

自定义颜色

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

支持文字

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

API

Props

参数	说明	类型	默认值
v-model	开关状态	Boolean、String、Number	false
disable	禁用状态	Boolean	false
loading	加载状态	Boolean	false
name	图标名称	String	loading
color	图标颜色，仅在loading状态下生效	String	-
size	图标尺寸，仅在loading状态下生效	String、Number	12px
active-color	打开时的背景颜色	String	#fa2c19
inactive-color	关闭时的背景颜色	String	#ebebeb
active-text	打开时文字描述	String	-
inactive-text	关闭时文字描述	String	-
active-value	打开时组件的值	Boolean、String、Number	true
inactive-value	关闭组件的值	Boolean、String、Number	false

Events

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