vue 日历(以月为单位)组件
typescript+vue开发的以月份为基础单位的日历组件，使用swiper库来支持日历滑动功能，简单易用
代码示例
-
安装组件包
npm install vue-component-monthcalender --save-dev -
js代码
import Vue from 'vue'; import VueMcalender from "vue-component-monthcalender"; new Vue({ el: '#app', components: { VueMcalender }, data() { return { visible:true, 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-mcalender v-model="visible" @on-slide="slideChangeHandle" @on-click="chooseDayItemHandle" :option="options"> </vue-mcalender> </div> <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script> <script src="./dist/index.js"></script>
组件API
通过v-model数据双向绑定来控制组件的显示隐藏
- 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：string类型，当前日期格式yyyy-MM-dd dayClass：string类型，当前日期显示的样式名称 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
