uni-app日历使用的小坑

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

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

<template>
    <view>
        <calendar 
        :date="date"
        :lunar="true" 
        :disable-before="true" 
        :start-date="'2019-3-2'"
        :end-date="'2019-5-20'"
        @change="change"
        @to-click="toClick"
         />

    </view>
</template>



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);
        }
    }
};

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

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

<calendar :selected="selected" :date="date" @change="change" @to-click="toClick" />

增加了一个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属性，作者修改成了如下

<swiper v-else class="uni-calendar__body" :style="{ height: 70+'vh' }" :current="currentIndex" circular :vertical="slide === 'vertical' ? true : false"
					 skip-hidden-item-layout :duration="duration" @animationfinish="animationfinish" @change="change">
						<swiper-item v-for="(item, itemindx) in swiperData" :key="itemindx">
							<view :class="elClass">
								<uni-calendar-item :canlender="item" :lunar="lunar" @selectDays="selectDays"></uni-calendar-item>
							</view>
						</swiper-item>
</swiper>

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