網(wǎng)上查el-calendar相關(guān)的按鈕點(diǎn)擊事件文章，清一色都是在mounted掛載階段通過(guò)document.querySelector綁定類名添加點(diǎn)擊事件。

我想說(shuō)為啥要弄得這么麻煩？el-calendar組件標(biāo)簽中v-model綁定了一個(gè)Date/string/number的時(shí)間值，無(wú)論點(diǎn)擊上述哪個(gè)按鈕，該值都是會(huì)改變的。
而我們想要實(shí)現(xiàn)的是當(dāng)該時(shí)間值改變時(shí)（例如變成上個(gè)月或下個(gè)月或其他時(shí)間變回今天）執(zhí)行某個(gè)事件，那直接用watch來(lái)監(jiān)聽該值來(lái)實(shí)現(xiàn)邏輯不就更方便且簡(jiǎn)單了么

放一下我這邊的代碼：
el-calendar組件標(biāo)簽，v-model綁定的變量命名為calendarDate：

      <el-calendar v-model="calendarDate">
        <template slot="dateCell" slot-scope="{ date, data }">
          <p :class="data.isSelected ? 'is-selected' : ''">
            {{ data.day.split("-").slice(1).join("-") }}
            {{ data.isSelected ? "??" : "" }}
          </p>
          <el-input
            v-if="data.type == 'current-month'"
            :disabled="timeOptions(date)"
            v-model="calendarData[date.getDate() - 1]"
            step="0.01"
            type="number"
            size="mini"
            :min="0"
          >
          </el-input>
        </template>
      </el-calendar>

js代碼：
（這里用到了momentjs，一個(gè)非常方便的時(shí)間處理類庫(kù)，建議使用，官方文檔傳送門：Moment.js）

let moment = require("moment");

  data() {
    return {
      // 讓el-calendar綁定一個(gè)Date型的值，初始為當(dāng)前時(shí)間
      calendarDate: new Date(),
      calendarData: [0],
    };
  },

  watch: {
    // 用watch監(jiān)聽calendarDate
    // 1. 我自己項(xiàng)目中用到的較為簡(jiǎn)單的邏輯：
    // 即不管點(diǎn)擊了上月還是下月，只要時(shí)間改變，就執(zhí)行函數(shù)initFormData，調(diào)用接口，將請(qǐng)求到的新數(shù)據(jù)重新渲染在el-calendar組件的內(nèi)容上
    calendarDate(val, oldVal) {
      if (
        val &&
        moment(val).format("YYYY-MM") != moment(oldVal).format("YYYY-MM")
      ) {
        this.initFormData(val);
      }
    },

	// 2. 更嚴(yán)謹(jǐn)?shù)膶懛ǎ苯訌?fù)制粘貼代碼的朋友記得把上方的1.刪掉再使用
	calendarDate(val, oldVal) {
      if (
        val &&
        moment(val).format("YYYY-MM-DD") == moment().format("YYYY-MM-DD")
      ) {
        console.log("點(diǎn)擊了‘今天’按鈕");
      } else if (
        val &&
        moment(val).toDate() < moment(oldVal).startOf("month").toDate()
      ) {
        console.log("點(diǎn)擊了‘上個(gè)月’按鈕");
      } else if (
        val &&
        moment(val).toDate() > moment(oldVal).endOf("month").toDate()
      ) {
        console.log("點(diǎn)擊了‘下個(gè)月’按鈕");
      } else {
        console.log("點(diǎn)擊了" + moment(val).format("YYYY-MM") + "的按鈕");
      }
    },
  },

實(shí)操效果：

不過(guò)這種實(shí)現(xiàn)方式有個(gè)小bug：當(dāng)天是某個(gè)月的1日時(shí)，通過(guò)點(diǎn)擊“上個(gè)月”和“下個(gè)月”按鈕回到當(dāng)月，就會(huì)執(zhí)行點(diǎn)擊“今日”的邏輯事件。這個(gè)就根據(jù)各位項(xiàng)目中的用法自行優(yōu)化了。

直接綁定點(diǎn)擊事件

使用最開始說(shuō)的那種在mounted里綁定點(diǎn)擊事件的方法，可以避免上述bug，在這里也一起貼上來(lái)，可自行擇優(yōu)使用：

<script>
export default {
  name: "Calendar",
  data() {
    return {
      calendarDate: new Date(),
    };
  },
  components: {},
  mounted() {
    this.$nextTick(() => {
      // 點(diǎn)擊前一個(gè)月
      let prevBtn = document.querySelector(
        ".el-calendar__button-group .el-button-group>button:nth-child(1)"
      );
      prevBtn.addEventListener("click", () => {
        this.judgeDate(this.calendarDate);
      });
      let dayBtn = document.querySelector(
        ".el-calendar__button-group .el-button-group>button:nth-child(2)"
      );
      dayBtn.addEventListener("click", () => {
        this.judgeDate(this.calendarDate);
      });
      let nextBtn = document.querySelector(
        ".el-calendar__button-group .el-button-group>button:nth-child(3)"
      );
      nextBtn.addEventListener("click", () => {
        this.judgeDate(this.calendarDate);
      });
    });
  },
  methods: {
    // 判斷時(shí)間
    judgeDate(dateVal) {
		console.log(dateVal);
    },
  },
};
</script>

更多日歷組件的項(xiàng)目應(yīng)用可詳見我的下一篇文章，例如給每一天加input輸入框、超過(guò)當(dāng)天時(shí)間和跨一個(gè)月前的時(shí)間禁用輸入框等等：

感謝觀看，THX~