element日历calendar组件上月、今天、下月、日历块点击事件及模板源码

下面是详细讲解 "element 日历 calendar 组件上月、今天、下月、日历块点击事件及模板源码"的完整攻略。

1. 功能说明

element 日历 calendar 组件是一款强大的日期选择组件，常用于项目中的日期选择、预约等场景。在本篇攻略中，将详细讲解其上月、今天、下月、日历块点击事件及模板源码等内容。

• 上月、下月按钮点击事件：点击上月、下月后可翻页至前一个月或后一个月
• 今天按钮点击事件：点击今天按钮，可直接跳到今天的日期
• 日历块点击事件：点击具体日期块，可选择该日期并激活日历块样式

下面将详细介绍以上四种功能的实现方式。

2. 点击事件实现

2.1 上月、下月按钮点击事件

上月、下月按钮点击事件实现方式如下：

<template>
  <div>
    <el-button type="primary" @click="prevMonth">上个月</el-button>
    <el-button type="primary" @click="nextMonth">下个月</el-button>
    <el-calendar v-model="date"></el-calendar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      date: new Date(),
    };
  },
  methods: {
    prevMonth() {
      let currentDate = this.date;
      let currentMonth = currentDate.getMonth();
      this.date = new Date(currentDate.getFullYear(), currentMonth - 1, 1);
    },
    nextMonth() {
      let currentDate = this.date;
      let currentMonth = currentDate.getMonth();
      this.date = new Date(currentDate.getFullYear(), currentMonth + 1, 1);
    },
  },
};
</script>

上述代码中，通过@click绑定事件监听器，向组件传递prevMonth或nextMonth方法，控制日期翻页。

2.2 今天按钮点击事件

今天按钮点击事件实现方式如下：

<template>
  <div>
    <el-button type="primary" @click="gotoToday">今天</el-button>
    <el-calendar v-model="date"></el-calendar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      date: new Date(),
    };
  },
  methods: {
    gotoToday() {
      this.date = new Date();
    },
  },
};
</script>

上述代码中，通过@click监听器，调用gotoToday方法，以获取当前日期，实现回到当天日期。

2.3 日历块点击事件

日历块点击事件基本操作如下：

<template>
  <div>
    <el-calendar v-model="date" @change="onDateChange"></el-calendar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      date: new Date(),
    };
  },
  methods: {
    onDateChange(date) {
      console.log('当前选择的日期是：', date);
    },
  },
};
</script>

上述代码中，通过@change监听事件，将日期选择的结果返回并打印，实现日期块的选择。

3. 模板实现

日历模板实现方式如下：

<template>
  <div>
    <el-calendar
      v-model="date"
      :month-label-format="monthLabelFormat"
      :date-cell-render="dateCellRender"
    ></el-calendar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      date: new Date(),
    };
  },
  methods: {
    monthLabelFormat(date) {
      return date.getFullYear() + '年' + (date.getMonth() + 1) + '月';
    },
    dateCellRender(h, { date, activeDate }) {
      return (
        <div class="date-item">
          {date.getDate()}
        </div>
      );
    },
  },
};
</script>

<style scoped>
.date-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  transition: background-color 0.3s;
}

.date-item:hover,
.date-item.active {
  background-color: #f5f7fa;
}
</style>

上述代码中，通过monthLabelFormat方法自定义月份文本格式，使用dateCellRender方法自定义日历块的渲染方式，并添加scoped特性，防止样式冲突。最后，通过样式设置，使日历块实现鼠标悬停和激活样式效果。

4. 示例说明

下面给出两个示例：

4.1 示例1：使用前面所提到的三种监听器

<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-button type="primary" @click="prevMonth">上个月</el-button>
        <el-button type="primary" @click="nextMonth">下个月</el-button>
        <el-button type="primary" @click="gotoToday">今天</el-button>
        <el-calendar v-model="date" @change="onDateChange"></el-calendar>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      date: new Date(),
    };
  },
  methods: {
    prevMonth() {
      let currentDate = this.date;
      let currentMonth = currentDate.getMonth();
      this.date = new Date(currentDate.getFullYear(), currentMonth - 1, 1);
    },
    nextMonth() {
      let currentDate = this.date;
      let currentMonth = currentDate.getMonth();
      this.date = new Date(currentDate.getFullYear(), currentMonth + 1, 1);
    },
    gotoToday() {
      this.date = new Date();
    },
    onDateChange(date) {
      console.log('当前选择的日期是：', date);
    },
  },
};
</script>

4.2 示例2：自定义日历块渲染方式

<template>
  <div>
    <el-calendar
      v-model="date"
      :month-label-format="monthLabelFormat"
      :date-cell-render="dateCellRender"
    ></el-calendar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      date: new Date(),
    };
  },
  methods: {
    monthLabelFormat(date) {
      return date.getFullYear() + '年' + (date.getMonth() + 1) + '月';
    },
    dateCellRender(h, { date, activeDate }) {
      return (
        <div class="date-item">
          {date.getDate()}
          <div class="date-extra-text">自定义信息</div>
        </div>
      );
    },
  },
};
</script>

<style scoped>
.date-item {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  transition: background-color 0.3s;
}

.date-item:hover,
.date-item.active {
  background-color: #f5f7fa;
}

.date-extra-text {
  font-size: 10px;
  color: #848a99;
}
</style>

上述代码中，通过dateCellRender渲染日历块，并添加自定义信息。同时也给出了相应的样式设置。