前端框架LayUI使用记录

工作中，需要快速开发，搭建网站。需要各种前端框架，比如说layUI、eChars、element等。之前使用较少，现做一个学习记录。

一、LayUI前端框架

1. layer 弹出层组件效果
   --layui的弹层模块可以单独使用layer，依赖Jquery
2. layDate 日期选择器组件
   --layui的日期组件可单独使用laydate

二、使用引入

    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="layui/layui.js"></script>
    <script>
        // 将文件下载到本地，在文件中引用。
        window.onload = function () {
            var oBtn = document.getElementById('btn');
            oBtn.onclick = function () {
            // 调用layer对象的confirm()方法，传入信息，按钮，函数
                layer.confirm('明天放假吗？',{
                    btn:['放假','不放'] //按钮
                },function(){
                // layer.msg 一个弹层
                    layer.msg('努力工作，将宝贵的时间，花在重要的地方',{icon:1});
                },function(){
                    layer.msg('继续加油，青春易逝，要在30岁收入更多',{
                        time: 2000,
                        btn: ['加油','放弃']
                    })
                })
            }
        }
    </script> 

1.1 弹层

// layer提供了5种层类型。可传入的值有：0（信息框，默认） 1（页面层） 2（iframe层） 3（加载层） 4（tips层）。 若你采用layer.open({type: 1})方式调用，则type为必填项（信息框除外）

// 1、信息框-弹层
layer.msg('弹层信息');
// 2、信息框-可选弹层
layer.confirm('提示信息',{
        btn:['ok','no']      //选择信息
    },function(){
    // 第一个执行
    }, function(){
    // 第二个执行
});
// 3、提示信息，一般用于表单
layer.tips('提示信息','#div1',{ // 提示信息  依附于哪个元素
    tips:[1,'#3595CC'],  // 样式
    time:2000  //显示时间
})
// 4、输入弹层
layer.prompt('请输入密钥')
// 5、弹层，如果是iframe层
layui.use('layer', function(){
    layerPage = layui.layer;
    var = _name = admin;
    iframeObjectIndex = layerPage.open({
        title: 'newTitle', // 弹框标题
        type: 2, // 弹框类型，一般为2
        offset: 'auto', // 弹框坐标
        area:['1000px', '500px'], // 弹框大小，会默认上下左右居中
        content: 'test.html?name='+ _name; // 跳转页 + 参数
    })
})
// 6、弹层，如果是页面元素
// 在body外边写一个dom元素，并隐藏
<div id="lay1" style="display: none;"></div>
<script>
    layui.use('layer', function(){
        layer.open({
            title: 'newTitle', // 弹框标题
            type: 1, // 弹框类型
            closeBtn: 1, // 关闭按钮，0不显示，1/2显示
            btn: ['yes', 'no'], // 按钮
            offset: 'auto', // 弹框坐标
            area: ['400px', '200px'], // 弹框大小
            content: $('#lay1'), // 弹框显示内容
            yes: function() {
                // 第一个按钮回调
            },
            btn2: function() {
                // 第二个按钮回调
            },
            cancel: function() {
                // 右上角关闭回调
            }
        })
    })
</script>

2.1 日期组件

// 日期组件可以在layui中使用，也可以作为组件使用
// layui中使用
<script src="/static/build/layui.js"></script>
<script>
layui.use('laydate', function(){
  var laydate = layui.laydate;
  
  //执行一个laydate实例
  laydate.render({
    elem: '#test1' //指定元素
  });
});
</script>
// 单独作为组件
<script src="laydate.js"></script>
<script>
//执行一个laydate实例
laydate.render({
  elem: '#test1' //指定元素
});
</script>