vue中使用laydate.js插件
1、到官网下载laydate.js
https://www.layui.com/laydate/
2、下载好后,将包解压好放在index.html同级的地方。我是在public中建立个statick文件夹,放在了里面
3、在index.html中引入
<script src="./static/laydate/layDate-v5.0.9/laydate/laydate.js"></script>
4、在vue组件中使用
<template>
<div class="main">
<input id="test" class="form-control layer-date" placeholder="YYYY-MM-DD hh:mm:ss" v-model="date">
<label class="laydate-icon"></label>
</div>
</template> <script> export default {
data(){
return{
date: '2017-09-08 09:00:00',
}
},
mounted(){
console.log(laydate)
laydate.render({
elem: '#test',
type:'datetime',
done: (value) => {
this.date = value;
console.log(this.date);
}
})
},
methods:{
}
}
</script> <style lang="less" scoped> </style>
vue中使用laydate.js插件的更多相关文章
- 解决vue中使用laydate.js选择日期后再修改其他model时日期会被清空问题
首先描述一下问题,下图中均绑定v-model,例如先选择出生开始时间,然后当再选择地区或其他选项时该时间就会被清空 首先看一下我这边开始的默认值,开始我设置都为空 当我选择如下图的生日开始时间与结束时 ...
- vue使用laydate.js插件报错laydate.css: Invalid
在vue中使用laydate.js插件时可能会碰到laydate.css: Invalid这样子的一个报错 然后导致laydate日期控件无法使用. 这主要是因为laydate.js中引入的layda ...
- vue中自定义组件(插件)
vue中自定义组件(插件) 原创 2017年01月04日 22:46:43 标签: 插件 在vue项目中,可以自定义组件像vue-resource一样使用Vue.use()方法来使用,具体实现方法: ...
- vue中config/index.js:配置的详细理解
当我们需要和后台分离部署的时候,必须配置config/index.js: 用vue-cli 自动构建的目录里面 (环境变量及其基本变量的配置) var path = require('path') ...
- vue中使用raphael.js实现地图绘制
一.效果图 二.在vue中引入raphael.js npm i raphael -S 三.封装一个名为StreetMap的组件,代码如下 <template> <div> &l ...
- Vue中使用fullpage.js
Vue中使用fullpage.js:https://blog.csdn.net/weixin_34184158/article/details/88672739
- 在Vue中使用layer.js弹出层插件
layer.js(mobile)是一个小巧方便的弹出层插件,在之前的apicloud项目中被大量使用,但最近对apicloud的IDE.非常不友好的文档和极低的开发效率深感厌烦,决定弃用然后转向Vue ...
- vue中使用剪切板插件 clipboard.js
vue中使用剪切板需要借助一个插件,clipboard,使用方法还是很简单的,先下载,然后引入: npm i clipboard -S //引入 import Clipboard from 'clip ...
- 微信 vue中使用video.js播放m3u8视频,解决安卓自动全屏的问题。
最近一个项目中需要在微信中播放m3u8格式的视频,刚开始用了 vue-video-player 这个插件,在IOS手机体验良好,本以为完事了, 结果安卓手机一点播放就自动全屏,心态略崩.查了资料说是安 ...
随机推荐
- Spectral Norm Regularization for Improving the Generalizability of Deep Learning论文笔记
Spectral Norm Regularization for Improving the Generalizability of Deep Learning论文笔记 2018年12月03日 00: ...
- 怎样在 Vue 的 component 组件中使用 props ?
1. 在注册一个组件时, 添加一个 props 属性, 将需要添加的 props 作为数组的元素进行添加, 比如下面的例子中, 我们添加了一个变量 name , 他就是一个 props, 我们可以通过 ...
- python 获取当前目录下的文件目录和文件名
python 获取当前目录下的文件目录和文件名 os模块下有两个函数: os.walk() os.listdir() 1 # -*- coding: utf-8 -*- 2 3 import os ...
- ES6基础之——get 与 set
class Chef{ constructor(food){ this.food = food; thid.dish = []; } //getter get menu(){ return this. ...
- CSS3总结四:盒模型(box)
盒模型:标准盒模型.混杂盒模型 什么时候会触发混杂模式? 为什么要混杂模式渲染规则盒模型? box-sizing:content-box.border-box 关于盒模型的一些其他样式和属性值 一.盒 ...
- 禁用div元素(不可点击)
style="pointer-events: none;" 可以封装使用 .disable { pointer-events: none; } //禁用 $.fn.disable ...
- pycharm的快捷键以及快捷意义
ctrl+a 全选 ctrl+c 复制(默认复制整行) ctrl+v 粘贴 ctrl+x 剪切(默认复制整行) ctrl+f 搜索 ctrl+z 撤销 ctrl+shift+z 反撤销 ctrl+d ...
- Linux内核网络报文简单流程
转:http://blog.csdn.net/adamska0104/article/details/45397177 Linux内核网络报文简单流程2014-08-12 10:05:09 分类: L ...
- redis整合Spring入门
首先 衷心感谢这篇博客给我入门时的启发 三颗心脏 你需要知道,spring的官方文档中已经注明,与redis整合时,spring的jar包版本不能低于4.2.6,否则不支持,会报错的哟 测试的时候请 ...
- Pyspark常用API总结
DF 类似于二维表的数据结果 mame age 狗山石 23 获取df的列名: df.columns 显示当前值 打印 df.show() show(2) show括号里面传入参数可以显示查看几行 s ...