uniapp : 仿釘釘考勤統計頁面的日曆元件,通過日曆展示每日考勤打卡情況,支援在日曆上打兩種不同型別的點,大致適配各種解析度
阿新 • • 發佈:2022-03-17
效果圖
-
不帶月份變化事件
-
帶月份變化事件
介紹
-
本文使用的元件在上面的元件基礎上做了一些個性化適配,增加了如下內容:
- 系統當前日期樣式由[白底藍字]調整為[淡藍色圓形背景白字]
- 選中日期樣式由[藍色矩形背景白字]調整為[藍色圓形背景白字]
- 在日期上打點的樣式由[日期右上角]調整為[日期底部正中間]
- 提供兩種不同的打點樣式
- 增加月份變化事件的外部呼叫介面
- 怎麼新增多種不同的打點樣式
- 去掉了[今日]快捷按鈕
-
本文中的元件樣式能適配不同的解析度,但打點樣式可能在細微之處有所不同(不是那麼居中)
4.重點:適配ipad大屏請進行如下配置!!!適配ipad大屏請進行如下配置!!!適配ipad大屏請進行如下配置!!!
在pages.json 的 globalStyle 中新增如下三行配置內容:
"globalStyle": {
"rpxCalcMaxDeviceWidth": 1024,
"rpxCalcBaseDeviceWidth": 375,
"rpxCalcIncludeWidth": 750
}
使用方法(一):不帶月份選擇
-
在專案中新建pages的同級目錄components,將uni-calendar檔案放在裡面
3.在main.js中新增如下程式碼引入元件
import myCalender from "./components/uni-calendar/components/uni-calendar/uni-calendar.vue";
Vue.component('my-calender',myCalender);
- 在頁面中載入元件
<template> <view> <my-calender :clearDate="true" :showMonth="false" :insert="true" :selected="selected" :lunar="false" :start-date="'1990-01-01'" :end-date="'2099-01-01'" @change="dateChange"> </my-calender> </view> </template> <script> export default { data() { return { selected: [{ date: '2022-03-18', // date為所需要打點的日期 type: "abnormal" // abnormal顯示為橙色點 }, { date: '2022-03-19', type: "normal" // normal顯示為藍色點 }], } }, methods: { /** * 選中日期的觸發事件 */ dateChange: function(e) { console.log(e); }, }, } </script>
- 需要打點,請配置selected引數
- 需要顯示農曆,請配置lunar引數為true
- 需要月份水印,請配置showMonth引數為true
- 這裡的月份是寫死的,固定為:系統當前日期的月份
效果圖:
使用方法(二):帶月份選擇
-
開啟uni-calendar.vue
-
修改程式碼:
-
在引用元件的頁面新增monthSwitch事件
<view>
<my-calender :clearDate="true" :showMonth="false" :insert="true" :selected="selected" :lunar="false"
:start-date="'1990-01-01'" :end-date="'2099-01-01'" @monthSwitch="monthSwitch" @change="dateChange">
</my-calender>
</view>
methods: {
/**
* 選中日期的觸發事件
*/
dateChange: function(e) {
console.log(e);
},
/**
* 選中月份的觸發事件
*/
monthSwitch:function(e){
console.log(e);
}
},
效果圖:
使用方法(三):如何自定義樣式的數量和型別
-
開啟uni-calendar-item.vue
-
看到這個地方:
一些小小的缺憾
- 打點的位置,在某些解析度上,並沒有特別居中
- 圓形背景,在某些解析度上,並沒有特別圓,可能有個平頭