v-calendar-creek
Version:
基于Vue2.0写的一套简易的日历
80 lines (68 loc) • 3.69 kB
Markdown
* 基于 Vue 2.0 开发的轻量级、多作用的日历组件
* 占用内存小，性能高，作用强，可扩展
* 全部由Vue实现，没有引入第三方库
* 不仅可以获取日期，还可以根据需求来获取时间
* 可以获取年 - 月 - 日 时 : 分 : 秒 ,可以单独获取其中几个，也可以获取全部，使用起来十分方便
```javascript
npm i v-calendar-creek --save
cnpm i v-calendar-creek --save //国内镜像
```
```javascript
//vue文件中引入
import calendar from 'v-calendar-creek';
//全局引用
Vue.component("calendar",calendar)
//单页面引用
export default {
data(){
return {
type:'second',
getTime:'2018-10-26 00：00：00',
onlyTime:'hour'
}
},
components:{
calendar
},
methods:{
//如果在同个页面触发多个日历组件的话，可以传一个类名过去即可，如需要使用区间的话 开始==>".start" 结束==>'.end'
getDate(val){
this.$refs.start.show(val)
},
//子组件会把得到的时间返回过来
getDateTime(val){
console.log(val)
}
}
}
//组件引用
/**
* type 是需要时分秒类型，分别：年-->year-->默认 月-->month 日-->day 时-->hour 分-->minute 秒-->second
* getTime 是父组件传入的时间默认值 格式（2018-10-26 00：00：00 or 2018/10/26 00:00:00）
* onlyTime 显示是否只显示时间 时-->hour 分-->minute 秒-->second 只需要时间 不需要日期的情况下使用
* ref 添加ref值，会暴露出一个方法，show()
* getDate 是子组件调用父组件的方法
*/
//eg.
<input type='text' @click='getDate()'>
<calendar :type="type" ref='time' :getTime="getTime" :onlyTime='onlyTime' @getDate="getDateTime"></calendar>
```
| 属性 | 说明 | 默认 | 是否必传 |
| :------------- | :-------------------------------------------------------------------------------------------| :----------: | :------: |
| type | 是需要时分秒类型，分别：年-->year-->默认 月-->month 日-->day 时-->hour 分-->minute 秒-->second | year | 否 |
| getTime | 传入的时间默认值 格式（2018-10-26 00：00：00 or 2018/10/26 00:00:00） | 当前时间 | 否 |
| onlyTime | 显示是否只显示时间 时-->hour 分-->minute 秒-->second 只需要时间 不需要日期的情况下使用 | 无 | 否 |
| ref | 会暴露出一个方法，show() | 无 | 是 |
| getDate | 是子组件调用父组件的方法 | 无 | 是 |
* 如果有什么兼容问题或者报错问题，可以直接通过邮件方式联系我：asd503262217@sina.com
V 1.1.11 更新了代码，之前上传的代码有问题重新上传一次，并增加了选择日期完成之后如果小于10的值在前面加0，增家handleNum方法来进行处理