阅读 503

Layui的使用

在这里主要记录一些本人在使用layui与后端进行交互时的一些相关操作。

如果本文章帮助到了您,可以点个赞,有问题也可以在评论区留言。我看到后会统一回复的。

在使用之前,记得自己先引入layui相关的模块。

Layui使用ajax请求

用法如下:

<button class="layui-btn layui-btn-sm layui-bg-orange" onclick="dele(这里传你要删除的id);">删除</button>
复制代码

js代码如下:

<script>
      function dele(id){
        layui.use('layer',function(){
            var layer = layui.layer;
              layer.msg('你确定删除么?', {
              time: 2000 ,//2秒自动关闭
              btn: ['确定', '取消'],
              yes: function(index){
                  console.log(id);
                  $.ajax({
                      url:"ajax地扯",
                      data:{'id':id},
                      type:"Post",
                      dataType:"json",
                      success:function(data){
                        console.log(data);
                          layer.msg(data.msg);
                          location.reload(); //删除成功后再刷新
                      },
                      error:function(data){
                          $.messager.alert('错误',data.msg);
                      }
                  });
                  layer.close(index);
              }
          });
        });
    };
  </script>
复制代码

效果图如下:

layer.msg的使用

js代码如下:

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


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


layer.msg('关闭后想做些什么呢', function(){
  //自动执行这里面的内容
}); 

// 第三种
layer.msg('同上', {
  icon: 1,
  time: 2000 //2秒关闭(如果不配置,默认是3秒)
}, function(){
  //2秒后自动执行这里面的内容
}); 
复制代码

layui弹窗的使用

关键代码如下:

var truelogin = "admin";
var truepwd = "123456";
layui.use('layer', function () {
        var msgalert = '默认账号:' + truelogin + '<br/> 默认密码:' + truepwd;
        var index = layer.alert(msgalert, {
            icon: 6, //icon数字参数
            time: 2000, //时间(默认是毫秒),2000为 2秒
            offset: 't', //t为顶部,b为底部,m为中间,r为右侧,l为左侧
            closeBtn: 0, //是否显示弹出窗右上角的关闭按钮 0为不显示 ,1为显示。
            title: '友情提示', //弹出窗的标题
            btn: [], //弹出窗的底部按钮
            anim: 2,
            shade: 0
        });
        layer.style(index, {
            color: '#777'
        });
    });
复制代码

Layui弹窗加载页面

用法如下:

<div class="layui-input-inline add_admin" style="width:95px;">
    <a class="layui-btn layui-btn-sm" href="javascript:void(0);">
      <i class="layui-icon">&#xe608;</i>添加管理员
    </a>
</div>
复制代码

js代码如下:

<script>
    layui.use(['element','jquery','layer'], function(){
        var element = layui.element;
        var $ = layui.jquery;
        var layer = layui.layer;
        $('.add_admin').click(function () {
            layer.open({
                type: 2,
                title:'添加管理员',
                skin: 'layui-layer-rim', //加上边框
                maxmin: true, //开启最大化最小化按钮
                area: ['600px', '400px'],
                content:"加载的页面地扯,比如:http://www.baidu.com"
            });
        });
        
    });
</script>
复制代码

layui开关switch的使用

主要应用场景:

  • 产品中的某个字段:上架或者下架。比如(1 代表上架,0 代表下架
  • 某些状态:只有 0 或 1 的这种情况。
  • 还有就是显示隐藏了。

用法如下:

<input type="checkbox" name="switch" lay-skin="switch" lay-text="正常|关闭" lay-filter="switchTest" value="1">
    <div class="layui-unselect layui-form-switch layui-form-onswitch" lay-skin="_switch">
        <em>ON</em><i></i>
    </div>
复制代码

js代码如下:

<script>
// 状态监听开关
        layui.use(['form'], function () {
            var form = layui.form
                , layer = layui.layer
            //监听指定开关
            form.on('switch(switchTest)', function (data) {
                if (this.checked) {
                    layer.msg('开关checked:' + (this.checked ? 'true' : 'false'), {
                        offset: '6px'
                    });
                    layer.tips('温馨提示:请注意开关状态的文字可以随意定义,而不仅 仅是ON|OFF', data.othis)
                } else {
                    layer.msg('开关: 关掉了', {
                        offset: '6px'
                    });
                }
                //do some ajax opeartiopns;
            });
        });
</script>
复制代码

效果图如下: