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

前几天面试,被问到如何实现一个日历组件,而后发现百度的日历组件比拟看,决定本人用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 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>

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理