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

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

实现了显示农历,备注功能,点击某一天为某一天添加备注的功能...

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

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

以下是修改代码的地方,等我有空了写个 dome 传到自己的github上

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>

Vue日历组件的功能的更多相关文章

  1. vue 日历组件只显示本月和下个月 -- 多选日期

    效果就是上图 代码贴出 1.在components > calander > index.vue <template> <div class="page&quo ...

  2. vue 日历组件

    Github 上很多点击弹出日历选择某个时间的组件,却没有找到单纯展示日历并且能点击获取时间的组件 npm i vue-calendar-component --save cnpm i vue-cal ...

  3. 一个vue的日历组件

    说明: 1.基于element-ui开发的vue日历组件. 地址 更新: 1.增加value-format指定返回值的格式2.增加头部插槽自定义头部 <ele-calendar > < ...

  4. vue初学实践之路——vue简单日历组件(1)

    ---恢复内容开始--- 最近做的项目有一个需求,需要有一个日历组件供预定功能使用,之前的代码过于繁琐复杂,所以我采用vue重写了这个组件. npm.vue等等安装. 只是一个简单的日历组件,所以并不 ...

  5. vue-calendar 基于 vue 2.0 开发的轻量,高性能日历组件

    vue-calendar-component 基于 vue 2.0 开发的轻量,高性能日历组件 占用内存小,性能好,样式好看,可扩展性强 原生 js 开发,没引入第三方库 Why Github 上很多 ...

  6. vue初学实践之路——vue简单日历组件(3)

    这一篇我们来实现管理员修改每一天剩余数量的功能. <div id="calendar"> <div id="left"> <spa ...

  7. 日历视图(CalendarView)组件的功能和用法

    日历视图(CalendarView)可用于显示和选择日期,用户既可选择一个日期,也可通过触摸来滚动日历.如果希望监控该组件的日历改变,可调用CalendarView的setOnDateChangeLi ...

  8. 多功能版vue日历控件

    下载地址:https://pan.baidu.com/s/1nvpx0tB5cIvvqHuApz_MpQ 之前写了一个简单的vue日历控件:https://www.cnblogs.com/mrzhu/ ...

  9. 基于Vue的简单日历组件

    日历组件 由于移动端项目中需要用到日历组件,网上找了下,没看到几个合适的,就尝试着自己写一个.然后发现也不是很复杂,目前只做了最基本的功能,大家也可以拿去做做二次开发. 如何写一个日历组件 基础效果如 ...

随机推荐

  1. JDOJ 1162 是否闰年

    1162: 是否闰年 https://neooj.com:8082/oldoj/problem.php?id=1162 题目描述 输入一个年份year,求year是否是闰年,如果是闰年输出L,否则输出 ...

  2. 手机爬虫--appium

    adb 安装:下载android-sdk压缩包,解压后其中有adb.exe,配置环境变量后即可 cmd下'adb'即可启动adb客户端 adb devices –l  查看已连接的模拟器 adb co ...

  3. 洛谷 P1016 旅行者的预算

    传送门 感觉自己连点生活常识都没有,竟然连油用过之后要减去都不知道,这种贪心模拟题都做不出来--思路在代码里,我菜死了 思路&&代码 //看题解过的..一点都没有成就感 #includ ...

  4. [LeetCode] 209. Minimum Size Subarray Sum 最短子数组之和

    Given an array of n positive integers and a positive integer s, find the minimal length of a contigu ...

  5. Shell脚本是什么、它是必需的吗?

    一个Shell脚本是一个文本文件,包含一个或多个命令.作为系统管理员,我们经常需要使用多个命令来完成一项任务,我们可以添加这些所有命令在一个文本文件(Shell脚本)来完成这些日常工作任务.

  6. [转载]3.12 UiPath存在元素Element Exists的介绍和使用

    一.Element Exists的介绍 使您能够验证UI元素是否存在,即使它不可见,输出的是一个布尔值 二.Element Exists在UiPath中的使用 1.打开设计器,在设计库中新建一个Seq ...

  7. 逆天的化妆CSS

    初涉前端之CSS 1.css介绍 ​ CSS是前端在HTML之前所走的后续工作,CSS的学名叫做层叠样式,他是用来定义如何来显示我们写的HTML元素的:当一个浏览器读取到了一个样式表,他就会按照这个样 ...

  8. Spring Cloud(十四):Ribbon实现客户端负载均衡及其实现原理介绍

    年后到现在一直很忙,都没什么时间记录东西了,其实之前工作中积累了很多知识点,一直都堆在备忘录里,只是因为近几个月经历了一些事情,没有太多的经历来写了,但是一些重要的东西,我还是希望能坚持记录下来.正好 ...

  9. Shell脚本——添加和删除用户

    写一个脚本admin_user.sh,其用法格式为: admin_user.sh --add USERLIST --del USERLIST -v|--verbose -h|--help 其中, -h ...

  10. pytorch-04-激活函数

    sigmoid函数: 越大的负数越接近0,越大的正数越接近1缺点:(1)造成梯度消失:该函数在靠近1和0的两端,梯度几乎变成0,梯度下降法:梯度乘上学习率来更新参数,如果梯度接近0,那么没有任何信息来 ...