vue-calendar日历组件使用总结

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="primary" @click="sure">确 定</el-button>
      </span>
    </el-dialog>


  </div>
</template>

<script>

  import * as HomeInfoApi from '@/api/PC/Home/HomeInfo.js'//引入apijs
  import Calendar from "vue-calendar-component";//引入vue日历
  import common from '@/assets/PC/js/common.js'//引入时间函数
  export default {
    data() {
      return {
        // arr2: ['2018/6/23'],
        arr2: [ "2019/4/2", "2019/4/3", "2019/4/4"],
        // arr: [
        //   {
        //     date: "2019/4/1",
        //     className: "mark1"
        //   },
        //   {
        //     date: "2019/4/13",
        //     className: "mark2"
        //   }
        // ],
        Today:'',//当前日期
        cardsnum:0,//当前打卡次数
        cardsradio:'2',//当日是否查房打卡
        dialogVisible:false
      };
    },
    components: {
      Calendar
    },
    created() {
        this.GetSignDateList();//加载前获取已打卡清单
        this.GetSignCountFn();//获取今日查房打卡次数
    },
    methods: {
      changeDate(data) {
        //console.log(data); //左右点击切换月份
      },

      //加载前获取已打卡清单
      GetSignDateList(){
        var param=common.getNowDate().yeardate;

        //获取清单axios
        HomeInfoApi.GetSignDateList(param).then(res => {
          if(res.Errs.length==0){
            this.arr2=res.Result.DateList
          }else{
            let Errs=res.Errs[0];
            this.$message({
              type: "error",
              message: Errs
            });
          }
        }).catch(err => {

        });
      },

      //获取今日查房打卡次数
      GetSignCountFn(){
        this.Today= common.getNowDate().currentdateSameday;//获取今天日期
        var paramtime=this.Today;
        HomeInfoApi.GetSignCount(paramtime).then(res => {
          if(res.Errs.length==0){
            this.cardsnum=res.Result
            if(res.Result>0){
              this.cardsradio='1'
            }else{
              this.cardsradio='2'
            }
          }else{
            let Errs=res.Errs[0];
            this.$message({
              type: "error",
              message: Errs
            });
          }
        }).catch(err => {

        });
      },

      //打卡
      SupplyPunchFn(){
        this.dialogVisible=true;
      },

      sure(){
        var date=this.Today;//日期
        var SignInNum=this.cardsnum;//已打卡次数
        this.dialogVisible=false;
        HomeInfoApi.SupplyPunch(date,SignInNum).then(res => {
          if(res.Errs.length==0){
            this.cardsnum=res.Result
            if(res.Result>0){
              this.cardsradio='1'
            }else{
              this.cardsradio='2'
            }
            this.GetSignCountFn()
          }else{
            let Errs=res.Errs[0];
            this.$message({
              type: "error",
              message: Errs
            });
          }
        }).catch(err => {

        });
      }


    },

    mounted () {

    }
  };
</script>

<!-- Add "scoped " attribute to limit CSS to this component only -->
<style scoped>

    .content{
      padding: 15px;
    }

    .cardsp{
      height: 28px;
      line-height: 28px;
      position: relative;
      padding-left: 15px;
      margin-bottom: 15px;
    }
    .cardsp img{
      position: absolute;
      top: 7px;
    }
    .cardsp .spantwo{
      margin-left: 16px;
    }
    .cardsp .spanthere{
      margin-left: 15px;
    }
    .circular{
      display: inline-block;
      /*width: 12px;*/
      /*height: 12px;*/
      border: 5px solid #136aa7;
      border-radius: 50%;
    }






  .titleP{
    height: 14px;
    line-height: 14px;
    font-size: 14px;
    font-weight: bold;
    border-left: 3px solid #136aa7;
    padding-left: 12px;
    position: relative;
    margin-bottom: 15px;
  }


  .title{
    background-color: #2fd85e;
    font-size: 16px;
  }

  .div {
    margin: auto;
    width: 220px;
    height: 44px;
    line-height: 44px;
    background: red;
    color: black;
    font-size: 17px;
    text-align: center;
    margin-top: 20px;
  }


  /*.wh_container >>> .mark1 {*/
    /*background-color: orange;*/
  /*}*/
  /*.wh_container >>> .mark2 {*/
    /*background-color: blue;*/
  /*}*/
  .wh_container >>> .wh_content_all{
    background-color:#ffffff!important;
    border:1px solid #dfe0e6;
    width:600px;
    border-radius: 6px;
  }
  .wh_container{
    margin: 0px!important;
  }

  .wh_container >>> .wh_item_date{
    color:#211d48;

  }
    .wh_container >>> .wh_item_date:hover{
      color:#ffffff;
      background: #136aa7;
      border-radius: 50%;
    }
  .wh_container >>>  .wh_other_dayhide{
    color:#cccccc;
  }

  .wh_container >>> .wh_content_item{
    margin-bottom: 5px;
    margin-top: 5px;
  }

  .wh_container >>> .wh_content{
    color:black;
  }

  .wh_container >>> .wh_top_tag{
    color:black;
  }
  .wh_container >>> .wh_content_li{
    color:#162947;
    font-weight: bold;
  }
  .wh_container >>> .wh_jiantou1{
    border-top: 2px solid #162947;
    border-left: 2px solid #162947;
  }
  .wh_container >>> .wh_jiantou2{
    border-top: 2px solid #162947;
    border-right: 2px solid #162947;
  }


  .wh_container >>> .wh_content_item>.wh_isMark{
    background-color: rgba(19,105,167,0.15);
    /*border-radius: 0px;*/
  }
  .wh_container >>> .wh_content_item .wh_isToday{
    background-color: rgba(19,105,167,1);
    /*border-radius: 0px;*/
    color: #ffffff;
  }
    .wh_container >>> .wh_content_item .wh_chose_day{
      background-color: rgba(19,105,167,1);
      /*border-radius: 0px;*/
      color: #ffffff;
    }
</style>

<!--<style>-->
  <!--.content .el-radio__input.is-disabled .el-radio__inner, .el-radio__input.is-disabled.is-checked .el-radio__inner{-->
    <!--border-color: #1369a7!important;-->
    <!--background-color: #1369a7!important;-->

  <!--}-->
<!--</style>-->

5.样式修改为重点，欢迎大家参考。