layui switch賦值詳解

一、switch簡介

switch組件是layui的一個表單組件，常用於開關狀態的展示和切換，也可以用於用戶許可權的開關等場景。

其中switch狀態只有兩種：開和關，開狀態表示為「on」，關狀態表示為「off」。

layui.use('form', function(){
  var form = layui.form;
 
  //監聽指定開關
  form.on('switch(component-switch-test)', function(data){
    layer.msg('開關checked：'+ (this.checked ? 'true' : 'false'), {
      offset: '6px'
    });
    layer.tips('溫馨提示：請勿隨意切換', data.othis)
  });
});

上述代碼即為使用layui switch組件的示例代碼，其中包含監聽指定開關功能，監聽switch開關狀態變化的操作，以及提示信息的展示。

二、switch賦值方法

1.設置開關狀態默認值

switch組件默認值為「off」，可以通過checked屬性設置默認值為「on」。

<div class="layui-form-item">
  <label class="layui-form-label">默認開關</label>
  <div class="layui-input-block">
    <input type="checkbox" name="switch" lay-skin="switch" checked="">
  </div>
</div>

上述代碼中，通過checked屬性設置默認開關狀態為打開（on）。

2.對switch進行賦值

可以使用jQuery的prop()方法來設置switch組件的狀態，其中true表示開，false表示關。

 <label class="layui-form-label">是否加粗</label>
  <div class="layui-input-block">
    <input id="isBold" type="checkbox" name="bold" lay-skin="switch">
  </div>
 
  <script>
    $().ready(function() {
      var bold = $('#bold');
      bold.prop('checked', true); // 這裡可以設置checked為true，開啟switch
    });
  </script>

上述代碼中，使用jQuery的prop()方法設置switch組件的狀態，以此達到對switch進行賦值的目的。

三、switch組件常用API

1.渲染switch組件

可以使用form.render()方法來對switch組件進行渲染。該方法通常與form.on()方法與下面的代碼一起使用。

layui.use('form', function(){
  var form = layui.form;
 
  //監聽指定開關
  form.on('switch(component-switch-test)', function(data){
    layer.msg('開關checked：'+ (this.checked ? 'true' : 'false'), {
      offset: '6px'
    });
    document.getElementById("demo").innerHTML = this.checked ? 'true' : 'false';
  });
  
  //渲染開關
  form.render('switch');
});

上述代碼中，可以看到除了監聽switch開關的操作外，還有一個渲染開關的操作，這個操作是為了使switch組件得到正常顯示使用的。

2.禁用和啟用switch組件

禁用和啟用switch組件的方法其實就是通過prop(‘disabled’,bool)方法中的bool值進行控制的。當bool為true時，switch組件變為禁用狀態，否則為啟用狀態。

layui.use(['form'], function () {
  var form = layui.form;
  form.on("switch(component-switch-test)", function (data) {
    console.log(data.elem.checked)
  });
  
  //禁用switch組件
  $('input[name="switch"]').prop('disabled', true);
});

上述代碼展示了禁用switch組件的方法，其中通過$(‘input[name=”switch”]’).prop(‘disabled’, true)實現開關的禁用。

3.監聽switch組件的變化

switch組件變化的代碼可以通過監聽switch的change事件來獲取switch的值，比如當switch關閉時，可以通過監聽獲取switch的值時設置一個變數為false。

 layui.use(['form'], function () {
    var form = layui.form;
    form.on("switch(component-switch-test)", function (data) {
        var isChecked = data.elem.checked;
        console.log(isChecked);
        var text = isChecked ? '開啟' : '關閉';
        layer.msg('服務已' + text);
    });
  
    //模擬到達一定條件，再關閉switch的操作
    setTimeout(function(){
        $('input[name="switch"]').click(); // 模擬點擊，關閉switch
        
        // 當開關關閉時
        $('input[name="switch"]').change(function(){
            var isChecked = $(this).prop('checked');
            if(isChecked){
                return false; // 如果開關被選中就不再執行關閉操作
            }else{
                $('input[name="switch"]').prop('checked', false);
                console.log('已關閉switch！');
            }
        })
    },5000)
});

上述代碼中，通過setTimeout()方法讓代碼執行到一定條件時再進行switch關閉操作，同時在switch關閉時通過監聽switch的change事件獲取switch的值。

四、結束語

本文對於layui switch組件的賦值已經做出詳細的闡述，包括switch簡介、switch賦值方法、switch組件常用API等多個方面的描述。讀者朋友在使用layui switch時，可根據本文所述的知識點來進行對應操作，從而更好的使用switch組件。