Switch

A switch selector for toggling between two states.

Basic Usage

Simply insert content using the default slot.

<template>
  <b-switch v-model="value" @change="change"></b-switch>
</template>

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

const value = ref(false)

function change(val) {
  console.log(val)
}
</script>

Size and Color

     

<template>
  <div>
    <b-switch size="large"></b-switch>
    &nbsp;
    <b-switch></b-switch>
    &nbsp;
    <b-switch size="small"></b-switch>
    &nbsp;
    <b-switch active-color="#13ce66" inactive-color="#ff4949"></b-switch>
  </div>
</template>

<script setup lang="ts"></script>

Text or Icon

关  

Close   OFF

<template>
  <div>
    <b-switch>
      <template #open><span>开</span></template>
      <template #close><span>关</span></template>
    </b-switch>
    &nbsp;
    <b-switch>
      <template #open>
        <b-icon name="check"></b-icon>
      </template>
      <template #close>
        <b-icon name="close"></b-icon>
      </template>
    </b-switch>
    <br />
    <br />
    <b-switch size="large">
      <template #open><span>开启</span></template>
      <template #close><span>Close</span></template>
    </b-switch>
    &nbsp;
    <b-switch size="large">
      <template #open><span>ON</span></template>
      <template #close><span>OFF</span></template>
    </b-switch>
  </div>
</template>

<script setup lang="ts"></script>

Disabled

           

<template>
  <div>
    <b-switch v-model="value1" disabled size="large"></b-switch>
    &nbsp;
    <b-switch v-model="value1" disabled></b-switch>
    &nbsp;
    <b-switch v-model="value1" disabled size="small"></b-switch>
    &nbsp;
    <b-switch v-model="value2" disabled size="large"></b-switch>
    &nbsp;
    <b-switch v-model="value2" disabled></b-switch>
    &nbsp;
    <b-switch v-model="value2" disabled size="small"></b-switch>
    &nbsp;
  </div>
</template>

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

const value1 = ref(true)
const value2 = ref(false)
</script>

loading

           

<template>
  <div>
    <b-switch v-model="value1" loading size="large"></b-switch>
    &nbsp;
    <b-switch v-model="value1" loading></b-switch>
    &nbsp;
    <b-switch v-model="value1" loading size="small"></b-switch>
    &nbsp;
    <b-switch v-model="value2" loading size="large"></b-switch>
    &nbsp;
    <b-switch v-model="value2" loading></b-switch>
    &nbsp;
    <b-switch v-model="value2" loading size="small"></b-switch>
    &nbsp;
  </div>
</template>

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

const value1 = ref(true)
const value2 = ref(false)
</script>

Confirm Before Toggle

Set confirm to require confirmation before toggling, and use confirm-txt to customize the confirmation text.

<template>
  <b-switch confirm></b-switch>
</template>

<script setup lang="ts"></script>

Prevent Toggle

Can use loading, confirm, and the before-change function prop together to prevent toggling.

 

<template>
  <div>
    <b-switch
      v-model="value1"
      confirm
      :loading="loading1"
      :before-change="beforeChange1"
    ></b-switch>
    &nbsp;
    <b-switch
      v-model="value2"
      confirm
      :loading="loading2"
      :before-change="beforeChange2"
    ></b-switch>
  </div>
</template>

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

const value1 = ref(false)
const value2 = ref(false)
const loading1 = ref(false)
const loading2 = ref(false)

const beforeChange1 = () => {
  loading1.value = true
  return new Promise(resolve => {
    setTimeout(() => {
      loading1.value = false
      return resolve(true)
    }, 1000)
  })
}

const beforeChange2 = () => {
  loading2.value = true
  return new Promise((_, reject) => {
    setTimeout(() => {
      loading2.value = false
      return reject(new Error('call出错！'))
    }, 1000)
  })
}
</script>

Props

Parameter	Description	Type	Options	Default
modelValue	Specifies whether selected; use v-model for two-way binding	Boolean	—	false
size	Switch size. Large is recommended when the switch uses 2 Chinese characters.	String	large、small、default	default
disabled	Disabled switch	Boolean	—	false
true-value	Value when selected; useful when using values like 1 and 0 to determine selection	String, Number, Boolean	—	true
false-value	Value when not selected; useful when using values like 1 and 0 to determine selection	String, Number, Boolean	—	false
active-color	Background color when switch is on	string	—	—
inactive-color	Background color when switch is off	string	—	—
confirm	Enable confirmation before toggling	Boolean	—	false
confirm-txt	Toggle confirmation text	string	—	—
loading	Loading state	Boolean	—	—
beforeChange	Interceptor function before state change; returns Promise or boolean	Function	—	—

Events

Event Name	Description	Return Value
change	Triggers when switch changes, returns current state	true、false

Slot

Event Name	Description
open	Custom content when open
close	Custom content when closed