扩展组件（uni ui）

2024-06-28 17:48| 来源: 网络整理| 查看: 265

更新记录1.3.0（2019-07-13）Calendar 日历调用方式属性说明事件说明方法说明事件返回属性说明更新日志v1.3.0v1.2.0v1.1.1v1.1.0v1.0.0更新记录1.3.0（2019-07-13）新增弹出显示模式新增标点功能，并携带额外信息 - 新增多选模式新增其他日期与今天高亮区分显示修复不显示最后一行的 bug 修复初始化组件日期显示不对的 bug 优化性能问题，删除日历滑动优化代码整体优化，解决在低版本设备上卡顿的问题 Calendar 日历

日历组件，组件名：uni-calendar，代码块： uCalendar。

调用方式 import {uniCalendar} from "@/components/uni-calendar/uni-calendar"export default { components: { uniCalendar }, data() { return {}; }, methods: { change(e) { console.log(e); } }}; 属性说明属性名类型默认值说明dateString自定义当前时间，默认为今天lunarBooleanfalse显示农历disableBeforeBooleanfalse禁用今天之前的日期startDateString日期选择范围-开始日期endDateString日期选择范围-结束日期rangeBooleanfalse范围选择insertBooleanfalse插入模式,可选值，ture：弹窗模式；false：插入模式；默认为插入模式selectedArray打点，期待格式[{date: '2019-06-27', info: '签到', data: { custom: '自定义信息', name: '自定义消息头',xxx:xxx… }}] 事件说明事件名类型说明@changefunction日期改变，insert :ture 时生效@confirmfunction确认选择 insert :false 时生效方法说明

在 calendar 组件上定义 ref 属性，通过 ref 属性使用方法。

属性名类型说明openfunction弹出日历组件，insert :false 时生效，通过 ref 触发

代码示例

打开日历 import {uniCalendar} from "@/components/uni-calendar/uni-calendar"export default { components: { uniCalendar }, data() { return {}; }, methods: { open(){ this.$refs.calendar.open(); }, confirm(e) { console.log(e); } }}; 事件返回属性说明{ // 范围选择 "range": { // 范围开始日期 "begin": "2019-06-25", // 范围结束日期 "end": "2019-06-27", // 范围日期数组 "data": [ "2019-06-25", "2019-06-26", "2019-06-27" ] }, // 当前年 "year": 2019, // 当前月 "month": 6, // 当前日 "date": 27, // 农历 "lunar": { // 农历年 "lYear": 2019, // 农历月 "lMonth": 5, // 农历日 "lDay": 25, // 生效 "Animal": "猪", // 农历月 "IMonthCn": "五月", // 农历日 "IDayCn": "廿五", // 公历年 "cYear": 2019, // 公历月 "cMonth": 6, // 公历日 "cDay": 27, "gzYear": "己亥", "gzMonth": "庚午", "gzDay": "乙未", // 是否今天 "isToday": true, "isLeap": false, // 周 "nWeek": 4, "ncWeek": "星期四", // 是否节气 "isTerm": false, // 节气名 "Term": null, // 星座 "astro": "巨蟹座" }, //打点信息 "clockinfo": { // 是否打点 "have": true, // 打点日期 "date": "2019-06-27", // 打点描述 "info": "签到", // 额外信息 "data": { "custom": "自定义信息", "name": "自定义消息头" } }, // 当前完整日期 "fulldate": "2019-6-27"}

本组件农历转换使用的js是 @1900-2100区间内的公历、农历互转

Tips:

仅支持自定义组件模式date 传入的应该是一个 String ，如： 2019-06-27 ，而不是 new Date()insert 属性，确定当前的事件是 @change 还是 @confirm 。理应合并为一个事件，但是为了区分模式，现使用两个事件，这里需要注意更新日志v1.3.0 新增弹出显示模式新增标点功能，并携带额外信息新增多选模式新增其他日期与今天高亮区分显示修复不显示最后一行的 bug 修复初始化组件日期显示不对的 bug优化性能问题，删除日历滑动优化代码整体优化，解决在低版本设备上卡顿的问题 v1.2.0 新增水平垂直滑动选择月份新增当天日期高亮显示修复选中当前日期，返回两遍信息的问题修复二月份切换月份直接跳到三月份的bug v1.1.1 修复小程序不显示农历的问题修复小程序不能设置开始日期和结束日期的问题 v1.1.0 新增是否开启农历选项新增是否禁止今天之前的日期新增开始日期新增结束日期 v1.0.0 新增基础日历新增基础打点功能

【本文地址】

公司简介

联系我们