es-calendar 日历组件

介绍

基于 vue3.x + CompositionAPI + typescript + vite + dayjs 模拟windows的日历效果，支持主题切换，自定义高亮颜色、mask区域

目标效果展示

- 默认

!01

- 切换主题、颜色

!02

- mask高亮颜色

!03

源码地址

在线预览

使用说明

$3

``
npm i es-calendar
`

$3

`typescript
import { createApp } from 'vue'
import App from './App.vue'

import 'es-calendar/dist/style.css'
import Calendar from 'es-calendar'

createApp(App)
.component('es-calendar', Calendar)
.mount('#app')
`

- 使用

`html


`

$3

`html



`

$3

直接通过浏览器的 HTML 标签导入 es-drager，然后就可以使用全局变量 ESDrager 了。

`html












``

Drager API

$3

| 属性名 | 说明 | 类型 | 默认 |
| --------------------- | ------------ | ------------------------------------------ | ----- |
| theme | 主题 | ^[string] dark、light | dark |
| color | 高亮颜色 | ^[string] | #0078d7 |
| maskColor | mask颜色 | ^[string] | #818383 |
| maskSize | mask大小 | ^[number] | 150 |

$3

| 插槽名 | 说明 |
| ------- | ------- |
| default | 自定义日期内容 |