开玩笑模拟拨动开关

这是一个用 JavaScript 实现的开关控件，可以通过单击或拨动实现开关的切换。在这个开关控件中，我们可以自定义开关的样式、默认状态和触发事件等。

功能介绍

• 通过单击或拨动来控制开关的状态
• 支持自定义样式
• 支持设置开关的默认状态
• 支持注册事件监听器，实现开关状态改变时的动作

如何使用

安装方式

npm install switch-control

引入方式

import SwitchControl from 'switch-control';

const switchControl = new SwitchControl({
  el: document.getElementById('switch'),
  // 其他选项
});

// 启用
switchControl.enable();

// 禁用
switchControl.disable();

选项列表

| 选项 | 类型 | 默认值 | 说明 | | ------------- | -------- | ------ | --------------------- | | el | Element | | 开关控件的父元素 | | onText | String | ON | 开关打开时的文本 | | offText | String | OFF | 开关关闭时的文本 | | width | Number | 100 | 开关的宽度 | | height | Number | 40 | 开关的高度 | | borderRadius | Number | 20 | 圆角半径 | | borderWidth | Number | 2 | 边框宽度 | | color | String | #4d4d4d | 开关背景颜色 | | textColor | String | #fff | 开关文本颜色 | | activeColor | String | #5cb85c | 开关打开时的背景颜色 | | inactiveColor | String | #d9534f | 开关关闭时的背景颜色 |

方法列表

| 方法名 | 说明 | | ------ | -------------------- | | enable | 启用开关控件 | | disable | 禁用开关控件 | | toggle | 切换开关状态 | | on | 注册状态打开的事件 | | off | 注册状态关闭的事件 | | change | 注册状态改变的事件 |

事件列表

| 事件名 | 触发时刻 | 回调参数 | | ---------- | -------------------------------------------------- | -------- | | turnon | 开关打开时触发 | 无 | | turnoff | 开关关闭时触发 | 无 | | changestate | 开关状态改变时触发，参数为当前状态（on 或 off） | 当前状态 |

示例代码

<div id="switch"></div>

import SwitchControl from 'switch-control';

const switchControl = new SwitchControl({
  el: document.getElementById('switch'),
  onText: '启用',
  offText: '禁用',
  width: 120,
  height: 36,
  borderRadius: 18,
  borderWidth: 2,
  color: '#e8e8e8',
  textColor: '#333',
  activeColor: '#5cb85c',
  inactiveColor: '#d9534f',
});

switchControl.on('turnon', () => {
  console.log('开关打开了');
});

switchControl.on('turnoff', () => {
  console.log('开关关闭了');
});

switchControl.on('changestate', (state) => {
  console.log(`开关状态改变了，当前状态为 ${state}`);
});

最后话

此开关控件仅用于学习交流，欢迎提出意见和建议。