更新记录

1.0.3（2021-02-22）

修复初次渲染选择日期时，开始日期与结束日期出现顺序相反并且无法赋于样式的bug。

1.0.2（2021-02-22）

1.新增日历弹出动画效果

2.增加height属性，支持自定义设置组件容器高度。

1.0.1（2021-02-13）

1.部分样式优化

平台兼容性

更新说明

1.新增日历弹出动画效果

2.增加height属性，支持自定义设置组件容器高度。

3.修复初次渲染选择日期时，开始日期与结束日期出现顺序相反并且无法赋于样式的bug。

使用说明：

参数：

startDate 开始时间

endDate 结束时间

limit 展示的月份数量

height 日历组件容器的高度 （因animation的需要，故目前只支持px）

方法：

@selectDate //确认选择

@cancel //取消选择

返回参数：

startDate 选择的开始日期

endDate 选择的结束日期

dayNum 总共的天数

<template>
    <view class="container">
        <button @tap="showCalendar()">日历选择器</button>
        <view class="calendar">
            <calendar ref="calendar" v-if="isShow" @cancel="cancel" :startDate="startDate" :height="height" :endDate="endDate" @selectDate="selectDate" :limit="limit" />
        </view>
    </view>
</template>
<script>
    import calendar from '../../components/fl-calendar/fl-calendar.vue'
    export default {
        components: {
            calendar
        },
        data() {
            return {
                isShow:false,
                startDate:'2021-01-02',     //开始日期
                endDate:'2021-01-15',       //结束日期
                height:500,                 //日历容器高度
                limit:6                     //展示月份数量
            }
        },
        mounted() {

        },
        methods: {
            // 展示选择器
            showCalendar() {
                this.isShow = true
            },
            // 隐藏选择器
            cancel(){
                this.isShow=false
            },
            // 获取传参
            selectDate(data) {
                console.log('拿到传参', data)
            }
        }
    }
</script>