uni-app日历使用的小坑

首先贴出uni-app日历组件的地址：http://ext.dcloud.net.cn/plugin?id=56 

在网站中下载到本地后，将其放入项目组件的文件夹中后其使用方法为：

import calendar from "@/components/uni-calendar/uni-calendar"

export default {
    components: {
        calendar
    },
    data() {
        return {
            date:'2019-03-10'
        };
    },
    methods: {
        change(e) {
            console.log(e);
        },
        toClick(e) {
            console.log(e);
        }
    }
};

运行成功后大概长这个样子

我所需要开发的项目，需要变更样式，以及具有日期打点功能，但是官网中并没有给出配置的选项，但经过查看源码可知，该组件具有打点功能，需要配置如下：

增加了一个selected属性，在date中，定义如下形式：

	            selected: [{
    				date: '2019-5-21'
				}, {
					date: '2019-5-22'
				}, {
					date: '2019-5-24'
				}, {
					date: '2019-5-25'
				}]

运行后打点功能就完成了，如下图所示：

接下来就是更改一些样式属性，比如当前选中日期样式，在源码中，控制当前选中样式的代码在uni-calendar-item.vue文件中，

类名为.uni-calender__date-current，可以修改背景颜色，字体等等。

     在真机测试中，会出现最后一行日期显示不全的情况，经过查看源码，发现作者把swiper组件高度写死了，直接写成了256px，所以在不同手机测试中效果就不同，解决办法就是修改swiper的style属性，作者修改成了如下

设置成了百分之70视口高度，就显示出来了，这些都可以根据自己项目调整~