vue项目中使用layui

背景

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

<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

  • 2
    点赞
  • 23
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值