使用el-calendar组件完成日历

最新推荐文章于 2024-07-29 11:00:32 发布

一个橙子呀

最新推荐文章于 2024-07-29 11:00:32 发布

阅读量2k

点赞数 1

分类专栏： Element-Ui组件文章标签： vue javascript html

本文链接：https://blog.csdn.net/hong521520/article/details/120033534

版权

本文展示了如何在Vue.js项目中使用el-calendar组件创建日历功能，包括样式和月份封装处理的方法，供开发者参考和借鉴。

摘要由CSDN通过智能技术生成

效果图
在这里插入图片描述

直接贴上这个功能,这个样式所有的代码,有需要可自行拿取,修改

<template>
  <div class="life-record">
    <!-- 头部搜索,及添加按钮 -->
    <div class="header">
      <div class="date-picker">
        <el-button
          icon="el-icon-arrow-left"
          type="text"
          @click="toPrev"
        ></el-button>
        <el-date-picker
          style="width: 136px"
          v-model="currentTime"
          type="date"
          placeholder="选择日期"
          class="date-choose"
        >
        </el-date-picker>
        <el-button
          icon="el-icon-arrow-right"
          type="text"
          @click="toNext"
        ></el-button>
      </div>
      <el-input
        style="width: 300px"
        placeholder="关键字搜索"
        suffix-icon="el-icon-search"
        v-model="params.keyword"
        @keyup.enter.native="search"
        class="search"
      >
      </el-input>
      <el-button type="primary" class="add-btn" round @click="addRecord = true"
        >添加记录</el-button
      >
    </div>
    <!-- 日历组件 -->
    <el-calendar v-model="currentTime">
      <template slot="dateCell" slot-scope="{ date, data }">
        <p>{
   {
    data.day.split("-").slice(2).join() }}</p>
        <template v-for="(item, index) in lifeListMessage">
          <el-popover
            v-if="item.createData == data.day"
            :key="index"
            placement="top-start"
            width="200"
            trigger="hover"
            :content="item.recordDetails"
          >
            <el-button
              v-if="item.createData == data.day"
              @click="toDetail(data.day)"
              class="popover-btn"
              slot="reference"
              :class="
                item.label == 3
                  ? 'mood'
                  : item.label == 2
                  ? 'every-style'
                  : 'run'
              "
              >{
   {
    item.description }}</el-button
            >
          </el-popover>
        </template>
      </template>
    </el-calendar>
    <!-- 弹窗 -->
    <div class="darkBoxs" v-if="addRecord">
      <div class="main">
        <div class="top">
          <span>添加生活记录</span>
          <i class="el-icon-close right" @click="addRecord = false"></i>
        </div>
        <el-form :model="formList" :rules="rules" ref="formList"