php timesheet,vue版本的timesheet图表
Github
说明
由于工作需要,将 timesheet 改为一个以两个时间段内所有周作为参考的组件,所以把它重写成了一个Vue的组件,保留了原有的以年为参考的方式,另外引入moment.js来操作时间比原来作者的更简单了。
安装与使用
npm install vue-timesheet -s
Javascript Code:
// please make sure install moment.js this weeks table driver it, thanks.
import 'vue-timesheet/dist/vue-timesheet.min.css'
import vueTimeSheet from 'vue-timesheet';
export default {
components: {
vueTimeSheet
},
data() {
return {
// years table
tsData: [
['2002', '09/2002', 'A freaking awesome time', 'lorem'],
['06/2002', '09/2003', 'Some great memories', 'ipsum'],
['2003', 'Had very bad luck'],
['10/2003', '2006', 'At least had fun', 'dolor'],
['02/2005', '05/2006', 'Enjoyed those times as well', 'ipsum'],
['07/2005', '09/2005', 'Bad luck again', 'default'],
['10/2005', '2008', 'For a long time nothing happened', 'dolor'],
['01/2008', '05/2009', 'LOST Season #4', 'lorem'],
['01/2009', '05/2009', 'LOST Season #4', 'lorem'],
['02/2010', '05/2010', 'LOST Season #5', 'lorem'],
['09/2008', '06/2010', 'FRINGE #1 & #2', 'ipsum']
],
startYear: '2000',
endYear: '2018',
// weeks table, for the moment, the weeks data need to complete, it's not like years table
tsData1: [
['2017-11-01', '2017-11-11', 'A freaking awesome time', 'lorem'],
['2017-11-02', '2017-11-22', 'Some great memories', 'ipsum'],
['2017-11-08', '2017-11-22', 'Had very bad luck', 'default'],
['2017-11-01', '2017-11-01', 'At least had fun', 'dolor'],
['2017-11-20', '2017-11-22', 'Enjoyed those times as well', 'ipsum'],
['2017-11-09', '2017-11-09', 'Bad luck again', 'default'],
['2017-11-05', '2017-11-08', 'For a long time nothing happened', 'dolor'],
['2017-11-18', '2017-11-28', 'LOST Season #4', 'lorem'],
['2017-11-25', '2017-11-30', 'LOST Season #4', 'lorem'],
['2017-11-11', '2017-11-12', 'LOST Season #5', 'lorem'],
['2017-11-15', '2017-11-30', 'FRINGE #1 & #2', 'ipsum']
]
startDate: new Date('2017-11-01'),
endDate: new Date('2017-11-30')
}
}
}
Template
效果
php timesheet,vue版本的timesheet图表相关推荐
- Vue版本echarts 全国地图geo、geo3D
需求:大屏显示3D全国地图,点击地图上标记连接到指定页面,网上资源多数不是Vue版本的,实现的方式也是由html页面修改为Vue版本 效果展示: 由于图片涉嫌违规,给大家一个自己脑补的 ...
- 解决vue版本不匹配的问题 Vue packages version mismatch:
解决vue版本不匹配的问题 Vue packages version mismatch: 参考文章: (1)解决vue版本不匹配的问题 Vue packages version mismatch: ( ...
- 二代身份证读取 中控ID180 二三代身份证阅读器 Vue版本
二代身份证读取 中控ID180 二三代身份证阅读器 Vue版本 设备 设备名称:台式身份证阅读机 产品型号:ID180 设备驱动和文档 链接:https://pan.baidu.com/s/1nAYk ...
- vue/cli 和 vue 版本对应及安装
文章目录 Vue Cli 使用方式: 关于Vue Cli版本介绍 @vue/cli 安装: 版本号对应 查看vue和@vue/cli版本: Vue Cli Vue CLI = Vue + 一堆的js插 ...
- 创建脚手架时,查看vue版本
查看当前创建的脚手架应用的vue版本 问题描述: 每次重启电脑后创建一个脚手架,都直接帮我创建一个vue3的版本,但第二次创建时会跳出选择字眼 查看当前vue版本: 进入项目的根目录,运行:npm l ...
- 抓娃娃机vue版本和jquery版本
由于公司需求,着手研究H5抓娃娃,从网上找到一份简单的jQuery手机H5抓娃娃机代码.先感谢下最初始分享代码的那位同志.这个分享对我们这些非专职前端的phper来说很关键.虽然简单,但是功能也是都实 ...
- 11 贪吃蛇小游戏 js版本 + vue版本
前言 // 呵呵, 1024 发一波 基础知识 的库存 缘于一些 小的需求 因为一些原因 可能到这里就不会再往后面设计了 主要分为了两个版本, html + js 的版本 和 vue 的版本 核心的意 ...
- vue版本的仿京东放大镜代码还有原生js版本的。(组件封装)
vue版本的仿京东放大镜 <template><div class="maxBox"><divref="left"class=&q ...
- 【ureport2 vue版本实现】
ureport2 vue版本实现 开放源ureport2是采用jquery实现的,前端体验低于vue,加载文件过大,尤其设计器页面文件designer.bundle.js达到3.7M,common.b ...
最新文章
- 图片轮播html实现原理,纯CSS实现图片轮播
- StaticLinkList
- Android启动外部程序
- 怎么看电脑配置高不高_辣椒产量高不高?关键看播种前的种子处理,你知道怎么做吗?...
- mysql查询每日/某时间段/当日新增用户人数
- Base64与MIME和UTF-7
- ※C++随笔※=☆C++基础☆=※№→C++中 #include与#include
- 锐捷服务器虚拟化技术_2019云计算分类排行发布 星网锐捷勇夺两项榜首
- 一阶系统开环传递函数表达式_自动控制总结:第五章、线性系统的校正方法
- nacos cloud 配置中心中 修改properties格式内容并发布然后在浏览器页面刷新无效果
- Unity Editor 编辑器介绍
- 如何提高C语言程序的可读性
- 使用scrapy简单爬取网易新闻
- 8.法律法规与标准化知识
- 火车订票管理系统/火车购票网站系统/火车订票网站/火车票售卖系统
- 你是在独立思考,还是在被洗脑?
- 微信小程序详解wx:if elif else的用法(搭配view、block)
- E-puck2机器人系列教程
- mkv文件怎么转换成mp4?来看看这四种转换方式吧!
- python爬虫环境spider_Python爬虫Spider 一