Switch 开关

介绍

用来打开或关闭选项。

基础用法

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

const checked = ref(true);

禁用状态

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

加载状态

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

change事件

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

const checked = ref(true);

function onChange(value: boolean) {
  console.log("change", value);
}

异步控制

需要异步控制开关时，可以使用 model-value 属性和 update:model-value 事件代替 v-model， 并在事件回调函数中手动处理开关状态。

<template>
  <nut-switch :model-value="checked" @update:model-value="onUpdate"></nut-switch>
</template>

const checked = ref(true);

function onUpdate(value: boolean) {
  uni.showModal({
    title: "提示",
    content: "是否切换开关？",
    success({ confirm }) {
      if (confirm) {
        checked.value = value;
      }
    }
  });
}

自定义颜色

<template>
  <nut-switch v-model="checked" active-color="blue"></nut-switch>
</template>

支持文字

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

自定义加载图标

<template>
  <nut-switch v-model="checked" loading>
    <template #icon>
      <nut-icon name="loading"></nut-icon>
    </template>
  </nut-switch>
</template>

API

Props

参数	说明	类型	可选值	默认值
v-model	开关状态	boolean / string / number	-	false
disabled	禁用状态	boolean	-	false
loading	加载状态	boolean	-	false
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) => void

Slots

名称	说明
icon	加载状态图标

主题定制

样式变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

名称	默认值
--nut-switch-close-bg-color	#ebebeb
--nut-switch-close-cline-bg-color	#f0f0f0
--nut-switch-width	36px
--nut-switch-height	21px
--nut-switch-line-height	21px
--nut-switch-border-radius	21px
--nut-switch-inside-width	13px
--nut-switch-inside-height	13px
--nut-switch-inside-open-transform	translateX(146%)
--nut-switch-inside-close-transform	translateX(30%)