Switch


一种滑动开关,通过点击使按钮左右滑动,同时触发对应的开关状态。

默认用法
  1. <nut-switch
  2. :active="true"
  3. ></nut-switch>
自定义颜色
  1. <nut-switch
  2. :height="0.3"
  3. :width="0.6"
  4. activeBgColor="#9ABB82"
  5. inActiveBgColor="#EAE7E2"
  6. btnColor="#CBDDDD"
  7. ></nut-switch>
ON/OFF事件
  1. <nut-switch
  2. @switch-on="switchOnEvt"
  3. @switch-off="switchOffEvt"
  4. ></nut-switch>
  1. export default {
  2. methods:{
  3. switchOnEvt(){
  4. alert('on');
  5. },
  6. switchOffEvt(){
  7. alert('off');
  8. }
  9. }
  10. }
Props
参数说明类型默认值可选值
active.sync开关状态Booleanfalsetrue/false
width组件宽度(单位rem)Number0.8
height组件高度(单位rem)Number0.4
activeBgColor打开状态背景颜色String#F42E2D
inActiveBgColor关闭状态背景颜色String#FDFDFD
btnColor滑动圆按钮颜色String#FFFFFF
Events
事件名说明回调参数
switch-on开关打开时触发
switch-off开关关闭时触发