[JavaScript知识库] ss-vue-calendar封装拓展性强的日历组件库

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> ss-vue-calendar封装拓展性强的日历组件库 -> 正文阅读

[JavaScript知识库]ss-vue-calendar封装拓展性强的日历组件库

ss-vue-calendar npm包地址

使用SsVueCalendar组件

  npm install ss-vue-calendar
  import SsVueCalendar from 'ss-vue-calendar'
  import "ss-vue-calendar/style.css"
  createApp(App).use(SsVueCalendar).mount('#app')
  // 如果项目中ts警告，`npm install @xxxxx` (如果存在)，或者添加一个包含 `declare module ‘xxxxx‘；` 的新声明(.d.ts)文
  // 只需要在src下创建index.d.ts，内容是：declare module 'ss-vue-calendar'

SsVueCalendar属性

  <ss-vue-calendar :width='480' :height='480' :islunarCalendar='false'></ss-vue-calendar>

属性	说明	类型	默认值
width	宽度，支持数字/px/%	number/string	480
height	高度，支持数字/px/%	number/string	480
islunarCalendar	是否显示农历	boolean	true

SsVueCalendar事件

  <ss-vue-calendar @resetTodayHandle='xx' ></ss-vue-calendar>

事件	说明	参数类型
resetTodayHandle	点击‘今天’按钮触发	params ，今天的年月日信息
selectDayHandle	点击可点击日期触发	params，选中日的年月日信息
currentSelectDayHandle	监听到选中日变动时触发	params，选中日的年月日信息
updateYearHandle	年下拉框选中时触发	number，选中的年
updateMonthHandle	月下拉框选中时触发	number，选中的月

其中params参数

  {
    day: 阳历日
    month: 阳历月
    type: "current"  //current表示当月，last表示上月,next表示下月
    week: 阳历周 // 0~6分别代表周日到周六
    year: 阳历年
    lunarDay: 农历日
    lunarMonth: 农历月
    lunarYear: 农历年
  }

SsVueCalendar插槽

  <ss-vue-calendar>
    <template #tableHeader="scope">
      <!--scope中包含currentYear，currentMonth，currentDay信息-->
    </template>
    <template #theadCell="scope">
      <!--scope中包含星期几【'日', '一', '二', '三', '四', '五', '六'】的信息-->
    </template>
    <template #tbodyCell="scope">
      <!--scope中包含当前单元格日期信息-->
    </template>
  </ss-vue-calendar>

插槽名	说明
tableHeader	可替换表格头部，如年月下拉框等
theadCell	可替换表格头部周一，周二…
tbodyCell	可自定义单元格内容以及样式

在这里插入图片描述