发布于2022-08-03 07:00 阅读(1800) 评论(0) 点赞(11) 收藏(2)
项目是vue+element UI
从www.layuiweb.com或https://gitee.com/sentsin/layui/tree/master/下载
复制dist文件夹到项目的public目录下重命名为layui
在项目中安装layui-src依赖
yarn add layui-src | npm install layui-src
在 node_modules 下找到 layui-src 下的 build 文件夹复制到项目的public目录下重命名为layui
或者
<!--引入layui-->
<link rel=
"stylesheet"
href=
"<%= BASE_URL %>/layui/css/layui.css"
>
<script type=
"text/javascript"
src=
"<%= BASE_URL %>/layui/layui.js"
></script>
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
作者:Bhbvhbbgg
链接:http://www.qianduanheidong.com/blog/article/381434/76652076751b296cf286/
来源:前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容:(最多支持255个字符)
---无人问津也好,技不如人也罢,你都要试着安静下来,去做自己该做的事,而不是让内心的烦躁、焦虑,坏掉你本来就不多的热情和定力
Copyright © 2018-2021 前端黑洞网 All Rights Reserved 版权所有,并保留所有权利。 京ICP备18063182号-3
投诉与举报,广告合作请联系vgs_info@163.com或QQ3083709327
免责声明:网站文章均由用户上传,仅供读者学习交流使用,禁止用做商业用途。若文章涉及色情,反动,侵权等违法信息,请向我们举报,一经核实我们会立即删除!