vue-calendar日历组件使用总结

最新推荐文章于 2025-07-07 09:00:00 发布

原创

最新推荐文章于 2025-07-07 09:00:00 发布 · 4.1w 阅读

78 ·

CC 4.0 BY-SA版权

文章标签：

#vue-calendar #vue日历插件

1.话不多说，先来个小漩涡
2.上效果
在这里插入图片描述

3.环境配置

安装cmd:
npm i vue-calendar-component --save
cnpm i vue-calendar-component --save  //国内镜像


打包前安装
npm install --save-dev babel-preset-env 
遇到提示UglifyJs打包编译错误。 因为当前版本UglifyJs不知道编译es6
解决方法 npm install --save-dev babel-preset-env 
然后在根目录创建一个 .babelrc 文件 在输入,【不用加安装即可】
{
   
    "presets": ["env"] } 
保存 重新build就OK了




引入import Calendar from "vue-calendar-component";


 引入components: {
   
   
    Calendar
  },

使用

4.上代码

<!--您的查房打卡-->
<template>
  <div class="content">
    <!--标题-->
    <p class="titleP">
      您的查房打卡情况
      <!--<span class="colorblue" @click="newDeptScopeFn(item,$event)">今日</span>-->
      <!--<span @click="GetSingleDeptScopeFn(item,$event)">昨日</span>-->
      <!--<span @click="ThreeDeptScopeFn(item,$event)">前日</span>-->
      <!--<img src="../../../../static/PC/img/lampIcon/stingicon.png" alt="设置医嘱动态" @click="department">-->
    </p>
    <p class="cardsp">
      <img src="../../../../static/PC/img/lampIcon/timeIcon.png" alt="时钟">
      <span class="spantwo">{
   
   {
   
   Today}}，今日查房打卡{
   
   {
   
   cardsnum}}次</span>
      <el-button type="primary" style="margin-left: 15px;" @click="SupplyPunchFn">查房打卡</el-button>
    </p>
    <!--日历-->
    <Calendar
      ref="Calendar"
      :markDate="arr2"
      v-on:changeMonth="changeDate"
    ></Calendar>


    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="20%">
      <span>确定打卡吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type=