1,,vue安装layui:
安装比较粗暴,直接下载官网的压缩包放在static文件夹下,在index中全局引用。
2,如果要使用layui一定要看文档,当然你要是没耐心可以边写边看文档,文档很详细。如果你用vue的话建议不要用layui。
遇到的问题:
(1) form中的radio,select,checkbox不能及时渲染;
使用form.render();
(2)表单复选框中的全选:
a,通过“lay-filter”将复选框分组:
<div class="layui-input-block">
<input type="checkbox" name="plat" value="0" lay-skin="primary" lay-filter="plat" title="全部">
<input type="checkbox" name="plat" value="1" lay-skin="primary" lay-filter="plat" title="iOS">
<input type="checkbox" name="plat" value="2" lay-skin="primary" lay-filter="plat" title="android">
<input type="checkbox" name="plat" value="3" lay-skin="primary" lay-filter="plat" title="其他">
</div>
b. 结合layui定义的复选框事件
1 form.on('checkbox(filter)', function(data){ 2 3 var child = $(data.elem).siblings('input[type="checkbox"]'); //当前点击按钮的兄弟节点 4 5 If(data.elem.checked){ //是否被选中,true或者false 6 7 if (data.value == "0") { //当value==0是是全选状态 8 9 message = []; 10 11 child.each(function (index, item) { 12 13 item.checked = data.elem.checked; 14 15 message.push(item.value); 16 17 }); 18 19 } else { 20 21 message.push(data.value); 22 23 if (message.length == num) { 24 25 $(data.elem).parent().children("input").get(0).checked = true; 26 27 } 28 29 } 30 31 } 32 33 });
(3)复选框回显:
Initialize('sex', [1,2,3], 3);
1 Initialize(type, message, count) { 2 3 layui.use('form', function () { 4 5 Let item = []; 6 7 var form = layui.form, 8 9 $ = layui.jquery; 10 11 // type 为input 的name值 12 13 $('input[name=' + type + ']').each(function () { 14 15 if (message[0] == 0 || message.length == count) { 16 17 this.checked = true; 18 19 itme.push(this.value); 20 21 } else { 22 23 for (let j = 0, l = message; j < l.length; j++) { 24 25 if (this.value == l[j]) { 26 27 this.checked = true; 28 29 itme.push(this.value); 30 31 } 32 33 } 34 35 } 36 37 form.render(); 38 39 }); 40 41 }); 42 43 Return item; 44 45 },