程序员最近都爱上了这个网站  程序员们快来瞅瞅吧!  it98k网:it98k.com

本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

vue项目中使用layui

发布于2022-08-03 07:00     阅读(1800)     评论(0)     点赞(11)     收藏(2)


背景

项目是vue+element UI

一、引入

第1种方法:

www.layuiweb.comhttps://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

  1. <template>
  2. <div class="container">
  3. <el-input id="date"
  4. placeholder="选择时间"></el-input>
  5. </div>
  6. </template>

2. 初始化DatePicker

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

  1. mounted () {
  2. this.$nextTick(() => {
  3. constlayui = window.layui;
  4. layui.use("laydate", () => {
  5. constlaydate = layui.laydate;
  6. laydate.render({
  7. elem: "#date",
  8. range: "~",
  9. done: (value, date, endDate) => {
  10. console.log(value);//得到日期生成的值,如:2017-08-18
  11. console.log(date);//得到日期时间对象:{year:2017,month:8,date:18,hours:0,minutes:0,seconds:0}
  12. console.log(endDate);//得结束的日期时间对象,开启范围选择(range:true)才会返回。对象成员同上。
  13. }
  14. });
  15. });
  16. });
  17. },

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

  1. data () {
  2. return {
  3. date: null
  4. }
  5. },

 赋给date

  1. done: value => {
  2. this.date = value;
  3. }

 4.修改样式

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

  1. laydate.render({
  2. elem: "#date",
  3. theme: "map",
  4. range: "~",
  5. done: value => {
  6. this.date = value;
  7. }
  8. });

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

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

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

  1. <style lang="less">
  2. .laydate-theme-map.layui-laydate {
  3. color: #fff;
  4. background-color: #282b33;
  5. }
  6. .laydate-theme-map {
  7. .layui-laydate-headeri {
  8. color: #fff;
  9. }
  10. .layui-laydate-headerspan:hover {
  11. color: #53a8ff;
  12. }
  13. .layui-laydate-list {
  14. background-color: #282b33t;
  15. }
  16. .layui-laydate-contentth {
  17. color: #fff;
  18. }
  19. .layui-laydate-content.laydate-day-prev,
  20. .layui-laydate-content.laydate-day-next {
  21. color: #666;
  22. }
  23. .layui-laydate-contenttd {
  24. color: #fff;
  25. }
  26. .layui-laydate-contenttd:hover {
  27. color: #282b33;
  28. }
  29. .layui-this {
  30. background-color: #53a8ff !important;
  31. }
  32. .layui-laydate-contenttd.laydate-selected {
  33. background-color: rgba(83, 168, 255, 0.2) !important;
  34. }
  35. .laydate-footer-btnsspan {
  36. background-color: #282b33;
  37. }
  38. .layui-laydate-footerspan:hover {
  39. color: #fff;
  40. background-color: #53a8ff;
  41. }
  42. }
  43. </style>

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

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

完整代码如下:

  1. <template>
  2. <div class="container">
  3. <el-input id="date"
  4. placeholder="选择时间"></el-input>
  5. </div>
  6. </template>
  7. <script>
  8. export default {
  9. data () {
  10. return {
  11. date: null
  12. }
  13. },
  14. mounted () {
  15. this.$nextTick(() => {
  16. constlayui = window.layui;
  17. layui.use("laydate", () => {
  18. constlaydate = layui.laydate;
  19. laydate.render({
  20. elem: "#date",
  21. theme: "map",//修改样式时使用
  22. range: "~",
  23. done: (value, date, endDate) => {
  24. this.date = value
  25. console.log(value)// 得到日期生成的值,如:2017-08-18
  26. console.log(date)// 得到日期时间对象:{year:2017,month:8,date:18,hours:0,minutes:0,seconds:0}
  27. console.log(endDate)// 得结束的日期时间对象,开启范围选择(range:true)才会返回。对象成员同上。
  28. }
  29. });
  30. });
  31. });
  32. },
  33. beforeDestroy () {
  34. const dom = document.querySelector(".laydate-theme-map");
  35. dom.style.visibility = "hidden";
  36. }
  37. }
  38. </script>
  39. <style lang="less">
  40. .laydate-theme-map.layui-laydate {
  41. color: #fff;
  42. background-color: #282b33;
  43. }
  44. .laydate-theme-map {
  45. .layui-laydate-headeri {
  46. color: #fff;
  47. }
  48. .layui-laydate-headerspan:hover {
  49. color: #53a8ff;
  50. }
  51. .layui-laydate-list {
  52. background-color: #282b33t;
  53. }
  54. .layui-laydate-contentth {
  55. color: #fff;
  56. }
  57. .layui-laydate-content.laydate-day-prev,
  58. .layui-laydate-content.laydate-day-next {
  59. color: #666;
  60. }
  61. .layui-laydate-contenttd {
  62. color: #fff;
  63. }
  64. .layui-laydate-contenttd:hover {
  65. color: #282b33;
  66. }
  67. .layui-this {
  68. background-color: #53a8ff !important;
  69. }
  70. .layui-laydate-contenttd.laydate-selected {
  71. background-color: rgba(83, 168, 255, 0.2) !important;
  72. }
  73. .laydate-footer-btnsspan {
  74. background-color: #282b33;
  75. }
  76. .layui-laydate-footerspan:hover {
  77. color: #fff;
  78. background-color: #53a8ff;
  79. }
  80. }
  81. </style>

 

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




所属网站分类: 技术文章 > 博客

作者:Bhbvhbbgg

链接:http://www.qianduanheidong.com/blog/article/381434/76652076751b296cf286/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

11 0
收藏该文
已收藏

评论内容:(最多支持255个字符)