更新记录

1.1.2（2024-06-19） 下载此版本

修复了Vue2版本下，价格日历参数类型报错问题。

1.1.1（2024-06-19） 下载此版本

`

//参数说明 limit：渲染多少个月份，默认3个月 activeArray：价格日历，date是固定的，其余不是 activeKey：例：你传入了价格日历activeArray，你要展示price字段的值，那么就写price range：默认的入住离店时间 opts:暴露的一些样式配置 maxRange：最大可选范围，比如最多选30天，传入30，默认也是30

//返回的数据大概长这样的

dayNums:3 start:{ date: "2024-07-01", dateIOS: "2024/07/01", day: 1, festival: "建党节", month: 7, shortDate: "07-01", shortDateIOS: "07/01", time: "00:00", timeStamp: 00, week: 1, weekCN: "周一", year: 2024 }, end:{ date: "2024-07-03", dateIOS: "2024/07/03", day: 3, festival: "", month: 7, shortDate: "07-03", shortDateIOS: "07/03", time: "00:00", timeStamp: 00, week: 3, weekCN: "周三", year: 2024 }

1.1.0（2024-06-19） 下载此版本

基于Vue3，使用options语法重构 只提供裸日历，不再提供弹窗类动画。 1.暴露部分opts配置，提供部分样式修改 2.新增header与footer插槽，基于头尾样式新增或修改 3.新增自定义节日 4.新增类似价格日历功能 5.可选当天入住离店，别问为啥，问就是项目需求

平台兼容性

uni-app

uni-app x

<template>
    <view>
        <fl-calendar :range="range" :opts="opts" start-date="2024-06-18" :activeArray="activeArray" @confirm="confirm" @cancel="cancel">
            <template v-slot:header>
                <view class="header">it's' Header!</view>
            </template>
            <template v-slot:footer>
                <view class="footer">it's Footer!</view>
            </template>
        </fl-calendar>
    </view>
</template>

<script setup lang="ts">
    import { reactive } from 'vue'
    import flCalendar from '@/components/fl-calendar.vue'
    // 一些开放的设置
    const opts = reactive({
        dayHeight: '100rpx',//每日日期容器的高度
        scrollHeight: '',//滚动容器的高度
        optionsBtn: ['入住', '离店'],//入住离店的文字，可以自己改
        daySize: '22rpx',//日期的字体大小
        rangeSize: '18rpx',//入住离店文字字体大小
        yearMonthSize: '28rpx',//年月的字体大小
        background: '#fff',//整个组件的背景色
        yearMonthColor: '#333',//年月的字体颜色
        activeKeySize: '20rpx',//如果你传入了activeArray,即价格日历，可控制显示的字体大小
        activeKeyColor: 'red',//如果你传入了activeArray,即价格日历，可控制显示的字体颜色
        festival: [{        //节日，通过日期匹配显示
            date: '05-01',
            title: "劳动节"
        }
        ]
    })
    // 入住  离店 时间  传入时间分隔符可以是-也可以是/，会自动转成/（IOS兼容问题）
    const range = reactive({
        start: '2024-06-01',
        end: '2024-06-07'
    })
    // 类似  价格日历的需求  id不是必须
    const activeArray = reactive([{
        date: '2024-06-20',
        price: '￥2000',
        id: '20A'
    }, {
        date: '2024-06-21',
        price: '￥1800',
        id: '21B'
    }])
    // 确认回调
    const confirm = (e:any)=>{
        console.log('所选值',e)
    //  e = {
    //  dayNums: 3
    //   start: {
    //      date: "2024-07-01",
    //      dateIOS: "2024/07/01",
    //      day: 1,
    //      festival: "建党节",
    //      month: 7,
    //      shortDate: "07-01",
    //      shortDateIOS: "07/01",
    //      time: "00:00",
    //      timeStamp: 1719763200000,
    //      week: 1,
    //      weekCN: "周一",
    //      year: 2024
    //  },
    //  end: {
    //      date: "2024-07-03",
    //      dateIOS: "2024/07/03",
    //      day: 3,
    //      festival: "",
    //      month: 7,
    //      shortDate: "07-03",
    //      shortDateIOS: "07/03",
    //      time: "00:00",
    //      timeStamp: 1719936000000,
    //      week: 3,
    //      weekCN: "周三",
    //      year: 2024
    //  }
    // }
        }
    //取消回调
    const cancel = ()=>{
        //cancel callback
    }
</script>