iswitch-core

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