更新记录
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.可选当天入住离店,别问为啥,问就是项目需求
查看更多平台兼容性
Vue2 | Vue3 |
---|---|
√ | √ |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
HBuilderX 4.0 | × | √ | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
× | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
× | × | × | × | √ | × | × | × | × |
<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>
参数 | 说明 |
---|---|
limit | 渲染多少个月份,默认3个月 |
activeArray | 价格日历,date是固定的,其余不是 |
activeKey | 例:你传入了价格日历activeArray,你要展示price字段的值,那么就写price |
range | 默认的入住离店时间 |
opts | 暴露的一些样式配置,见名识意吧,详见代码块 |
maxRange | 最大可选范围,比如最多选30天,传入30,默认也是30 |