更新记录

1.0.0(2025-01-26)

1.0.0


平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
× × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序 鸿蒙元服务
× × × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
×

VUE-H5-Calendar组件使用文档

1. 安装组件

yarn add vue-h5-calendar # 或者 npm install vue-h5-calendar

2. 引入组件

import Calendar from "vue-h5-calendar";

3. 引入样式

import 'vue-h5-calendar/dist/styles.scss';

4. 注册组件

Vue.use( Calendar);

5. 使用组件

<Calendar :visible.sync="true"></Calendar>

6. 配置项

属性 默认参数 说明 类型
visible false 是否显示 Boolean
themeColor #3D7DE7 主题颜色(16进制) String
selectBgColor #E9F3FD 选中背景颜色(16进制) String
modalCancel ()=> {} 点击取消 Function
ok ()=> {} 点击确定 Function
dateClick ()=> {} 点击日期 Function
defaultDate [] 默认选中的日期 Array
type day 日历类型 String
isSwiper true 是否滑动 Boolean
swiperDirection horizontal 类型 String
showToDay true 是否显示今天 Boolean
showLunar true 是否显示农历 Boolean
calendarTypeShow true 是否显示日历类型 Boolean
typeList ["day", "week", "month"] 日历类型 Array
title 日期选择 标题 String
okText 确定 标题 String
cancelText 取消 标题 String
maskClose true 是否点击遮罩层关闭 Boolean

swiperContainer高度 = calendar_day高度+20px * 6 calendar_day高度 = 60px

7. 插槽

<ComCalendar :visible.sync="visible">
  // 自定义日期
  <template v-slot:itemRender="{ date }">
    {{ date.date }}
  </template>
  // 自定义上一年、上一月、下一月、下一年、取消、今天、确定
  <template v-slot:prevYear>
  </template>
  <template v-slot:prevMonth>
  </template>
  <template v-slot:nextMonth>
  </template>
  <template v-slot:nextYear>
  </template>
  <template v-slot:cancel>
  </template>
  <template v-slot:toDay>
  </template>
  <template v-slot:ok>
  </template>
</ComCalendar>

隐私、权限声明

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

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

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

暂无用户评论。

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