只展示月份天数的日历，日历内容超出固定高度支持展开

已于 2024-05-09 10:30:55 修改
阅读量289 收藏 1
点赞数 1
文章标签： javascript 前端 vue.js
于 2024-05-09 10:30:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47529732/article/details/138601054
版权

目录

 

1. 需求说明

1.1 效果图：

1.2 难点

2. 日历 

2.1 日历需要的数据

 2.2 日历及展开收起逻辑代码

 2.3 PlanContent 组件

 

1. 需求说明

        实现只展示月份天数的日历，日历保养计划列表不超出固定高度则不显示展开按钮，否则支持展开收起当行。

1.1 效果图：

默认情况下：

点击展开后的效果图：

1.2 难点

        一个保养计划可能占两行且适配情况下也不允许判断保养计划数组的长度来显示展开收起按钮，故而需要获取天格子的保养计划内容的容器的 scrollHeight 是否大于 clientHeight，大于则支持展开收起。我这边是把天的格子封装成 PlanContent 组件。

2. 日历 

2.1 日历需要的数据

store/modules/pmPlans.js


export default {
  namespaced: true,
  state: {
    pmPlansArr: [
      {
        "date": 1,
        "hiddenMore": true,
        "assetPmPlans": [
          {
            "categoryCode": "YB-ZN-ZFDH-CPFLMV9bKlEC3DHybcgn",
            "categoryName": "环境",
            "items": [
              {
                "assetQty": 1,
                "period": 1,
                "periodName": "周"
              }
            ]
          }
        ]
      },
      {
        "date": 2,
        "hiddenMore": true,
        "assetPmPlans": [
          {
            "categoryCode": "YB-ZN-ZFDH-CPFLMV9bKlEC5Tlvx300",
            "categoryName": "空调机组",
            "items": [
              {
                "assetQty": 2,
                "period": 1,
                "periodName": "周"
              }
            ]
          }
        ]
      },
      {
        "date": 3,
        "hiddenMore": true,
        "assetPmPlans": []
      },
      {
        "date": 4,
        "hiddenMore": true,
        "assetPmPlans": []
      },
      {
        "date": 5,
        "hiddenMore": true,
        "assetPmPlans": []
      },
      {
        "date": 6,
        "hiddenMore": true,
        "assetPmPlans": []
      },
      {
        "date": 7,
        "hiddenMore": true,
        "assetPmPlans": []
      },
      {
        "date": 8,
        "hiddenMore": true,
        "assetPmPlans": [
          {
            "categoryCode": "YB-ZN-ZFDH-CPFLMV9bKlEC3DHybcgn",
            "categoryName": "环境",
            "items": [
              {
                "assetQty": 1,
                "period": 1,
                "periodName": "周"
              }
            ]
          }
        ]
      },
      {
        "date": 9,
        "hiddenMore": true,
        "assetPmPlans": [
          {
            "categoryCode": "YB-ZN-ZFDH-CPFLMV9bKlEC5Tlvx300",
            "categoryName": "空调机组",
            "items": [
              {
                "assetQty": 2,
                "period": 1,
                "periodName": "周"
              }
            ]
          },
          {
            "categoryCode": "YB-ZN-ZFDH-CPFLMV9bKlEC1FOgO8bg",
            "categoryName": "UPS",
            "items": [
              {
                "assetQty": 1,
                "period": 4,
                "periodName": "月度"
              }
            ]
          }
        ]
      },
      {
        "date": 10,
        "hiddenMore": true,
        "assetPmPlans": []
      },
      {
        "date": 11,
        "hiddenMore": true,
        "assetPmPlans": []
      },
      {
        "date": 12,
        "hiddenMore": true,
        "assetPmPlans": []
      },
      {
        "date": 13,
        "hiddenMore": true,
        "assetPmPlans": []
      },
      {
        "date": 14,
        "hiddenMore": true,
        "assetPmPlans": []
      },
      {
        "date": 15,
        "hiddenMore": true,
        "assetPmPlans": [
          {
            "categoryCode": "YB-ZN-ZFDH-CPFLMV9bKlEC3DHybcgn",
            "categoryName": "环境",
            "items": [
              {
                "assetQty": 1,
                "period": 1,
                "periodName": "周"
              }
            ]
          }
        ]
      },
      {
        "date": 16,
        "hiddenMore": true,
        "assetPmPlans": [
          {
            "categoryCode": "YB-ZN-ZFDH-CPFLMV9bKlEC3DHybcgn",
            "categoryName": "环境",
            "items": [
              {
                "assetQty": 1,
                "period": 3,
                "periodName": "半月"
              }
            ]
          },
          {
            "categoryCode": "YB-ZN-ZFDH-CPFLMV9bKlEC5Tlvx300",
            "categoryName": "空调机组",
            "items": [
              {
                "assetQty": 2,
                "period": 1,
                "periodName": "周"
              }
            ]
          },
          {
            "categoryCode": "YB-ZN-ZFDH-CPFLMV9bKlEC1FOgO8bg",
            "categoryName": "UPS",
            "items": [
              {
                "assetQty": 2,
                "period": 3,
                "periodName": "半月"
              }
            ]
          },
          {
            "categoryCode": "YB-ZN-ZFDH-CPFLMV9bKlEC1FOgO8bg",
            "categoryName": "UPS",
            "items": [
              {
                "assetQty": 1,
                "period": 4,
                "periodName": "月度"
              },
              {
                "assetQty": 2,
                "period": 3,
                "periodName": "半月"
              }
            ]
          },
          {
            "categoryCode": "YB-ZN-ZFDH-CPFLMV9bKlEC3DHybcgn",
            "categoryName": "环境",
            "items": [
              {
                "assetQty": 1,
                "period": 3,
                "periodName": "半月"
              }
            ]
          },
          {
            "categoryCode": "YB-ZN-ZFDH-CPFLMV9bKlEC3DHybcgn",
            "categoryName": "环境",
            "items": [
              {
                "assetQty": 1,
                "period": 1,
                "periodName": "周"
              }
            ]
          }
        ]
      },
      {
        "date": 17,
        "hiddenMore": true,
        "assetPmPlans": []
      },
      {
        "date": 18,
        "hiddenMore": true,
        "assetPmPlans": []
      },
      {
        "date": 19,
        "hiddenMore": true,
        "assetPmPlans": []
      },
      {
        "date": 20,
        "hiddenMore": true,
        "assetPmPlans": []
      },
      {
        "date": 21,
        "hiddenMore": true,
        "assetPmPlans": []
      },
      {
        "date": 22,
        "hiddenMore": true,
        "assetPmPlans": [
          {
            "categoryCode": "YB-ZN-ZFDH-CPFLMV9bKlEC3DHybcgn",
            "categoryName": "环境",
            "items": [
              {
                "assetQty": 1,
                "period": 1,
                "periodName": "周"
              }
            ]
          }
        ]
      },
      {
        "date": 23,
        "hiddenMore": true,
        "assetPmPlans": [
          {
            "categoryCode": "YB-ZN-ZFDH-CPFLMV9bKlEC5Tlvx300",
            "categoryName": "空调机组",
            "items": [
              {
                "assetQty": 2,
                "period": 1,
                "periodName": "周"
              }
            ]
          }
        ]
      },
      {
        "date": 24,
        "hiddenMore": true,
        "assetPmPlans": []
      },
      {
        "date": 25,
        "hiddenMore": true,
        "assetPmPlans": []
      },
      {
        "date": 26,
        "hiddenMore": true,
        "assetPmPlans": []
      },
      {
        "date": 27,
        "hiddenMore": true,
        "assetPmPlans": []
      },
      {
        "date": 28,
        "hiddenMore": true,
        "assetPmPlans": []
      },
      {
        "date": 29,
        "hiddenMore": true,
        "assetPmPlans": [
          {
            "categoryCode": "YB-ZN-ZFDH-CPFLMV9bKlEC3DHybcgn",
            "categoryName": "环境",
            "items": [
              {
                "assetQty": 1,
                "period": 1,
                "periodName": "周"
              }
            ]
          }
        ]
      },
      {
        "date": 30,
        "hiddenMore": true,
        "assetPmPlans": [
          {
            "categoryCode": "YB-ZN-ZFDH-CPFLMV9bKlEC5Tlvx300",
            "categoryName": "空调机组",
            "items": [
              {
                "assetQty": 2,
                "period": 1,
                "periodName": "周"
              }
            ]
          }
        ]
      },
      {
        "date": 31,
        "hiddenMore": true,
        "assetPmPlans": [
          {
            "categoryCode": "YB-ZN-ZFDH-CPFLMV9bKlEC1FOgO8bg",
            "categoryName": "UPS",
            "items": [
              {
                "assetQty": 1,
                "period": 4,
                "periodName": "月度"
              },
              {
                "assetQty": 2,
                "period": 3,
                "periodName": "半月"
              }
            ]
          },
          {
            "categoryCode": "YB-ZN-ZFDH-CPFLMV9bKlEC3DHybcgn",
            "categoryName": "环境",
            "items": [
              {
                "assetQty": 1,
                "period": 3,
                "periodName": "半月"
              }
            ]
          }
        ]
      }
    ],
    daysInMonth: 31
  },
  getters: {},
  mutations: {},
  actions: {}
}

 2.2 日历及展开收起逻辑代码

<template>
  <!-- 日历 -->
  <div class="parent-table">
    <div class="content" v-for="(item, i) in pmPlans" :key="i">
      <PlanContent :i="i" :items="item" @handleHiddenMore="handleHiddenMore">
      </PlanContent>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { computed, ref } from "vue"
import PlanContent from "./PlanContent.vue";

import { useStore } from 'vuex'
const store = useStore()

const pmPlans = computed(() => store.state.pmPlans.pmPlansArr)

const monthDays = computed(() => store.state.pmPlans.daysInMonth)
// 展开、收起 逻辑
const handleHiddenMore = (i) => {

  let lineIndex = Math.floor(i / 7) + 1
  console.log(lineIndex);

  for (let x = 0; x < 7; x++) {
    console.log((lineIndex - 1) * 7 + x, pmPlans.value[(lineIndex - 1) * 7 + x]);
    const y = (lineIndex - 1) * 7 + x
    if (y > monthDays.value) {
      break
    }
    pmPlans.value[y].hiddenMore = !pmPlans.value[y].hiddenMore
  }
}

</script>

<style lang="less" scoped>
.parent-table {
  table-layout: fixed;
  width: inherit;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-left: 1px solid #ddd;
  padding-top: 1PX;
  overflow: auto;
  padding-bottom: 1PX;
  padding-right: 0.5PX;
  margin-top: 10px;

  .content {
    margin: -1px 0 0 -1px;
    padding: 6PX 12PX;
    box-sizing: border-box;
    font-family: "PingFang SC";
    border: 1px solid #ddd;
  }

}
</style>

 2.3 PlanContent 组件

我这边的实际需求是支持从月度计划和人员安排维度查看保养计划的，在切换的情况下有些小圆点a-badge组件被挤成一半，加个左右外边距可解决此问题。

<template>
    <div>
        <div class="top-day">
            {{ item.date }}
            <span class="toggle-btn" v-show="isShow" @click="handleHiddenMore">{{ item.hiddenMore ? '展开' :
                '收起' }}</span>
        </div>
        <div class="plans-father" :style="item.hiddenMore ? 'height: 78PX;' : 'height: auto;'">

            <div class="plans" ref="contentRef" :style="item.hiddenMore ? 'overflow: hidden;' : 'overflow: visible;'">
                <div class="plan-list" v-for="(elem, j) in item.assetPmPlans" :key="j">
                    <div class="flex">
                        <a-badge class="badge" color="#04CB67" />
                        <div class="inline">
                            <span>{{ elem.categoryName }}</span>
                            <div class="inline" v-for="(x, y) in elem.items" :key="y">
                                <span class="asset-num">{{ x.assetQty
                                    }}</span>
                                <span>台</span>
                                <span class="period">({{ x.periodName }})</span>
                                <span v-show="y != elem.items.length - 1">、</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>

import { defineEmits, onMounted, defineProps, nextTick, ref, computed } from "vue"
const props = defineProps({
    id: Number,
    items: Object,
    i: Number
});
const isShow = ref(false)
const contentRef = ref(null);
const item = computed(() => props.items)


onMounted(() => {
    nextTick(() => {
        isShow.value = contentRef.value.scrollHeight > contentRef.value.clientHeight
    })
});
const emit = defineEmits(["handleHiddenMore"]);

const handleHiddenMore = () => {
    emit("handleHiddenMore", props.i)
}
</script>
<style scoped lang="less">
.top-day {
    position: relative;
    text-align: center;
    color: #000;
    font-size: 24PX;
    font-weight: 500;
    line-height: 34PX;
    vertical-align: middle;
    font-family: "PingFang SC";
}

.plans {
    height: inherit;
    font-family: "PingFang SC";

    .plan-list:last-child {
        padding-bottom: 0;

        .period {
            color: #8C8C8C;
        }
    }

    .plan-list {

        text-align: left;
        display: flex;
        color: #262626;
        font-size: 12PX;
        line-height: 24PX;

        .flex {
            display: flex;
        }

        .pm-plans,
        .inline {
            display: inline;
        }

        .asset-num {
            padding: 0 2px;
            cursor: pointer;
            font-weight: 500;
        }
    }
}
</style>

weixin_47529732
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
cocosCreator日历插件
weixin_42146357的博客
01-14 2059
刚来公司不久写的，希望能给大家带来帮助! /* @Author: mikey.ni @Date: 2018-5-14 10:24:46 @Last Modified by: mikey.ni @Last Modified time: 2019-01-14 10:41:20 @mailbox [email protected] */ import { LayerManager }...
分享3个php获取日历的函数
10-23
本文给大家汇总了3个php获取日历的函数，分别是php获取指定日期的月份的日历、获取指定日期所在月的开始日期与结束日期、获取当前星期的日期范围，都是比较常用的方法，有需要的小伙伴可以参考下。
element UI日历组件自定义操作设置农历、阳历、节日展示、单日操作
Hzq88888的博客
05-20 4589
图例： 自定义calendar.js,其他页面直接引入就可以 /** * @1900-2100区间内的公历、农历互转 * @charset UTF-8 * @Author Jea杨([email protected]) * @Time 2014-7-21 * @Time 2016-8-13 Fixed 2033hex、Attribution Annals * @Time 2016-9-25 Fixed lunar LeapMonth Param Bug * @T.
vue中el-calendar自定义日历控件
醉梦洛的博客
07-26 6178
点击查询将变化的value传给calendar组件就可以实现日历动态变化，如果是单个数据可以直接赋值。如果是多个，需要循环遍历后，再把值赋给Calendar组件的value中。做一个维护节假日的功能，有背景颜色的就是维护上去的假节日。要有添加和删除节假日的操作，默认查询当年当月的节假日，也可以通过搜索年月去查询节假日。注此处有用到删除calendar组件自带上一月，今天，下一月的操作，需要再挂载的时候加入删除按钮的代码。注官方组件给出的属性介绍太少了，不能太满足需求，通过多次问度娘才能找到答案。...
日历选择器html,日历选择器 - 常见 Web 特效实践
weixin_39937524的博客
06-03 479
首先我们想一下我们平常看到的日历选择器，通常头部会有一个星期几表头，下面就是日期，而日期下面通常会有1号，1号前面应该有一些上个月的日期，而最后一天后面还应该有下一个月的日期。对于日期相关处理，JavaScript 提供了 Date 对象。getDate 获得一个月的第几天getDay 获得一个星期的第几天 (0 - 6)getMonth 获取月份 (0 - 11)getFullYear 获取年...
用php打印出日历_php简单日历函数
weixin_29119033的博客
03-08 655
这篇文章主要介绍了php简单日历函数，没有选择比较常见的用js生成的日历，而是用php输出了一个日历表格，感兴趣的小伙伴们可以参考一下本文实例讲述了php实现的日历程序。分享给大家供大家参考。具体如下：/** php 输出日历程序*/header("Content-type: text/html;charset=utf-8");$year=(!isset($_GET['year'])||$_GET...
Vue日历的编写，可显示周和月的模式（其中可以自定义日历里内容的显示）
X_xiaoqi的博客
12-15 5829
之前写了一篇周和月日历，但感觉体验不是太好，所以有重新做了一遍，加上了动画。还可以自定义显示日历里的内容。 现在贴出项目源码,我现在是放在CSDN里的下载资源里,我也想设为不要积分可以下载,但好像最少也要1积分地址为:这里哦 现在我上传带了GitHub上了,可以去这里下载哦,如果觉得好的话希望能给个star,谢谢支持 1.总共分为两个组件（父组件calendar.vue） <tem...
c语言多功能日历菜单,C语言课程设计日历显示
weixin_31476015的博客
05-18 608
《C语言课程设计日历显示》由会员分享，可在线阅读，更多相关《C语言课程设计日历显示(17页珍藏版)》请在人人文库网上搜索。1、中国海洋大学青岛学院C语言课程设计报告书题 目日历显示学生姓名指导教师学 院专业班级组内分工姓名主要任务占系统比例日期判断，日期调整50%日期查询，闰年判断，主函数50%目 录1 前言12 需求分析23 模块设计图及组内分工34 NS流程图清单55 存储结构及函数说明86 ...
php设置一个日历,一个PHP日历程序
weixin_33624741的博客
03-11 73
一个PHP日历程序更新时间：2006年12月06日 00:00:00 作者：//if($HTTP_GET_VARS[year]==""){$HTTP_GET_VARS[year]=date("Y");}if($HTTP_GET_VARS[month]==""){$HTTP_GET_VARS[month]=date("n");}$month=$HTTP_GET_VARS[month];$year...
Calendar的set方法陷阱，导致日历应用无法正确显示2月份日历
zhansan的博客
01-05 751
正确写法，加上clear() package model; import java.util.Calendar; public class MyCalendarLogic { //カレンダーインスタンスを生成するメソッド(int...は可変長引数) public MyCalendar createMyCalendar(int... args) { //マイカレンダーインスタンス生成 MyCalendar mc = new MyCalendar();
Java程序设计：输入年份月份，得到当月的日历
09-11
Java程序设计：输入年份月份，得到当月的日历 有详细注释 一目了然
2023年日历（标记工作日，节假日，调休，周末），计算两个日期相差的工作日天数
12-12
压缩包里有2个文件，用于计算两个日期相差的工作日天数（排除周末和法定节假日）： 1、excel表为2023年日历数据，并且备注工作日、周末，调休、节假日类型，可导入数据库。 2、SQL文件为2023年所有日期的插入SQL，并...
sqlserver中获取月份的天数的方法分享
09-11
今天查看以前专案的数据库自定义函数，温习温习。发现其中有一个函数，是获取月份的天数的自定义函数。
C# 获取当前月份天数的三种方法总结
09-04
本篇文章主要是对C#中获取目前月份的天数的三种方法进行了详细的总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助
openlayers绘制经纬网格，有添加或者移除功能
qq_52959651的博客
05-21 219
我的项目是vue写的，当点击多选框显示隐藏经纬网格，下面直接写代码。项目需要在地图中添加经纬网格，然后看了一下官网有相关的介绍。这是删除图层相关的网站。这是绘制经纬网格方法。
React Suspense与Concurrent Mode：异步渲染的未来
天涯学馆
05-20 1075
React的Suspense和Concurrent Mode是React 16.8及更高版本引入的概念，旨在提升用户体验和性能，特别是在处理异步数据加载和动画时。它们是React的下一代渲染策略的一部分，目的是实现更流畅的交互和更高效的资源调度。
vue 使用 export default
最新发布
global_coding的博客
05-24 299
vue 使用 export default
深入解析：Element Plus 与 Vite、Nuxt、Laravel 的结合使用
一个普通人
05-23 910
Element Plus 作为一个强大的 Vue.js 组件库，可以与 Vite、Nuxt 和 Laravel 等不同的工具和框架结合使用，为开发者提供灵活、高效的开发体验。根据项目需求选择合适的工具和框架，可以极大地提升开发效率和应用性能
js创建简单日历，可以显示月份天数
03-25
可以使用 JavaScript 代码创建简单的日历，在 HTML 中添加一个容器元素，然后在 JavaScript 中创建日期对象，通过日期对象获取当前月份的天数以及第一天是星期几，最后遍历日期并将它们填充到容器中即可。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值