关于javascript:可能是东半球最好看的vue3日历组件vuebaiducalendar

32次阅读

共计 841 个字符，预计需要花费 3 分钟才能阅读完成。

前几天面试，被问到如何实现一个日历组件，而后发现百度的日历组件比拟看，决定本人用 vue3 实现一下，并且还能坚固一下 vue3 的常识。

代码全副采纳 compositionAPI
script-setup 格调
反对 vite
宜忌算法未实现（欢送 pr）

码云：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 style="width:600px;margin-top:16px;margin-left:16px">
      <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>

正文完