uniapp : 仿钉钉考勤统计页面的日历组件，通过日历展示每日考勤打卡情况，支持在日历上打两种不同类型的点，大致适配各种分辨率 |
您所在的位置：网站首页 › uniapp日历提醒 › uniapp : 仿钉钉考勤统计页面的日历组件，通过日历展示每日考勤打卡情况，支持在日历上打两种不同类型的点，大致适配各种分辨率 |
uniapp : 仿钉钉考勤统计页面的日历组件，通过日历展示每日考勤打卡情况，支持在日历上打两种不同类型的点，大致适配各种分辨率
|
效果图
不带月份变化事件
带月份变化事件
demo的github地址 介绍使用的组件基于uni-calendar,插件市场地址,组件示例 本文使用的组件在上面的组件基础上做了一些个性化适配，增加了如下内容： 系统当前日期样式由[白底蓝字]调整为[淡蓝色圆形背景白字] 选中日期样式由[蓝色矩形背景白字]调整为[蓝色圆形背景白字] 在日期上打点的样式由[日期右上角]调整为[日期底部正中间] 提供两种不同的打点样式 增加月份变化事件的外部调用接口 怎么添加多种不同的打点样式 去掉了[今日]快捷按钮本文中的组件样式能适配不同的分辨率，但打点样式可能在细微之处有所不同（不是那么居中） 4.重点：适配ipad大屏请进行如下配置！！！适配ipad大屏请进行如下配置！！！适配ipad大屏请进行如下配置！！！ 在pages.json 的 globalStyle 中添加如下三行配置内容： "globalStyle": { "rpxCalcMaxDeviceWidth": 1024, "rpxCalcBaseDeviceWidth": 375, "rpxCalcIncludeWidth": 750 } 使用方法（一）：不带月份选择点击此处下载github上的demo 在项目中新建pages的同级目录components,将uni-calendar文件放在里面
3.在main.js中添加如下代码引入组件 import myCalender from "./components/uni-calendar/components/uni-calendar/uni-calendar.vue"; Vue.component('my-calender',myCalender);
效果图：
打开uni-calendar.vue
修改代码：
在引用组件的页面添加monthSwitch事件 methods: { /** * 选中日期的触发事件 */ dateChange: function(e) { console.log(e); }, /** * 选中月份的触发事件 */ monthSwitch:function(e){ console.log(e); } },效果图：
打开uni-calendar-item.vue
看到这个地方：
|
【本文地址】
公司简介
联系我们
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |