Appearance

Return to top
On this page

Switch 开关

基本使用

开关的基本使用

显示代码
html
<template>
  <n-switch v-model="value1" />
</template>

<script setup>
  import { ref } from 'vue';
  const value1 = ref(true);
</script>

文字描述

closeText 属性可以配置左侧的文字

openText 属性可以配置右侧的文字

关闭开启
显示代码
html
<template>
  <n-switch v-model="value2" closeText="关闭" openText="开启" />
</template>

<script setup>
  import { ref } from 'vue';
  const value2 = ref(true);
</script>

禁用状态

disabled 属性可以配置禁用开关

显示代码
html
<template>
  <n-switch v-model="value3" disabled />
  <n-switch v-model="value4" disabled />
</template>

<script setup>
  import { ref } from 'vue';
  const value3 = ref(true);
  const value4 = ref(false);
</script>

自定义颜色

closeColor 属性可以配置自定义关闭颜色

openColor 属性可以配置自定义开启颜色

显示代码
html
<template>
  <n-switch v-model="value5" closeColor="red" openColor="green" />
  <n-switch v-model="value6" closeColor="black" openColor="#eee" />
</template>

<script setup>
  import { ref } from 'vue';
  const value5 = ref(true);
  const value6 = ref(false);
</script>

直角开关

type 属性设置为square可以配置直角开关

显示代码
html
<template>
  <n-switch v-model="value7" type="square" />
</template>

<script setup>
  import { ref } from 'vue';
  const value7 = ref(true);
</script>

自定义尺寸

width 属性可以自定义开关的尺寸 最小宽度为 20

显示代码
html
<template>
  <n-switch v-model="value8" :width="120" />
</template>

<script setup>
  import { ref } from 'vue';
  const value8 = ref(true);
</script>

API

参数说明类型可选值默认值
v-model绑定的值boolean——true
closeColor关闭的颜色string——'#dcdfe6'
openColor开启的颜色string——'#3a6ff4'
closeText左侧的文字描述string————
openText右侧的文字描述string————
disabled是否禁用boolean——false
type按钮类型string['circle','square']'circle'
width开关尺寸number——40

Events

事件名称说明回调参数
changeswitch 状态发生变化时的回调函数新状态的值