layuiswitch开关详解

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

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.2. 状态提示

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

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});
  });
  
});

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');
  
});

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