开关 Switch

在两种状态间切换时用到的开关选择器

基础用法

直接用组件默认插槽插入即可

<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>

<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>

大小及颜色

<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>

<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>

文字或图标

关

关闭 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>关闭</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>

<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>关闭</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>

禁用

<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>

<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>

<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来设置切换前拦截，并通过confirm-txt来自定义切换文字提示。

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

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

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

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

阻止切换

可以配合loading和confirm一级before-change函数props来配合实现阻止切换

<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('调用出错！'))
    }, 1000)
  })
}
</script>

<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('调用出错！'))
    }, 1000)
  })
}
</script>

Props

参数	说明	类型	可选值	默认值
modelValue	指定当前是否选中，可以使用 v-model 双向绑定数据	Boolean	—	false
size	开关的尺寸。建议开关如果使用了2个汉字的文字，使用 large。	String	large、small、default	default
disabled	禁用开关	Boolean	—	false
true-value	选中时的值，当使用类似 1 和 0 来判断是否选中时会很有用	String, Number, Boolean	—	true
false-value	没有选中时的值，当使用类似 1 和 0 来判断是否选中时会很有用	String, Number, Boolean	—	false
active-color	switch 打开时的背景色	string	—	—
inactive-color	switch 关闭时的背景色	string	—	—
confirm	开启切换前拦截功能	Boolean	—	false
confirm-txt	切换拦截文字	string	—	—
loading	加载中状态	Boolean	—	—
beforeChange	改变状态前拦截函数，return type Promise or boolean	Function	—	—

Events

事件名	说明	返回值
change	开关变化时触发，返回当前的状态	true、false

Slot

事件名	说明
open	自定义显示打开时的内容
close	自定义显示关闭时的内容

开关 Switch ​

基础用法 ​

大小及颜色 ​

文字或图标 ​

禁用 ​

loading ​

切换前拦截 ​

阻止切换 ​

Props ​

Events ​

Slot ​

开关 Switch

基础用法

大小及颜色

文字或图标

禁用

loading

切换前拦截

阻止切换

Props

Events

Slot