指南组件

Switch 开关

用于切换两种状态的开关组件

sKy
@skiyee
Source 
<template>
  <SkSwitch />
</template>

用法

Controlled 开关状态

Prop类型默认值描述
v-modelbooleanfalse设置开关的状态值 (双向绑定)
<script setup lang="ts">
import { ref } from 'vue'

const state = ref(false)
</script>

<template>
  <SkSwitch v-model="state" />
</template>

Color 颜色

Prop类型默认值描述
color{Color}brand设置开关的颜色主题
<script setup lang="ts">
import { ref } from 'vue'

const state = ref(true)
</script>

<template>
  <div class="p-4 flex flex-col gap-3">
    <SkSwitch v-model="state" color="brand">
      品牌色开关
    </SkSwitch>
    <SkSwitch v-model="state" color="success">
      成功色开关
    </SkSwitch>
    <SkSwitch v-model="state" color="warning">
      警告色开关
    </SkSwitch>
    <SkSwitch v-model="state" color="danger">
      危险色开关
    </SkSwitch>
    <SkSwitch v-model="state" color="neutral">
      中性色开关
    </SkSwitch>
  </div>
</template>

Size 尺寸

Prop类型默认值描述
size{Size}medium设置开关的尺寸大小
<script setup lang="ts">
import { ref } from 'vue'

const state = ref(true)
</script>

<template>
  <div class="p-4 flex flex-col gap-3">
    <SkSwitch v-model="state" size="small">
      小尺寸开关
    </SkSwitch>
    <SkSwitch v-model="state" size="medium">
      中等尺寸开关
    </SkSwitch>
    <SkSwitch v-model="state" size="large">
      大尺寸开关
    </SkSwitch>
  </div>
</template>

Readonly 只读

Prop类型默认值描述
readonlybooleanfalse设置开关是否为只读状态
<script setup lang="ts">
import { ref } from 'vue'

const state = ref(true)
</script>

<template>
  <SkSwitch v-model="state" readonly />
</template>

Disabled 禁用

Prop类型默认值描述
disabledbooleanfalse设置开关是否为禁用状态
<script setup lang="ts">
import { ref } from 'vue'

const disabledOff = ref(false)
const disabledOn = ref(true)
</script>

<template>
  <div class="p-4 flex flex-col gap-3">
    <SkSwitch v-model="disabledOff" disabled>
      禁用关闭状态
    </SkSwitch>
    <SkSwitch v-model="disabledOn" disabled>
      禁用开启状态
    </SkSwitch>
  </div>
</template>

例子

选中图标

通过 thumbIcon 插槽可以自定义开关选中的图标

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

const state = ref(false)
</script>

<template>
  <SkSwitch v-model="state">
    <template #thumbIcon="{ selected, clax }">
      <SkIcon v-if="selected" name="i-lucide:wind" :clax="clax" />
    </template>
  </SkSwitch>
</template>

加载功能

加载状态配合了 SkSpinner 减少使用成本，前往获取该组件更多信息
<script setup lang="ts">
import { ref } from 'vue'

const loadingSwitch = ref(true)
const loadingOnSwitch = ref(false)
</script>

<template>
  <div class="p-4 flex flex-col gap-3">
    <SkSwitch v-model="loadingSwitch" readonly>
      <template #thumbIcon="{ selected }">
        <SkSpinner v-if="selected" size="small" />
      </template>
      仅可见的加载状态
    </SkSwitch>
    <SkSwitch v-model="loadingOnSwitch">
      <template #thumbIcon="{ selected }">
        <SkSpinner v-if="selected" size="small" />
      </template>
      {{ loadingOnSwitch ? '加载中...' : '点击开始加载' }}
    </SkSwitch>
  </div>
</template>

接口

Props

属性名类型默认值描述
v-modelbooleanfalse详见 Controlled 开关状态
color{Color}'brand'详见 Color 颜色
size{Size}'medium'详见 Size 尺寸
readonlybooleanfalse详见 Readonly 只读
disabledbooleanfalse详见 Disabled 禁用
claxstring-用于拓展当前基础样式

Emits

事件名参数描述
change(value: boolean)当开关状态改变时触发

Slots

插槽名属性描述
thumbIcon{ selected: boolean, clax: string }开关拇指图标
default-开关标签内容

交互

正在完善中，敬请期待！😊