Switch组件

介绍

用来打开或关闭选项。

安装

import { createApp } from 'vue';
import { Switch } from '@nutui/nutui';
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 />

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

Events