更新记录

1.0.6(2025-02-05) 下载此版本

新增弹窗标题

1.0.5(2025-02-05) 下载此版本

1.增加弹窗模式 2.新增农历显示

1.0.4(2025-01-15) 下载此版本

1.优化抖动问题 2.优化H5页面,样式抖动问题

查看更多

平台兼容性

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 弹窗模式关闭回调函数

说明

  1. 默认情况下,组件会显示当前年份和月份,点击月份可以切换月份,点击年份可以切换年份,点击日期可以切换日期。
  2. 如果需要显示指定生成年份和月份,可以在组件上绑定 year 和 month 属性
  3. 组件可左右滑动切换自动加载月份和年份
  4. 组件使用 scss 封装.请确保项目中已配置 scss 编译

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问