如何在vue中使用laydate时间插件
本篇文章为大家展示了如何在vue中使用laydate时间插件,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
在vue中使用laydate
在vue组件中npm install laydate,然后在vue组件中直接引入:
importlaydatefrom'laydate'
然后在mounted中调用:
laydate.now();
发现chrome浏览器控制台中报错,laydate is not defined,然后把laydate.js放在静态资源里面引入:
importlaydatefrom'../../static/js/laydate.js'
发现chrome浏览器控制台中依然是报错,laydate is not defined,然后在html入口文件中引入:
<scriptsrc="./src/static/js/laydate.js"></script>
发现chrome浏览器控制台中不报,laydate is not defined,但是又报另外一个错误:require is not defined,查看原码发现是因为laydate.js中在引用css样式表时未定义:require('./need/laydate.css');require('./skins/default/laydate.css');
最后使用laydate打包构建后的文件:dist/laydate/laydate.min.js,把laydate.min.js和css粘贴到src/static/路径下,注意js和css结构不要改变
<scriptsrc="./src/static/laydate/laydate.min.js"></script>
然后在chrome浏览器中成功打印出了laydate.now()的值:2018-10-21
然后使用import方式引入laydate.min.js:
importlaydatefrom'../../static/laydate/laydate.min.js'
chrome控制台里有报错:laydate.now is not a function
原因时laydate.min.js是直接把laydate对象注册到了window上,本身并没有export default laydate出口,所以不能使用这种方式引用,应该使用:
import'../../static/laydate.min.js'
这样引用后,chrome中成功打印laydate.now(); 2018-10-21
或者在入口文件index.html中使用cdn加速方式引入laydate.min.js也是可以的:
<scriptsrc="https://cdn.jsdelivr.net/npm/laydate@1.0.7/dist/laydate.min.js"></script>
当然,如果项目中只是个别地方是使用到时间插件,建议采用import方式引入
laydate.min.js时间插件在vue组件中的使用方式
<template> <divid="laydateIndex"> <divclass="input-item"> <labelfor="">请选择时间:</label> <inputtype='text' name='houseChangeTime' placeholder='请选择日期' class='form-control' onclick="laydate({istime:true,format:'YYYY/MM/DDhh:mm:ss'})"/> </div> <divclass="input-item"> <labelfor="">开始时间:</label> <inputtype="text"name=""id="begintime"placeholder='请选择日期'> </div> <divclass="input-item"> <labelfor="">结束时间:</label> <inputtype="text"name=""id="endtime"placeholder='请选择日期'> </div> </div> </template>
<script> import'../../assets/js/laydate.min.js' exportdefault{ name:'laydateIndex', data(){ return{ begintime:'', endtime:'', start_time:'', } }, methods:{ setBeginTime(){ var_this=this; varmintime=laydate.now(0,'YYYY-MM-DDhh:mm:ss'); _this.$data.begintime=mintime; _this.$data.endtime=mintime; varbegintiem_options={ elem:'#begintime', format:'YYYY-MM-DDhh:mm:ss',//分隔符可以任意定义 event:'click',//触发事件 istime:true,//是否开启时间选择 isclear:true,//是否显示清空 issure:true,//是否显示确认 festival:true,//是否显示节日 min:mintime,//最小日期 max:'2099-12-3123:59:59',//最大日期 start:mintime,//开始日期 fixed:true,//是否固定在可视区域 zIndex:99999999,//cssz-index choose:function(dates){//选择日期完毕的回调 endtime_options.start=dates; endtime_options.min=dates; _this.$data.begintime=dates; _this.$data.endtime=dates; } }; varendtime_options={ elem:'#endtime', format:'YYYY-MM-DDhh:mm:ss',//分隔符可以任意定义 event:'click',//触发事件 istime:true,//是否开启时间选择 isclear:true,//是否显示清空 issure:true,//是否显示确认 festival:true,//是否显示节日 min:_this.$data.begintime,//最小日期 max:'2099-12-3123:59:59',//最大日期 start:_this.$data.begintime,//开始日期 fixed:true,//是否固定在可视区域 zIndex:99999999,//cssz-index choose:function(dates){//选择日期完毕的回调 //this.begintiem_options=dates; } }; laydate(begintiem_options); laydate(endtime_options); }, initPage(){ var_this=this; _this.setBeginTime(); }, }, mounted(){ this.initPage(); }, } </script>
上述内容就是如何在vue中使用laydate时间插件,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注恰卡编程网行业资讯频道。
推荐阅读
-
vue表格组件教程学习(vue proxytable只能在开发环境跨域吗)
vueproxytable只能在开发环境跨域吗?跨域问题来源于JavaScript的同源策略,即只有协议主机名端口号(如...
-
Vue组件的自定义事件和全局事件总线怎么使用
-
vue中消息订阅与发布如何使用
vue中消息订阅与发布如何使用这篇文章主要介绍“vue中消息订阅与...
-
Vue显示图片的方式有哪些
-
vue引入静态jquery报错如何解决
vue引入静态jquery报错如何解决这篇文章主要介绍“vue引入...
-
vue-cropper怎么实现裁剪图片
-
怎么用Vue+NodeJS实现大文件上传
-
Vue如何实现简易跑马灯效果
-
Vue怎么指定不编译的文件夹和favicon.ico
Vue怎么指定不编译的文件夹和favicon.ico这篇文章主要介...
-
Vue中的插槽怎么使用