背景
项目是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