vue elementカレンダーcalendarコンポーネント先月、今日、来月、カレンダーブロッククリックイベントおよびテンプレートソースについて

交流qq群:672373393
フロントエンドプロジェクトはコードクラウドに公開されています.https://gitee.com/xiao_yulong/noob-admin-ui
みんながグループに入って討論することを歓迎します!
辰小白さんは最近カレンダーテンプレートを書いていますが、プロジェクトにはelementコンポーネントが使われています.何elementカレンダーコンポーネントの公式ドキュメントに提供されている資料は少なすぎます.だから、ここには開発に必要な友达が辰白が踏んだ穴を少なくしてほしいと思っています.
まず、テンプレートの効果図を示します.
このプロジェクトの詳細は、次の辰小白のこの文章を紹介することができます:バックエンド開発の福音、vue+element実現のvue-element-adminフロントフレームワーク、開梱してすぐに使用します
カレンダーテンプレートのトップページのソースコードを次に示します

import calendarDrawer from "./calendar-drawer.vue";
import calendarForm from "./calendar-form.vue";
export default {
  components: { calendarDrawer, calendarForm },
  data: function() {
    return {
      value: new Date(),
      isArrange: [
        "2020-06-08",
        "2020-06-09",
        "2020-06-10",
        "2020-06-11",
        "2020-06-17",
        "2020-06-18"
      ]
    };
  },
  created: function() {
    this.$nextTick(() => {
      //       
      let prevBtn = document.querySelector(
        ".el-calendar__button-group .el-button-group>button:nth-child(1)"
      );
      prevBtn.addEventListener("click", e => {
        console.log(this.data);
        this.$notify({
          title: "   ",
          message: "     ：" + this.value,
          type: "success",
          position: "top-left"
        });
      });

      //      
      let nextBtn = document.querySelector(
        ".el-calendar__button-group .el-button-group>button:nth-child(3)"
      );
      nextBtn.addEventListener("click", () => {
        console.log(this.value);
        this.$notify({
          title: "   ",
          message: "     ：" + this.value,
          type: "warning",
          position: "top-left"
        });
      });

      //    
      let todayBtn = document.querySelector(
        ".el-calendar__button-group .el-button-group>button:nth-child(2)"
      );
      todayBtn.addEventListener("click", () => {
        this.$notify.info({
          title: "  ",
          message: "  ：" + this.value,
          position: "top-left"
        });
      });
    });
  },
  mounted: function() {},
  methods: {
    //     
    calendarOnClick(e) {
      console.log(e);
      // this.isArrange.push("2020-06-19");
      this.$notify.error({
        title: "     ",
        message: e,
        position: "top-left"
      });
    },
    //     
    infoOnClick() {
      this.$refs.calendarDrawer.drawer = true;
    },
    //    
    saveOnClick() {
      this.$refs.calendarForm.dialogFormVisible = true;
    },
    //    
    infoDel() {
      this.$confirm("           ,     ?", "  ", {
        confirmButtonText: "  ",
        cancelButtonText: "  ",
        type: "warning"
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "    !"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "     "
          });
        });
    }
  }
};

具体的ないくつかのクリックイベントにはコメントがありますが、ここでは詳しく説明しません.