前端框架LayUI使用记录

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

一、LayUI前端框架

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

二、使用引入

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元素，并隐藏

2.1 日期组件

// 日期组件可以在layui中使用，也可以作为组件使用
// layui中使用


// 单独作为组件