# Switch 开关
# 介绍
点击触发事件，通常用于切换或开关某些配置选项，详细介绍见快速上手。
# 引入
在 main.js 中引入
// 引入组件库
import VsSwitch from 'visn/packages/vs-switch'
// 组件按需引入注册
VsSwitch.install(Vue)
1
2
3
4
2
3
4
# 使用
引入组件后，可以在Vue文件中使用
<vs-switch></vs-switch>
1
# 代码演示
# 开关插槽
组件使用了Vue提供的插槽语法，支持往圆形按钮插入文字（奇怪的需求）、标签，还可以插入组件，通常用于加入来回切换的图标，默认内容为空，使用者可以通过改变插槽的内容实现切换后图标的变化。
<vs-switch></vs-switch>
<vs-switch>牛</vs-switch> <!--文字-->
<vs-switch><vs-icon icon="下载" size="16px"></vs-icon></vs-switch> <!--搭配visn的其他组件，表现更多效果-->
1
2
3
2
3
# 开关尺寸
字符串类型，支持自己定制尺寸大小，有长width（总长）和半径radius两个属性，默认为16*8（单位：px），通过绑定属性传入；
最小值：长度-16px，半径-8px。
<vs-switch width="40px"></vs-switch>
<vs-switch radius="24px"></vs-switch>
<vs-switch width="40px" radius="24px"></vs-switch>
1
2
3
2
3
# 自定义颜色
可以设置开和关两边的颜色，允许输入颜色的英文，或者输入对应RGB值（前加井号#）或RGBA值，默认为开green关red，按钮在右边时为开。
<vs-switch leftColor="black"></vs-switch> <!--关闭状态为黑色-->
<vs-switch rightColor="#fff"></vs-switch> <!--打开状态为白色-->
1
2
2
# 开关边框
布尔值类型，可以调整边框的有无，边框的默认样式为白色-2px粗，不支持修改。
<vs-switch :edge="true">边框开启</vs-switch>
<vs-switch :edge="false">无边框</vs-switch>
1
2
2
# 开关内阴影
布尔值类型，组件通过内阴影表现UI的立体感，也可以设置内阴影关闭，获得扁平化的UI组件，默认开启，样式为黑色-扩散半径4px。
<vs-switch :shadow="true">内阴影</vs-switch>
<vs-switch :shadow="false">无边框</vs-switch>
1
2
2
# 禁用状态
通过设置disabled属性来禁用开关，禁用状态下无法点击切换状态。
<vs-switch disabled></vs-switch>
1
