iswitch

一个实现Switch功能的Web组件，支持原生JavaScript及jQuery、Vue、React、Angular等框架。

效果

[图片示例待添加]

功能

• 核心Switch效果
• 滑动动画
• 句柄滑动、按住效果
• 支持change事件
• 支持change前事件
• 支持disabled、loading、readonly、static状态
• 自定义设置动画、尺寸、颜色

实现进度

| 平台 | 包名 | 版本 | 备注 | | ----------- | --------------- | ----------- | ----------- | | | iswitch-js | | 实现中... | | | iswitch-vue | | 实现中... | | | iswitch-react | | 实现中... | | | iswitch-angular | | 实现中... |

使用

iSwitch组件支持在多种JS框架中运行，请挑选适合你的，安装并使用她。

安装

直接在页面中引用

• 本地引用

<!--原生JS版本-->
<script src="~/iswitch-js/dist/index.js"></script>
<!--Vue版本-->
<script src="~/iswitch-vue/dist/index.js"></script>
<!--React版本-->
<script src="~/iswitch-react/dist/index.js"></script>
<!--Angular版本-->
<script src="~/iswitch-angular/dist/index.js"></script>

• CDN引用

<!--原生JS版本-->
<script src="~/iswitch-js/1.0.0/dist/index.js"></script>
<!--Vue版本-->
<script src="~/iswitch-vue/1.0.0/dist/index.js"></script>
<!--React版本-->
<script src="~/iswitch-react/1.0.0/dist/index.js"></script>
<!--Angular版本-->
<script src="~/iswitch-angular/1.0.0/dist/index.js"></script>

通过NPM安装

# 原生JS版本
npm i -S iswitch-js

# Vue版本
npm i -S iswitch-vue

# React版本
npm i -S iswitch-react

# Angular版本
npm i -S iswitch-angular

文档

组件

Props

| 名称 | 说明 | 类型 | 默认值 | | ---- | ---- | --- | ----- | | name | 组件内部input[checkbox]的name属性值 | string | | | value | 组件值 | any | | | size | 组件尺寸，可选值：small default large | string | default | | loading | 组件是否进入loading状态 | boolean | false | | loadingText | 组件进入loading状态时，显示的loading文字 | string | Loading... | | disabled | 组件是否禁用 | boolean | false | | readonly | 组件是否只读 | boolean | false | | static | 组件以静态方式渲染 | boolean | false | | delay | 滑动动画delay时间，单位毫秒 | number | 300 | | beforeChange | 开关切换前执行的函数，可返回一个Promise对象，或者返回一个boolean类型的值；当返回值是true或者返回的Promiseresolve时，才会执行切换，否则不执行切换 | function | | | onText | 打开状态下显示的文字 | string | ON | | onValue | 打开状态对应的值 | any | true | | onColor | 打开状态开关颜色 | string | green | | offText | 关闭状态下显示的文字 | string | OFF | | offValue | 关闭状态对应的值 | any | false | | offColor | 关闭状态开关颜色 | string | red |

Methods

switchOn,switchOff,switchToggle,destroy

Events

change,input