本来呢,开开心心的写完了这个功能,然后发现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. xargs原理及用法详解

    为什么需要xargs 管道实现的是将前面的stdout作为后面的stdin,但是有些命令不接受管道的传递方式,最常见的就是ls命令.有些时候命令希望管道传递的是参数,但是直接用管道有时无法传递到命令的 ...

  2. 20190922 「HZOJ NOIP2019 Round #7」20190922模拟

    综述 这次是USACO2019JAN Gold的题目. \(\mathrm{Cow Poetry}\) 题解 因为每句诗的长度一定是\(k\),所以自然而然想到背包. 设\(opt[i][j]\)代表 ...

  3. 安卓Jsoup爬虫

    第一步:导入Jsoup包:把你的jar包放在libs下面之后 接着就会显示在你的这个地方: 重要的还是源码(搞了很久 出错很多 终于成功):我做的是输入要查找的关键字百度百科爬取主要定义,按照标签爬取 ...

  4. Linux服务器惨遭挖矿

      昨天为了协助客户测试业务,帮客户开通了一台云主机,因为是测试环境所以密码设置的很简单:1qaz@WSX,今天登陆的是否发现密码认证不通过了,确定机器是被黑掉了,估计多半是被国外小哥入侵挖矿了,记录 ...

  5. 论文阅读笔记六十一:Selective Kernel Networks(SKNet CVPR2019)

    论文原址:https://arxiv.org/pdf/1903.06586.pdf github: https://github.com/implus/SKNet 摘要 在标准的卷积网络中,每层网络中 ...

  6. CSP2019 树的重心 题解

    本题当然可以通过大力讨论每棵子树的size的大小关系,然后用各种数据结构暴力维护.但是我更倾向于用一种更为性质的做法. 首先讲一下我在考场上想到的做法(没写).就是考虑换根,在换根的过程中计算每一条边 ...

  7. Git分支的介绍及Gitlab的部署

    Git分支介绍几乎所有的版本控制系统都以某种形式支持分支. 使用分支意味着你可以把你的工作从开发主线上分离开来,以免影响开发主线.Git 处理分支的方式可谓是难以置信的轻量,创建新分支这一操作几乎能在 ...

  8. [LeetCode] 527. Word Abbreviation 单词缩写

    Given an array of n distinct non-empty strings, you need to generate minimal possible abbreviations ...

  9. web版聊天功能简单实现

    一.问题 核心点:如何找到要发送的人? 要完成一个功能我觉得首先要分析该功能的逻辑及技术难点,而不是盲目的直接就撸代码,这样非常浪费时间.个人觉得web版聊天功能没什么实际应用场景,以前看过中国移动好 ...

  10. js 实现 promise

    本文仅用于个人技术记录,如误导他人,概不负责. 本文有参考其他文章,不过地址忘了~~~. ======================================================= ...