Switch

两种互相对立的状态之间的切换

基础用法

使用 v-model 绑定开关切换值

vue
<template>
  <div class="wrapper">
    <div>当前状态: {{ switchVal ? '开' : '关' }}</div>

    <ap-switch v-model="switchVal" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const switchVal = ref<boolean>(false)
</script>

<style scoped>
.wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}
</style>

禁用

通过指定 disabled 为 true 可以对开关进行禁用

vue
<template>
  <div style="display: flex; gap: 20px">
    <ap-switch v-model="switchTrue" :disabled="true" />
    <ap-switch v-model="switchFalse" :disabled="true" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const switchTrue = ref<boolean>(true)
const switchFalse = ref<boolean>(false)
</script>

加载状态

通过指定 loading 为 true 可以设置为加载状态

vue
<template>
  <div style="display: flex; gap: 20px">
    <ap-switch v-model="switchTrue" :loading="true" />
    <ap-switch v-model="switchFalse" :loading="true" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const switchFalse = ref<boolean>(false)
const switchTrue = ref<boolean>(true)
</script>

大小

指定 large 和 small 属性可以设置开关的大小，默认不指定

vue
<template>
  <div class="wrapper">
    <div class="item">
      <span>small</span>
      <ap-switch v-model="switchVal" size="small" />
    </div>
    <div class="item">
      <span>medium</span>
      <ap-switch v-model="switchVal" />
    </div>
    <div class="item">
      <span>large</span>
      <ap-switch v-model="switchVal" size="large" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const switchVal = ref<boolean>(false)
</script>

<style scoped>
.wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}
.item {
  display: flex;
  gap: 20px;
  align-items: center;
}
.item span {
  width: 60px;
  text-align: left;
}
</style>

自定义样式

通过指定 active-text 和 inactive-text 可以自定义开关不同状态的显示内容，或者通过插槽active 和 inactive的方式进行指定

TIP

props的优先级会高于插槽的，也就是同时定义props和插槽的自定义形式会显示props定义的形式

vue
<template>
  <ap-switch v-model="switchVal1" :active-text="'开'" :inactive-text="'关'" />
  <ap-switch v-model="switchVal2" style="margin-left: 20px">
    <template #active>custom open</template>
    <template #inactive>custom close</template>
  </ap-switch>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const switchVal1 = ref<boolean>(false)
const switchVal2 = ref<boolean>(false)
</script>

Props

prop	说明	类型	默认值
modelValue	控制开关值	String, Number, Boolean	false
trueValue	打开时 modelValue 值为啥	String, Number, Boolean	true
falseValue	关闭时 modelValue 值为啥	String, Number, Boolean	false
inactiveText	关闭时文本展示在右侧	String	无
activeText	打开时文本展示在左侧	String	无
disabled	是否启用禁用开关	Boolean	false
size	控制大小	String (large,small)	无
loading	是否开启加载开关	Boolean	false

Slots

插槽名称	说明	参数
active	值为 trueValue 时的显示内容	-
inactive	值为 falseValue 时的显示内容	-

Events

change: 开关改变时触发参数为开关值

Switch ​

基础用法 ​

禁用 ​

加载状态 ​

大小 ​

自定义样式 ​

Props ​

Slots ​

Events ​