更新记录
1.0.8(2025-02-14) 下载此版本
隐藏多余符号
1.0.7(2025-02-14) 下载此版本
新增切换月份自动滚动到当月一号,切回当前月份滚动至当天
1.0.6(2025-02-05) 下载此版本
新增弹窗标题
查看更多平台兼容性
Vue2 | Vue3 |
---|---|
√ | √ |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
HBuilderX 3.1.0 app-vue | × | √ | √ | √ | √ | √ |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 | 鸿蒙元服务 |
---|---|---|---|---|
√ | √ | √ | √ | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | √ | √ | √ | √ |
Calendar 日历
组件名: xt-calendar
安装方式
本组件符合 easycom 规范,HBuilderX 3.1.0 起,只需将本组件导入项目,在页面 template 中即可直接使用,无需在页面中 import 和注册 components
基本用法
复制代码<template>
<view>
<view class="app_main">
<xt-calendar
@dayClick="dayClick"
@yearClick="yearClick"
@monthClick="monthClick"
></xt-calendar>
</view>
</view>
</template>
<script setup>
const monthClick = (e) => {
console.log("月份", e);
};
const yearClick = (e) => {
console.log("年份", e);
};
const dayClick = (e) => {
console.log("日期", e);
};
</script>
<style
lang="scss"
scoped
></style>
API
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
show |
Boolean |
true |
控制组件显示。默认为 true |
year |
Number |
当前年份 | 用于设置或接收当前年份,默认值为当前年份 |
month |
Number |
当前月份 | 用于设置或接收当前月份,默认值为当前月份 |
title |
String |
日历 | 用于设置显示标题文字 |
todayColor |
String |
蓝色 | 用于设置显示当天日期的背景颜色,默认为蓝色 |
activeColor |
String |
黄色 | 用于设置当前选中日期的背景颜色,默认为黄色 |
activeDay |
String |
空字符串 | 用于设置当前选中日期,默认为空,格式为 YYYY/MM/DD ,如 2025/1/1 |
showTitle |
Boolean |
true |
控制组件是否显示标题。默认为 true ,表示显示标题 |
showControl |
Boolean |
true |
控制组件是否显示顶部控制。默认为 true |
insert |
Boolean |
true |
组件是否嵌入页面。默认为 true |
showPast |
Boolean |
true |
是否显示农历。默认为 true 。仅支持农历1949-2100年转换 |
zIndex |
Number |
9999 |
弹窗层级 (默认 9999) |
radius |
String |
15rpx |
弹窗圆角 (默认 15rpx) |
mask |
Boolean |
true |
是否显示遮罩层。默认为 true |
opacity |
Number |
0.7 |
遮罩层透明度 (默认 0.7) |
bgColor |
String |
#fff |
弹窗背景颜色 (默认 #fff) |
iconColor |
String |
#333 |
关闭按钮颜色 (默认 #333) |
备注
绑定show字段时,vue3版本,双向绑定方式为 v-model:show='show';
vue2版本,双向绑定方式为 :show.sync='show';
也可自行处理 不使用双向绑定;
Events
事件名 | 类型 | 说明 |
---|---|---|
monthClick |
Function |
月份回调函数 |
dayClick |
Function |
日期回调函数 |
yearClick |
Function |
年份回调函数 |
change |
Function |
弹窗模式滑动回调函数 |
close |
Function |
弹窗模式关闭回调函数 |
说明
- 默认情况下,组件会显示当前年份和月份,点击月份可以切换月份,点击年份可以切换年份,点击日期可以切换日期。
- 如果需要显示指定生成年份和月份,可以在组件上绑定 year 和 month 属性
- 组件可左右滑动切换自动加载月份和年份
- 组件使用 scss 封装.请确保项目中已配置 scss 编译
切换下个月,滚动条怎么到1号,回到当前月,自动滚动到当日