vue项目中使用layui

背景

项目是vue+element UI

一、引入

第1种方法：

从www.layuiweb.com或https://gitee.com/sentsin/layui/tree/master/下载

复制dist文件夹到项目的public目录下重命名为layui

第2种方法：

在项目中安装layui-src依赖

yarn add layui-src | npm install layui-src

 在 node_modules 下找到 layui-src 下的 build 文件夹复制到项目的public目录下重命名为layui

 二、在index.html引入layui的css和js 

或者

<!--引入layui-->

<link rel="stylesheet" href="<%= BASE_URL %>/layui/css/layui.css">

<script type="text/javascript" src="<%= BASE_URL %>/layui/layui.js"></script>

三、例子-使用（DatePicker）

 1.创建一个vue页面，添加一个input标签，并设置id

<template>
  <div class="container">
    <el-input id="date"
              placeholder="选择时间"></el-input>
  </div>
</template>

2. 初始化DatePicker

需要放在vue的mounted里面，elem绑定元素的id，range参数是时间范围选择器，后面的值为分隔符，done是选择日期后的回调

mounted () {
    this.$nextTick(() => {
      constlayui = window.layui;
      layui.use("laydate", () => {
        constlaydate = layui.laydate;
        laydate.render({
          elem: "#date",
          range: "~",
          done: (value, date, endDate) => {
            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）才会返回。对象成员同上。
          }
        });
      });
    });
  },

3.选择数据处理
因为选择得到的数据不会像元素value那样响应视图，所以在done回调里面把获取的value赋给data的属性，再使用data渲染视图
vue中添加date数据

data () {
    return {
      date: null
    }
  },

 赋给date

done: value => {
            this.date = value;
          }

 4.修改样式

如3中的效果，默认的控件样式不是很理想，需要自己去覆盖样式，有几点需要注意：
a.控件是直接渲染在body标签，所以重写的样式不能放在带scoped的style标签下，如
b.由于上一条原因，写出来的样式是全局样式，在不同的页面设置样式就会互相影响。幸好render支持设置theme属性，设置后组件增加一个class="laydate-theme-xxx"的CSS类

laydate.render({
          elem: "#date",
          theme: "map",
          range: "~",
          done: value => {
            this.date = value;
          }
        });

 c.选择日期的背景色源码中使用了!important，所以用户无法覆盖，可以找到laydate.css中的如下内容，去掉!important

.layui-this{background-color:#009688!important;color:#fff!important}

 我新建了一个没有scoped属性的style标签，修改样式如下：

<style lang="less">
.laydate-theme-map.layui-laydate {
  color: #fff;
  background-color: #282b33;
}
.laydate-theme-map {
  .layui-laydate-headeri {
    color: #fff;
  }
  .layui-laydate-headerspan:hover {
    color: #53a8ff;
  }
  .layui-laydate-list {
    background-color: #282b33t;
  }
  .layui-laydate-contentth {
    color: #fff;
  }
  .layui-laydate-content.laydate-day-prev,
  .layui-laydate-content.laydate-day-next {
    color: #666;
  }
  .layui-laydate-contenttd {
    color: #fff;
  }
  .layui-laydate-contenttd:hover {
    color: #282b33;
  }
  .layui-this {
    background-color: #53a8ff !important;
  }
  .layui-laydate-contenttd.laydate-selected {
    background-color: rgba(83, 168, 255, 0.2) !important;
  }
  .laydate-footer-btnsspan {
    background-color: #282b33;
  }
  .layui-laydate-footerspan:hover {
    color: #fff;
    background-color: #53a8ff;
  }
}
</style>

 5.关闭选择组件
组件处于显示状态时，如果通过前进后退使路由变化时组件不会自动关闭，解决办法如下：

beforeDestroy () {
    const dom = document.querySelector(".laydate-theme-map");
    dom.style.visibility = "hidden";
  }

完整代码如下：

<template>
  <div class="container">
    <el-input id="date"
              placeholder="选择时间"></el-input>
  </div>
</template>
<script>
export default {
  data () {
    return {
      date: null
    }
  },
  mounted () {
    this.$nextTick(() => {
      constlayui = window.layui;
      layui.use("laydate", () => {
        constlaydate = layui.laydate;
        laydate.render({
          elem: "#date",
          theme: "map",//修改样式时使用
          range: "~",
          done: (value, date, endDate) => {
            this.date = value
            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）才会返回。对象成员同上。
          }
        });
      });
    });
  },
  beforeDestroy () {
    const dom = document.querySelector(".laydate-theme-map");
    dom.style.visibility = "hidden";
  }
}
</script>
<style lang="less">
.laydate-theme-map.layui-laydate {
  color: #fff;
  background-color: #282b33;
}
.laydate-theme-map {
  .layui-laydate-headeri {
    color: #fff;
  }
  .layui-laydate-headerspan:hover {
    color: #53a8ff;
  }
  .layui-laydate-list {
    background-color: #282b33t;
  }
  .layui-laydate-contentth {
    color: #fff;
  }
  .layui-laydate-content.laydate-day-prev,
  .layui-laydate-content.laydate-day-next {
    color: #666;
  }
  .layui-laydate-contenttd {
    color: #fff;
  }
  .layui-laydate-contenttd:hover {
    color: #282b33;
  }
  .layui-this {
    background-color: #53a8ff !important;
  }
  .layui-laydate-contenttd.laydate-selected {
    background-color: rgba(83, 168, 255, 0.2) !important;
  }
  .laydate-footer-btnsspan {
    background-color: #282b33;
  }
  .layui-laydate-footerspan:hover {
    color: #fff;
    background-color: #53a8ff;
  }
}
</style>

 

 参考：vue项目中使用layui 作者:神秘网友 发布时间:2021-01-26 15:20:19