Vue日历组件的功能
本来呢,开开心心的写完了这个功能,然后发现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日历组件的功能的更多相关文章
- vue 日历组件只显示本月和下个月 -- 多选日期
效果就是上图 代码贴出 1.在components > calander > index.vue <template> <div class="page&quo ...
- vue 日历组件
Github 上很多点击弹出日历选择某个时间的组件,却没有找到单纯展示日历并且能点击获取时间的组件 npm i vue-calendar-component --save cnpm i vue-cal ...
- 一个vue的日历组件
说明: 1.基于element-ui开发的vue日历组件. 地址 更新: 1.增加value-format指定返回值的格式2.增加头部插槽自定义头部 <ele-calendar > < ...
- vue初学实践之路——vue简单日历组件(1)
---恢复内容开始--- 最近做的项目有一个需求,需要有一个日历组件供预定功能使用,之前的代码过于繁琐复杂,所以我采用vue重写了这个组件. npm.vue等等安装. 只是一个简单的日历组件,所以并不 ...
- vue-calendar 基于 vue 2.0 开发的轻量,高性能日历组件
vue-calendar-component 基于 vue 2.0 开发的轻量,高性能日历组件 占用内存小,性能好,样式好看,可扩展性强 原生 js 开发,没引入第三方库 Why Github 上很多 ...
- vue初学实践之路——vue简单日历组件(3)
这一篇我们来实现管理员修改每一天剩余数量的功能. <div id="calendar"> <div id="left"> <spa ...
- 日历视图(CalendarView)组件的功能和用法
日历视图(CalendarView)可用于显示和选择日期,用户既可选择一个日期,也可通过触摸来滚动日历.如果希望监控该组件的日历改变,可调用CalendarView的setOnDateChangeLi ...
- 多功能版vue日历控件
下载地址:https://pan.baidu.com/s/1nvpx0tB5cIvvqHuApz_MpQ 之前写了一个简单的vue日历控件:https://www.cnblogs.com/mrzhu/ ...
- 基于Vue的简单日历组件
日历组件 由于移动端项目中需要用到日历组件,网上找了下,没看到几个合适的,就尝试着自己写一个.然后发现也不是很复杂,目前只做了最基本的功能,大家也可以拿去做做二次开发. 如何写一个日历组件 基础效果如 ...
随机推荐
- 【软件工程1916|W(福州大学)_助教博客】2019年上学期助教个人总结
本学期概况 本学期负责福州大学汪老师助教工作,机缘巧合下半路接上的.说起来和福州大学也很有缘,第一次做助教就是给福州大学的张老师打下手[福州大学助教链接].第一次是和我室友共同组合.本学期有幸和其他两 ...
- Genymotion模拟器上money测试
1.查看APK包名:sdk\build-tools\android-4.4W>aapt dump xmltree 123.apk AndroidManifest.xml 查看包名为:com.aa ...
- 常用开窗函数总结(hive、sparkSQL可执行)
一:根据某个字段排序 测试数据: SQL> select * from sscore; NAME SCORE ---------- ----- aa 99 bb ...
- vscode使用插件来添加文件说明和函数说明——42header——psioniq File Header——koroFileHeader
安装号以后,设置快捷键如下: 同时需要根据自己的需要的修改json文件 // 文件头部注释 "fileheader.customMade": { "Description ...
- LG2578 「ZJOI2005」九数码游戏 bfs
问题描述 LG2578 题解 用string+map去重. bfs即可. \(\mathrm{Code}\) #include<bits/stdc++.h> using namespace ...
- Java System.getProperty vs System.getenv
转自:https://www.baeldung.com/java-system-get-property-vs-system-getenv 1. Introduction The package ja ...
- NLP之CRF应用篇(序列标注任务)
1.CRF++的详细解析 完成的是学习和解码的过程:训练即为学习的过程,预测即为解码的过程. 模板的解析: 具体参考hanlp提供的: http://www.hankcs.com/nlp/the-cr ...
- Spring IOC小记
1. What IOC (Inversion Of Control,控制反转)与DI(Dependency Injecion,依赖注入) 用于对象间解耦,如在以前若对象A依赖B则需要在A中负责B的创建 ...
- [灯火阑珊] 关于cmd命令里的findstr匹配多个关键词
no raining now go to school and play with code 你. findstr "\<go code\>" 这样就能匹配输出包含g ...
- centos 安装 oracle11r2
因为要测试spark链接oracle,所以需要再服务器装oracle 1.下载oracle, 如果自己下载需要注册,比较麻烦,可以直接用如下命令下载 因为zip比较大,建议nohup 后台下载 noh ...