【JS】可能是东半球最好看的vue3日历组件vue-baidu-calendar

• Z时代
• 2024-01-10
• 分类：技术分享

import { createApp } from 'vue'
import App from './App.vue'
import BaiduCalendar from "vue-baidu-calendar"
const app=createApp(App)
app.use(BaiduCalendar)
app.mount('#app')

<template>
<!-- 要给外层div指定合适的宽度 -->
<div>
<baidu-calendar @change="change" :date="date" :range="range"/>
</div>
</template>
<script setup> import {  ref } from "vue";
//date改变触发事件
const change = (obj)=>{
console.log('obj',obj)
}
const date = ref("2021-1-27") //设置日期，若不设置，则默认为今天
const range = [2015,2025] //设置年份范围 默认[2010,2030] </script>
<style></style>

前几天面试，被问到如何实现一个日历组件，然后发现百度的日历组件比较看，决定自己用vue3实现一下，并且还能巩固一下vue3的知识。

• 代码全部采用compositionAPI
• script-setup风格
• 支持vite
• 宜忌算法未实现（欢迎pr）

vue-baidu-calendar

码云：https://gitee.com/isfive/vue-baidu-calendar
github：https://github.com/qiuquanwu/vue-baidu-calendar
顺便写了一个农历公历互转的esm包：solarlunar-es

演示

安装

$ npm install vue-baidu-calendar --save

使用

mian.js

import { createApp } from 'vue'
import App from './App.vue'
import BaiduCalendar from "vue-baidu-calendar"
const app=createApp(App)
app.use(BaiduCalendar)
app.mount('#app')

App.vue

<template>
<!-- 要给外层div指定合适的宽度 -->
<div>
<baidu-calendar @change="change" :date="date" :range="range"/>
</div>
</template>
<script setup> import {  ref } from "vue";
//date改变触发事件
const change = (obj)=>{
console.log('obj',obj)
}
const date = ref("2021-1-27") //设置日期，若不设置，则默认为今天
const range = [2015,2025] //设置年份范围 默认[2010,2030] </script>
<style></style>

以上是 【JS】可能是东半球最好看的vue3日历组件vue-baidu-calendar 的全部内容， 来源链接： utcz.com/a/112057.html