Vue日历组件的功能

本来呢,开开心心的写完了这个功能,然后发现elemeng更新了,增加了日历组件这个功能

我的内心机器奔溃,但是,element的日历组件太简单了,我感觉还是手撸一个吧,毕竟也不是很难

引用的是他人写好的组件: https://github.com/herozhou/vue-order-calendar

  在他的基础上增加了功能,实现了备注功能.实现方法是:后台返回的备注数据中,要求带有数据为天数的字段,然后使用-for循环,判断,渲染

  

1 <!-- 遍历备注,判断日期是否一致 -->
2 <div v-for="(item,i) in remarksList" :key="i">
3   <el-tooltip placement="top">
4       <div slot="content" style="max-width:200px;">{{item.content}}</div>
5       <div class="remarks" v-if="dayobject.day.getDate() == item.day">{{item.content}}</div>
6   </el-tooltip>
7 </div>

转载于:https://www.cnblogs.com/jun-qi/p/10894988.html

我很抱歉,但是我无法直接通过引用内容查看具体的图片和代码。然而,根据你提供的引用信息,我可以告诉你关于vue日历自定义组件的一些信息。 根据引用,这个组件目录可以提供给你一些关于vue日历自定义组件的相关代码和文件。 根据引用,这个vue日历组件支持农历和假期展示,并且可以自定义可选择的日期范围。 根据引用,在组件中使用这个vue日历组件,你需要在main.js中引入它。组件默认情况下会显示一个自定义的左侧icon。某一个日期可以出现选中状态,也可以使用圆点模式来表示选中状态。你可以通过传递一个包含active属性的数组对象来自定义某一天的数据。 总的来说,这个vue日历自定义组件提供了一些可定制化的功能,包括农历展示、假期展示以及可选择日期范围等。你可以根据你的需求在组件中进行相应的配置和使用。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [vue自定义日历组件](https://blog.csdn.net/weixin_38644883/article/details/88067612)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [vue日历组件,支持农历以及假期展示,可以自定义可选择日期范围](https://download.csdn.net/download/qq_29597215/86267518)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值