专栏首页vue的实战在项目中使用layUI

在项目中使用layUI

layUI文档

项目结构.png

  • 下载官方的压缩包,解压之后把layui文件放到项目里面。
  • 在index.html 文件中引入js和css 文件。
  • 这里引入./layui/css/layui.css 和 ./layui/layui.all.js。 jquery可以不引用。
  • 特别注意: var layer = layui.layer ,form = layui.form ,laydate = layui.laydate ,laypage = layui.laypage;
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
</head>
<body>
<input type="button" value="按钮" id="btn">
<input type="text" class="layui-input" id="test1">
<div id="demo7"></div>
<script src="./layui/jquery-2.0.3.js"></script>
<script src="./layui/layui.all.js"></script>
<script type="text/javascript">

    var stimer = ""
    //由于模块都一次性加载,因此不用执行 layui.use() 来加载对应模块,直接使用即可:
    ;!function(){
        var layer = layui.layer
            ,form = layui.form
            ,laydate  = layui.laydate
            ,laypage = layui.laypage;
        laydate.render({
            elem: '#test1'
            ,done: function(value, date, endDate){
                stimer = value;
                console.log(stimer);

                // console.log(value); //得到日期生成的值,如:2017-08-18
                // console.log(date); //得到日期时间对象:{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
                // console.log(endDate); //得结束的日期时间对象,开启范围选择(range: true)才会返回。对象成员同上。
            }
        });
        laypage.render({
            elem: 'demo7'
            ,count: 100
            ,layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
            ,jump: function(obj){
                console.log(obj)
            }
        });
    }();
</script>
</body>
</html>

报错.png

发现以上问题就是没有定义这个变量laypage。 在上面定义就可以了。

layui的页面.png

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 汤道生:产业互联网时代,安全成为CEO的一把手工程

    ? “产业互联网时代的安全不再只是CTO、CIO们的工作范畴,也需要CEO的战略关注,成为CEO的一把手工程。”在7月30日召开的第五届互联网安全领袖峰会(C...

    腾讯安全
  • 重磅嘉宾揭秘!亚马逊CTO将做客CSS 2019,与腾讯汤道生尖峰对话

    数字化转型的产业浪潮下,企业的核心关注应该是什么?效率?转变?还是收益? 亚马逊CTO Werner Vogels告诉你: “ 最需要关注的是云上安全!这位全...

    腾讯安全
  • 炫酷CSS3垂直时间轴特效开源库【合集】

    这是一款炫酷css3垂直时间轴特效。该css3垂直时间轴特效通过伪元素来制作炫酷的半圆形,所有半圆形连接为一条曲线路径,组成时间轴的线路。兼容PC端和移动端。

    用户5997198
  • 哪些拿住我面试题

    MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑;...

    李才哥
  • 前端工程化实践总结 |

    | 导语 本文主要介绍在前端工程化的一些探索和实践,结合移动端的基础库重构和UI组件库开发这两个项目详细介绍工程化方案 。

    前端迷
  • 【代码艺术】带视觉特效的js密码强度检测开源库

    这是一款带视觉特效的js密码强度检测特效。该特效在用户输入密码的时候,随着密码强度的增强,旁边的图像会越来越清晰或越来越模糊,通过图像的变化来提示用户密码的强度...

    用户5997198
  • 定了!CSS 2019将于7月30日在京举办,聚焦产业互联网时代的安全之道

    产业互联网时代,企业如何应对全新的安全挑战?安全如何助力企业真正地实现降本增效?——来CSS 2019,解码产业互联网时代的安全之道。 2019年7月30日-...

    腾讯安全
  • 从零开始配置webpack(基于webpack 4 和 babel 7版本)

    webpack启动后会从 Entry 里配置的 Module 开始递归解析 Entry 依赖的所有Module.每找到一个Module,就会根据配置的Loade...

    胡哥有话说
  • 六个行业小故事,带你看见安全的力量

    ? 始于一行代码,却不止于停留虚拟世界 网络安全除了抵御攻击和查“漏”补缺之外 还可以做的更多—— 一起来看看下面这五个行业的小故事 带你感受安全的力量 零...

    腾讯安全
  • selenium 之百度搜索,结果列表翻页查询

    driver.find_element_by_id('kw1').send_keys('selenium')

    授客

扫码关注云+社区

领取腾讯云代金券