Skip to content

Switch 开关

基础用法

  • 跟官方的很相似,但扩展了一些功能
vue
<template>
<sn-switch v-model="value"></sn-switch>
</template>

更多演示请下载 demo 查看

属性

参数说明类型默认值可选值
vModel当前开关状态Booleanfalse-
width开关宽度String50px-
height开关高度String25px-
text开关文本内容String--
icon开关图标名称String--
iconSize开关图标大小String--
padding开关内边距String5px-
borderRadius开关边框圆角String$circle-
bgColor开关背景颜色String$line-
activeBgColor开启时背景颜色String$primary-
disabledBgColor禁用状态背景颜色String$disabled-
disabledActiveBgColor禁用状态下开启时背景颜色String$disabledDark-
blockColor小球颜色String#fff-
activeBlockColor开启时小球颜色String#fff-
disabledBlockColor禁用状态小球颜色String#fff-
disabledActiveBlockColor禁用状态下开启时的小球颜色String#fff-
blockBorderRadius小球圆角大小String$circle-
textColor开关文本颜色String#fff-
textSize开关文本大小String$2-
loading是否进入加载状态Booleanfalsetrue | false
disabled是否禁用开关Booleanfalsetrue | false
customStyle自定义开关样式UTSJSONObject{}-

事件

名称类型说明
change(value: boolean) => void状态改变时触发

使用 MIT 协议