layui switch组件使用总结

layui switch组件使用总结：
1.引入 layui.js 或layui.all.js文件。
2.放入组件的标签：可以用经过简化的：
<div class="layui-form" >
          
                <input  type="checkbox" :id="item.Id" @click.stop="clickMe" name="switch" lay-skin="switch" lay-filter="switchTest" lay-text="ON|OFF"/>
                 
</div>
可以设置样式： .layui-form-switch 来调整大小等样式
3.初始化组件：这个过程需要在vue的updated生命周期中完成。


 //vue生命周期：数据发生改变后
    updated: function () {
        layui.use([‘form‘], function () {
            //加载layui的表单组件样式
            form.render();
        })
    }
4.//组件的事件可以写在初始化中，也可以写在jq的onload事件中

layui.use([‘form‘], function () {
        form = layui.form
            , layer = layui.layer
        //监听指定开关
        form.on(‘switch(switchTest)‘, function (data) {
           //获取当前的新闻的id
            var id = data.elem.id;
            //是否置顶
            var is_top = "";
            if (this.checked) {
                is_top = "1";
                //layer.msg(‘开关checked：‘ + (this.checked ? ‘true‘ : ‘false‘), {
                //    offset: ‘6px‘
                //});
                //layer.tips(‘温馨提示：请注意开关状态的文字可以随意定义，而不仅 仅是ON|OFF‘, data.othis)
            } else {
                is_top = "0";
                //layer.msg(‘开关： 关掉了‘, {
                //    offset: ‘6px‘
                //});
            }
            //do some ajax opeartiopns;
            //修改当前的新闻的状态
            var url = "";
            var data = {};
            var res = pub_ajax(url, data);
            //刷新页面
            RefreshData();
        });

其中第3步骤是最关键的，必须在vue的update生命周期中执行组件的render()函数才能显示组件。

layui switch组件使用总结

原文：https://www.cnblogs.com/heiyeyiguoban/p/12460131.html