前端开发（layui框架）

Posted 2022-08-23 嵌入式-老费

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端开发（layui框架）相关的知识，希望对你有一定的参考价值。

写软件使用成熟的框架，这是很常见的事情。之前一直以为前端开发都是从0到1开发的，后来发现也不是。最早用bootstrap，以为前端只是一些美化的工作，等到后来学习layui，发现框架也可以实现前后端的数据交互，只要符合前端的格式要求就好了。layui就是这样一个框架。

1、layui下载

建议大家直接在github上查看，

GitHub - layui/layui: 一套遵循原生态开发模式的 Web UI 组件库，采用自身轻量级模块化规范，易上手，可以更简单快速地构建网页界面。一套遵循原生态开发模式的 Web UI 组件库，采用自身轻量级模块化规范，易上手，可以更简单快速地构建网页界面。 - GitHub - layui/layui: 一套遵循原生态开发模式的 Web UI 组件库，采用自身轻量级模块化规范，易上手，可以更简单快速地构建网页界面。https://github.com/layui/layui

2、学习教程

学习的教程很多，一方面是在线的网站，另外一方面是作者提供的example示例，

Layui 开发使用文档 - 入门指南https://layui.itze.cn/doc/index.html

3、最简单的demo程序

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>开始使用 Layui</title>
    <link href="./layui/css/layui.css" rel="stylesheet">
  </head>
  <body>
    <!-- HTML -->
     
    <script src="./layui/layui.js"></script>
    <script>
    // 使用组件
    layui.use(['layer', 'form'], function()
      var layer = layui.layer;
      var form = layui.form;
      
      // 欢迎语
      layer.msg('Hello World');
    );
    </script> 
  </body>
</html>

如代码所示，这里面最重要的就是两个部分。第一个部分是引入layui.css文件，另外一个部分是layui.js部分。前者是为了美化用，后者是为了交互使用。

按照上面这个代码所示，如果没有什么意外的，你打开网页，会看到一个弹窗，

4、简单控件美化

layui支持的控件美化还是蛮多的。一般的导航、按钮、表单、表格、进度条、图标和时间线，这些都不是问题。使用者所要做的就是添加一个class选项就好了。

<button type="button" class="layui-btn">一个标准的按钮</button>

5、复杂控件的美化

如果是比较复杂的控件，那就需要写一点代码了。不过放心，也不是很多，就拿date举例，因为涉及到laydate模块，所以需要js先引用下，源代码是这样的，

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layDate快速使用</title>
  <link rel="stylesheet" href="../src/css/layui.css" media="all">
</head>
<body>
 
<div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->
  <input type="text" class="layui-input" id="test1">
</div>
 
<script src="../src/layui.js"></script>
<script>
layui.use('laydate', function()
  var laydate = layui.laydate;
  
  //执行一个laydate实例
  laydate.render(
    elem: '#test1' //指定元素
  );
);
</script>
</body>
</html>

这样，打开网页后，你就会看到这样的结果，

当然，这里面的属性是可以不停修改的，比如可以设置年、月、日、时、分、秒，

//年选择器
laydate.render( 
  elem: '#test1'
  ,type: 'year'
);
 
//年月选择器
laydate.render( 
  elem: '#test1'
  ,type: 'month'
);
 
//日期选择器
laydate.render( 
  elem: '#test1'
  //,type: 'date' //默认，可不填
);
 
//时间选择器
laydate.render( 
  elem: '#test1'
  ,type: 'time'
);
 
//日期时间选择器
laydate.render( 
  elem: '#test1'
  ,type: 'datetime'
);

如果你愿意，想设置一下时间区间，只需要增加一个range:true选项就好，

当然，等到时间选择好后，就可以添加自己的回调函数了，

<script>
layui.use('laydate', function()
  var laydate = layui.laydate;
  
  //执行一个laydate实例
  laydate.render(
    elem: '#test1' //指定元素
	,done: function(value, date)
		console.log("date=====>",date);
		console.log("value====>",value);
    
  );
);
</script>

不出意外，在console窗口可以看到这样的内容打印，

其他的控件基本都是这样的操作方法，大家可以去试一试。

以上是关于前端开发（layui框架）的主要内容，如果未能解决你的问题，请参考以下文章