Switch 开关

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

基础用法

v-model 为绑定值， true 为选中状态，false 为未选中状态，checked-color 为选中状态的背景色，unchecked-color 为未选中状态的背景色。

vue

<template>
  <div class="box" style="display: flex; gap: 10px">
    <dk-switch v-model="checkValue"></dk-switch>
    <dk-switch
      v-model="checkValue2"
      checked-color="#10b981"
      unchecked-color="#d33f3f"
    ></dk-switch>
  </div>
</template>
<script setup lang="ts">
  import { reactive, toRefs } from 'vue'
  const data = reactive({
    checkValue: false,
    checkValue2: true
  })
  const { checkValue, checkValue2 } = toRefs(data)
</script>

展开

禁用状态

disabled 为禁用状态。

vue

<template>
<div class="box" style="display: flex; gap: 10px">
  <dk-switch v-model="checkValue" disabled></dk-switch>
  <dk-switch v-model="checkValue2" disabled></dk-switch>
</div>
</template>
<script setup lang="ts">
import { reactive, toRefs } from 'vue'
const data = reactive({
  checkValue: false,
  checkValue2: true
})
const { checkValue, checkValue2 } = toRefs(data)
</script>

展开

不同尺寸

size 为尺寸，可选值为 large、medium、small、mini, 默认为 small。

vue

<template>
<div class="box" style="display: flex; gap: 10px">
  <dk-switch v-model="checkValue" size="large"></dk-switch>
  <dk-switch v-model="checkValue" size="medium"></dk-switch>
  <dk-switch v-model="checkValue" size="small"></dk-switch>
  <dk-switch v-model="checkValue" size="mini"></dk-switch>
</div>
</template>
<script setup lang="ts">
import { reactive, toRefs } from 'vue'
const data = reactive({
  checkValue: false
})
const { checkValue } = toRefs(data)
</script>

展开

文案设置

checked-text 为选中状态的文案，unchecked-text 为未选中状态的文案。 width 为开关的宽度，没有设置宽度时，开关的宽度自适应，设置宽度时，开关的宽度为设置的宽度，超出部分显示省略号。

开启

设置宽度

没有设置宽度

vue

<template>
<div class='box' style='display: flex; gap: 10px; align-items: center'>
  <dk-switch 
    v-model='checkValue'
    checked-text='开启'
    unchecked-text='关闭'
  ></dk-switch>
  <dk-switch
    v-model='checkValue2'
    checked-text='开启'
    unchecked-text='关闭'
  ></dk-switch>
</div>
<div class='box' style='display: flex; gap: 10px; align-items: center; margin-top:10px'>
  <dk-switch
    v-model='checkValue'
    checked-text='设置宽度'
    unchecked-text='开关宽度超出显示省略号'
    width="100px"
  ></dk-switch>
  <dk-switch
    v-model='checkValue2'
    checked-text='没有设置宽度'
    unchecked-text='开关的宽度自适应'
  ></dk-switch>
</div>
</template>
<script setup lang="ts">
import { reactive, toRefs } from 'vue'
const data = reactive({
  checkValue: false,
  checkValue2: true
})
const { checkValue, checkValue2 } = toRefs(data)
</script>

展开

带有图标的开关

checked-icon 为选中状态的图标，unchecked-icon 为未选中状态的图标。

vue

<template>
<div class='box' style='display: flex; gap: 10px; align-items: center'>
  <dk-switch
    v-model='checkValue'
    checked-icon='check'
    unchecked-icon='close'
  ></dk-switch>
  <dk-switch
    v-model='checkValue2'
    checked-icon='check'
    unchecked-icon='close'
  ></dk-switch>
</div>
</template>
<script setup lang="ts">
import { reactive, toRefs } from 'vue'
const data = reactive({
  checkValue: false,
  checkValue2: true
})
const { checkValue, checkValue2 } = toRefs(data)
</script>

展开

Loading 状态

loading 为 Loading 状态，checked-custom-icon 为选中状态的自定义图标，unchecked-custom-icon 为未选中状态的自定义图标。

vue

<template>
<div class='box' style='display: flex; gap: 10px; align-items: center'>
  <dk-switch v-model='checkValue' loading></dk-switch>
  <dk-switch v-model='checkValue2' loading></dk-switch>
</div>
<div class='box' style='display: flex; gap: 10px; align-items: center; margin-top:10px'>
  <dk-switch
    v-model='checkValue'
    checked-custom-icon='IconCheck'
    unchecked-custom-icon='IconClose'
  ></dk-switch>
  <dk-switch
    v-model='checkValue2'
    checked-custom-icon='IconCheck'
    unchecked-custom-icon='IconClose'
  ></dk-switch>
</div>
</template>
<script setup lang="ts">
import { reactive, toRefs } from 'vue'
const data = reactive({
  checkValue: false,
  checkValue2: true
})
const { checkValue, checkValue2 } = toRefs(data)
</script>

展开

属性

参数	说明	类型	可选值	默认值
`v-model`	绑定值	`boolean`	-	-
`checked-color`	选中时的背景色	`string`	-	`#409eff`
`unchecked-color`	未选中时的背景色	`string`	-	`#c0ccda`
`checked-text`	选中时的文案	`string`	-	-
`unchecked-text`	未选中时的文案	`string`	-	-
`checked-icon`	选中时的图标	`string`	-	-
`unchecked-icon`	未选中时的图标	`string`	-	-
`checked-custom-icon`	选中时的自定义图标	`string`	-	-
`unchecked-custom-icon`	未选中时的自定义图标	`string`	-	-
`width`	开关的宽度	`string`	-	-
`size`	开关的尺寸	`string`	`large` `medium` `small` `mini`	`small`
`disabled`	是否禁用	`boolean`	`true` `false`	`false`
`loading`	是否为加载状态	`boolean`	`true` `false`	`false`

事件

事件名	说明	回调参数
`change`	开关状态发生变化时触发	`(value: boolean) => value`

Switch 开关 ​

Contributors ​

Switch 开关

Contributors