基于 vue 2.0 开发的轻量，高性能日历组件

文章目录

• • • • • • 1. 安装scss
          • 2. 安装日历组件
          • 3. 安装提示组件
          • 4. 注册组件
          • 5. 页面
          • 6. 效果图

1. 安装scss

npm i -D sass-loader@8.0.2
npm i node-sass@4.14.1

2. 安装日历组件

npm i vue-calendar-component --save

3. 安装提示组件

npm install --save vue-component-toast

4. 注册组件

main.js

import toast from 'vue-component-toast'
import 'vue-component-toast/dist/css/vc-toast.min.css'

// Vue.use(toast, [<global-option>])
Vue.use(toast)

5. 页面

<template>
  <div class="content">
    <Calendar
        ref="Calendar"
        :markDateMore="arr"
        :markDate="arr2"
        v-on:isToday="clickToday"
        agoDayHide="1530115221"
        v-on:choseDay="clickDay"
        v-on:changeMonth="changeDate"
    ></Calendar>
    <br>
    <div class="choseMonth-style" style="background-color: #398ade;" @click="ChoseMonthChock ">点击跳到2022-01-21</div>
  </div>
</template>

<script>
import Calendar from "vue-calendar-component";

export default {
  data() {
    return {
      arr2: [],
      arr: [
        {
          date: "2022/01/1",
          className: "mark1"
        },
        {
          date: "2022/01/13",
          className: "mark2"
        }
      ]
    };
  },
  components: {
    Calendar
  },
  methods: {
    clickDay(data) {
      console.log("选中了", data); //选中某天
      this.$toast("选中了" + data);
    },
    clickToday(data) {
      console.log("跳到了本月今天", data); //跳到了本月
    },
    changeDate(data) {
      this.$toast("切换到的月份为" + data);
      console.log("左右点击切换月份", data); //左右点击切换月份
    },
    ChoseMonthChock() {
      this.$refs.Calendar.ChoseMonth("2018-12-13"); //跳到12月12日选中12月12日
    }
  },
  created() {
    function format(date, index) {
      date = new Date(date);
      return `${date.getFullYear()}-${date.getMonth() + 1}-${index}`;
    }

    // setTimeout(() => {
    //   this.arr = [
    //     {
    //       date: format(new Date(), 3),
    //       className: "mark1"
    //     },
    //     {
    //       date: format(new Date(), 12),
    //       className: "mark2"
    //     }
    //   ];
    //   this.arr.push({
    //     date: format(new Date(), 15),
    //     className: "mark1"
    //   });
    // }, 300);
  }
};
</script>

<style scoped>
/* 重写css部分 start */
/deep/ .wh_content_item {
  color: black;
}

/deep/ .wh_top_changge li {
  color: black;
}

/deep/ .wh_jiantou1 {
  border-top: 2px solid #030303;
  border-left: 2px solid #030303;
}

/deep/ .wh_jiantou2 {
  border-top: 2px solid #030303;
  border-right: 2px solid #030303;
}

/deep/ .wh_jiantou1 {
  background-color: white;
}

/deep/ .wh_content_all {
  background-color: #ffffff
}

/deep/ .wh_content_item .wh_isToday {
  background-color: #2b85e4
}

/deep/ .wh_content_item .wh_chose_day {
  background-color: #9acafc;
}

/* 重写css部分 end */

h3 {
  text-align: center;
  width: 90%;
  margin: auto;
}

.choseMonth-style {
  margin: auto;
  width: 220px;
  height: 44px;
  line-height: 44px;
  /*background: #0fc37c;*/
  color: #fff;
  font-size: 17px;
  text-align: center;
  margin-top: 20px;
}

.wh_container >>> .mark1 {
  background-color: orange;
}

.wh_container >>> .mark2 {
  background-color: blue;
}

.wh_content_item > .wh_isMark {
  background: orange;
}
</style>

6. 效果图