layuiswitch 是一个基于 layui 框架封装的开关组件，简单易用，同时也有很多丰富的功能特性。本文将从开关状态、样式、事件、API 等多个方面进行介绍和阐述。

一、状态篇

1.1. 基本状态

layuiswitch 可以实现两种状态，开启和关闭。在定义 layuiswitch 时，通过 checked 属性来指定初始状态，它的值为 true 时表示开启状态，值为 false 时表示关闭状态。

layui.use('form', function(){
  var form = layui.form;
  //监听指定开关
  form.on('switch(switchTest)', function(data){
    var checked = data.elem.checked;
    layer.msg("Switch："+checked, {icon: 6});
  });
});

1.2. 禁用状态

常常情况下，我们并不希望用户在某种情况下进行操作，这时可以设置 layuiswitch 为禁用状态，禁止操作。

layui.use('form', function(){
  var form = layui.form;
  //禁用switch
  form.switch('switchTest', null, function(res){
    layer.msg('禁用状态赋值：'+ res, {icon: 5});
  });
});

二、样式篇

2.1. 主题样式

layuiswitch 提供了多种主题样式配置，可以实现不同场景下的样式风格。可以通过 lay-skin 配置主题，目前支持 primary、blue、green、cyan、orange、red、molv 七种主题，也可以自定义样式。

<div>
  <input type="checkbox" name="switch" lay-skin="primary" title="开关" checked="">
  <input type="checkbox" name="switch" lay-skin="blue" title="开关" checked="">
  <input type="checkbox" name="switch" lay-skin="green" title="开关" checked="">
  <input type="checkbox" name="switch" lay-skin="cyan" title="开关" checked="">
  <input type="checkbox" name="switch" lay-skin="orange" title="开关" checked="">
  <input type="checkbox" name="switch" lay-skin="red" title="开关" checked="">
  <input type="checkbox" name="switch" lay-skin="molv" title="开关" checked="">
  <input type="checkbox" name="switch" lay-skin="switchTest" title="开关" checked>
</div>

2.2. 状态提示

在通常情况下，layuiswitch 的开启和关闭状态是没有标识的，用户需要手动将状态存储，并且在显示时需要给予提示，可以通过设置 lay-text 来实现切换后的提示文本展示。

<div>
  <input type="checkbox" name="open" lay-skin="switchTest" lay-filter="switchTest" lay-text="开|关">
</div>

三、事件篇

3.1. 开启关闭事件

使用 layuiswitch 时，我们可能需要在开启和关闭时进行一些操作，这时可以监听 lay-filter 对应的事件，并获取到开关的状态。

layui.use('form', function(){
  var form = layui.form;
  //监听指定开关
  form.on('switch(switchTest)', function(data){
    var checked = data.elem.checked;
    layer.msg("Switch："+checked, {icon: 6});
  });
});

3.2. 加载完成事件

当 layuiswitch 加载完成后，我们也可以捕捉到这个事件，以便我们可以在需要时进行一些操作。在 layui.form 事件中使用 switch() 即可。

layui.use('form', function(){
  var form = layui.form;
  //监听指定开关
  form.switch('switchTest', null, function(res){
    layer.msg('加载完成', {icon: 1});
  });
});

四、API篇

4.1. 开启关闭方法

通过 API，我们可以控制 layuiswitch 开关的开启和关闭，使用 switch 方法，传入 name 和 value 即可。

layui.use('form', function(){
  var form = layui.form;
  //控制开关
  form.switch('switchTest', false, null);
});

4.2. 获取开关状态

通过 API，我们也可以获取 layuiswitch 开关目前的状态，使用 getChecked()。

layui.use('form', function(){
  var form = layui.form;
  //获取状态
  var checked = form.getChecked('switchTest');
});

4.3. 自定义开关

layuiswitch 还支持自定义开关的 display 值，通过调整 lay-skin 属性值可以实现不同定制化的开关样式。

<div>
  <input type="checkbox" name="switch" lay-skin="switchTest" lay-text="ON|OFF" lay-filter="switchTest" checked="">
  <br>
  <input type="checkbox" name="switch" lay-skin="switchTest" lay-text="是|否" checked="">
  <br>
  <input type="checkbox" name="switch" lay-skin="switchTest_1" title="外观" lay-filter="switchDemo" checked>
</div>

4.4. 给开关赋值

layuiswitch 可以直接赋值，当输入框值变化时，开关会响应变化。

layui.use('form', function(){
  var form = layui.form;
  //直接赋值
  form.val('test', {
    "switchDemo": true
  });
});

五、总结篇

本文详细介绍了 layuiswitch 开关组件的多种使用场景，包括开关状态、样式、事件、API 等方面。通过学习本文，大家可以掌握更多关于 layuiswitch 的使用技巧，进一步丰富自身的前端技能。

layuiswitch开关详解