typescript+vue开发的日历组件，使用swiper库来支持日历滑动功能，简单易用
-
安装组件包
npm install vue-component-weekcalender --save-dev -
js代码(没有自定义(reset=false的情况)日期状态的实例)
import Vue from 'vue'; import VueWeekcalender from "vue-component-weekcalender"; new Vue({ el: '#app', components: { VueWeekcalender }, data() { return { options: { showHeader: true, beginDate: "2018-07-30", endDate: "2018-08-12", currentDate: "2018-08-03" } } }, methods: { chooseDayItemHandle: function (dayItem) { console.log(dayItem) }, slideChangeHandle:function(item) { console.log(item); } } });
-
html模板
<div id="app"> <vue-weekcalender @on-slide="slideChangeHandle" @on-click="chooseDayItemHandle" :option="options"> </vue-weekcalender> </div> <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script> <script src="./dist/index.js"></script>
-
自定义日期每天状态的实例(reset=true的情况)
import "./index.less"; import Vue from 'vue'; import VueWeekcalender from "vue-component-weekcalender"; new Vue({ el: '#app', components: { VueWeekcalender }, data() { return { options: { showHeader: true, beginDate: "2018-07-01", endDate: "2018-09-16", currentDate: "2018-08-04" }, reset: true, dayStatus: [{ currentDate: "2018-08-13", dayClass: "day enabled", enabled: true, default: true }, { currentDate: "2018-08-14", dayClass: "day enabled", enabled: true, default: false }] } }, methods: { changeStatus:function() { this.dayStatus= [{ currentDate: "2018-08-04", dayClass: "day enabled", enabled: true, default: true }, { currentDate: "2018-08-14", dayClass: "day enabled", enabled: true, default: false }] }, chooseDayItemHandle: function (dayItem) { console.log(dayItem) }, slideChangeHandle: function (item) { console.log(item); } } });
-
html模板
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body style="margin:0;"> <div id="app"> <button @click="changeStatus">修改状态</button> <vue-weekcalender @on-slide="slideChangeHandle" @on-click="chooseDayItemHandle" :option="options" :reset="reset" :status= "dayStatus"> </vue-weekcalender> </div> <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script> <script src="./dist/index.js"></script> </body> </html>
- calender props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| option | option对象提供4个属性值： showHeader(是否显示标题)， beginDate(开始时间：yyyy-MM-dd格式)， endDate(结束时间：yyyy-MM-dd格式)， currentDate(当前时间：yyyy-MM-dd格式) |
object | 空对象 |
| reset | 是否需要重置初始化生成的日历的每天日期，默认值为false， 该值设置为true以后，使用者可设置status属性，来自定义修改生成的日历每天日期状态，原来日历中每一项均不可点，即每一项的 enabled属性会被重置为false |
boolean | false |
| status | 需要自定义的日期状态数组(reset属性为true有效)， 数组的每一项是个object对象，对象提供一下几个属性： currentDate：当前日期格式yyyy-MM-dd dayClass：当前日期显示的样式名称 enabled：boolean类型，是否可用(可以点击) default：boolean类型，是否是默认选中的一天，true为默认选中的一天， 需要注意的是，status的数组对象中，仅有一项default的值为true(有多个日期为选中状态，不符合实际需求吧) |
Array | [] |
- calender events
| 方法名称 | 说明 | 参数 |
|---|---|---|
| on-click | 日历上某一天触发 | 当前日期对象，对象有以下属性： currentDate：选中的日期，格式：yyyy-MM-dd， dayClass：类名称， dayDesc/day：几号，如：2， enabled：是否可以点击，true表示可以点击 |
| on-slide | 左右滑动日历触发 | 返回滑动到的下一个日历的第一天日期，格式：yyyy-MM-dd格式 |
-
安装依赖
npm/cnpm install -
编译
npm run build -
demo运行
# cd test # npm/cnpm install # npm run build #把test目录的index.html在浏览器打开，切换到移动的端模拟器，可以预览在手机端的展示结果
相互学习共同提高，欢迎使用并且issue