layui常用代码

munchmills

已于 2023-07-28 15:22:56 修改

阅读量427

点赞数

分类专栏： layui 文章标签： layui vue.js 前端

于 2023-02-21 21:44:12 首次发布

本文链接：https://blog.csdn.net/munchmills/article/details/129150943

版权

layui 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章详细介绍了layui框架中用于消息提示的各种方法，包括基本的msg提示、确认框、表单验证、开关状态处理以及动态加载内容。同时，提到了图片和文件上传的实现，以及如何处理表单内的select选择器和checkbox的值。此外，还展示了如何在layuiadmin管理内页中获取和使用数据。

摘要由CSDN通过智能技术生成

layui.msg



layer.msg('只想弱弱提示');

layer.msg('有表情地提示', {icon: 6}); 

layer.msg('正在提交请稍候。。。', {icon: 16,time: 100000,shade : [0.5 , '#000' , true]});

layer.msg('关闭后想做些什么', function(){
  //do something
}); 

layer.msg('同上', {
  icon: 1,
  time: 2000 //2秒关闭（如果不配置，默认是3秒）
}, function(){
  //do something
  layui.table.reload('LAY-user-manage'); //重载表格
  layer.close(index); //执行关闭 
});   

layer.open({
    skin:'demo-class',//设置弹框样式
    area:['260px','160px'],//弹框的大小（宽，高），默认：'auto'
    title:['信息提示框','15px'],//弹框的标题
    content: '恭喜你通过了英语四级考试'//显示的消息内容
})

layer.confirm


layer.confirm('纳尼？', {
  title: "操作提示",
  icon: 0,
  btn: ['按钮一'],
}, function(index, layero){
  //按钮【按钮一】的回调
});

layui 二次密码验证


<input type="password" name="password"  lay-verify="required"   class="layui-input">
<input type="password" lay-verify="required|confirmPass" class="layui-input">

form.verify({
    confirmPass:function(value){
        if($('input[name=password]').val() !== value)
            return '两次密码输入不一致！';
    }
});

layui 开关问题


<input type="checkbox" name="xd1" id="xd1" lay-skin="switch" lay-text="开|关"  {{ d.user_site== 0 ? 'checked' :'' }} value={{d.user_id}}  lay-filter="yes" > 

  form.on('switch(yes)', function(data){

    console.log(data.value); //得到定义值
    console.log(data.elem.checked); //开关是否开启，true或者false

});

layui if


{{# if (d.is_del=== 0) { }}
     <span>男</span>
{{# } else if(d.is_del=== 1) { }}
    <span>女</span>
{{# } else { }}
    <span>不男不女</span>
{{# } }}

layui each


<script type="text/html" template lay-url="接口" lay-done="layui.data.done(d);" >
    
{{# layui.each(d.data, function(index, item){ }}

    {{  item.classification_name }}

{{# }); }}

    
</script>

layui onlcik


    window.showmy =function(id){
        
       layer.msg(id);
        
    }

特别注意：如果上面页面里含有script 引用会失效，需要放到头部去执行！

layui 上传图片


        <div class="layui-form-item">
            <label class="layui-form-label">产品图片</label>
            <div class="layui-input-block">
                 <div class="layui-upload">
                      <button type="button" class="layui-btn layui-btn-warm" id="test-upload-normal">上传图片</button>
                      <div class="layui-upload-list">
                        <img class="layui-upload-img" id="test-upload-normal-img">
                        <p id="test-upload-demoText" ></p>
                      </div>
                  </div>
            </div>    
        </div>    

 <script>
  layui.use(['admin','form', 'upload'], function(){
    var $ = layui.jquery,upload = layui.upload;
    
  
    //普通图片上传
    var uploadInst = upload.render({
      elem: '#test-upload-normal',
      url: '/admin.product/insertImg',
      before: function(obj){
        //预读本地文件示例，不支持ie8
        obj.preview(function(index, file, result){
          $('#test-upload-normal-img').attr('src', result); //图片链接（base64）
        });
      },done: function(res){
            console.log(res);
            // let url=layui.setter.homeUrl.url+res['res'];
            // $('#test-upload-normal-img').attr('src', url); 
            
            $('input[name="banner_img"]').val(res['res']);
            $('#test-upload-normal-img').show();
       
      },error: function(){
        //演示失败状态，并实现重传
        var demoText = $('#test-upload-demoText');
        demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
        demoText.find('.demo-reload').on('click', function(){
          uploadInst.upload();
        });
      }
    });
   
  
  });
  </script>

layui动态增加select


//html
    <div class="layui-form-item">
      <label class="layui-form-label">选择品类</label>
      <div class="layui-input-inline">
        <select name="product_pid" id="layui-select" lay-filter="product_pid">
    


        </select>
      </div>
      <div class="layui-form-mid layui-word-aux">请填写关联品类</div>
    </div>


<script type="text/html" template lay-url="select接口" lay-done="layui.data.done(d);" ></script>
  <script>
  layui.use(['admin','form', 'upload'], function(){
    var $ = layui.jquery,upload = layui.upload,admin = layui.admin,view = layui.view ,table = layui.table,form = layui.form;;
    
     form.render('select');
     form.render(null, 'layuiadmin-form-addproduct'); 
     
     
       layui.data.done = function(d){
           var selecTextone='';
           for(var i=0;i<d.data.length;i++){
                selecTextone += '<option value="' + d.data[i].classification_id + '">' + d.data[i].classification_name + '</option>';
           };

            $("#layui-select").html(selecTextone);
            form.render(); 
       };
 });
</script>

layuiadmin拿checkbox的值


var checkStatus = table.checkStatus('LAY-order-pay'),checkData = checkStatus.data;

layuiadmin 管理内页再请求新数据方法




<script type="text/html" template lay-done="layui.data.sendParams(d.params)"></script>



<script>
layui.data.sendParams = function (params) { 
    
    
    layui.use(['admin', 'form',], function(){
        
        var $ = layui.$,admin = layui.admin,view = layui.view ,form = layui.form;
      
        form.render(null, 'layuiadmin-form-room'); 

          $.ajax({
              url: layui.setter.homeUrl.url+'/admin.message/getAuthor?access='+params.message_access+'&id='+params.message_pid+'&message_id='+params.message_id,
              method:'get',
              success:function(res){

        
                       $( "input[name='nickname']").attr("value",res.data.nickname);
                       $( "input[name='weixin_tel']").attr("value",res.data.weixin_tel);
                       $( "input[name='create_time']").attr("value",res.data.create_time);
                                    
                        
                }
            });
            
    
    
    });
    
    
}
</script>

跳转取值


 lay-href="/user/user/relatives/id={{d.weixin_id}}/name={{d.nickname}}"

    最优：var router = layui.router();router.search.id



      admin.on('hash(id)',function(router){
          
          console.log(router.search.id);
          console.log(router.search.name);
      });

layui select 选择器事件


 form.on("select(province)",function(data){
     
     console.log(data.value);
     
     
});

            <select name="usermember_upgradation" id="usermember_upgradation" lay-filter="province">
                    <option value="4">审核通过</option>
                    <option value="3">拒绝通过</option>
             </select>

layui 上传文件

   layui.use('upload', function() {
	   var upload = layui.upload;

	   // 执行实例
	   var uploadInst = upload.render({
		   elem : '#test-upload-normal',
		   url : layui.setter.homeUrl.url+'/admin.Import/insertExcel',
		   accept : 'file',
		   size : 500000,
		   done : function(res, index, upload) {
			  console.log(res);
		   },
		   error : function() {
			   // 请求异常回调
		   }
	   });
   });

layuiadmin token