element ui Calendar 自定义和Popover组件的动态内容

最新推荐文章于 2024-09-05 16:55:11 发布

wulijuan888666

最新推荐文章于 2024-09-05 16:55:11 发布

阅读量999

点赞数

分类专栏：前端文章标签： vue vue.js html less

本文链接：https://blog.csdn.net/wulijuan888666/article/details/109388350

版权

本文介绍了如何在Vue.js项目中使用Element UI的Calendar组件自定义日历单元格的内容、背景色，并结合Popover组件实现单元格悬停显示详细信息以及点击响应的功能。实现过程中涉及到HTML、JS和LESS代码的编写。

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

element ui Calendar 自定义和Popover组件的动态内容

1.需求是展示日历组件，自定义日历单元格的内容及背景色
2.鼠标悬浮于日历组件的单元格中后展示该单元格的指定的内容信息
3.点击单元格可有响应
4.所用框架是 vue.js elementui

实现步骤代码部分内容基本思想如下
html 代码

<el-calendar v-model="sMonth">
												<!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
												<template slot="dateCell" slot-scope="{ date, data }">
													<div class="data-day">
														<div @click="clickDate(date, data)" class="data-day-content">
															<div class="duty" v-if="dutydates.indexOf(data.day) !== -1">班</div>
															<el-popover
																@show="showPo(date, data)"
																placement="top-start"
																width="266"
																trigger="hover"
																popper-class="dataPopper"
																:open-delay="500"
															>
																<div class="popover-content">
																	<ul>
																		<li v-for="item in dutyList" :key="item.id" class="li-row">
																			<div>{
   {
    item.name }}</div>
																		</li>
																	</ul>
																</div>
																<div
																	slot="reference"
																	class="duty-day"
																	:class="{
   
																		statu1: date