摘要:說明由于工作需要,將改為一個以兩個時間段內所有周作為參考的組件,所以把它重寫成了一個的組件,保留了原有的以年為參考的方式,另外引入來操作時間比原來作者的更簡單了。安裝與使用效果
Github
https://github.com/SamHz/vue-...
說明由于工作需要,將 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
效果
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/90354.html
摘要:看到一個很棒的時間軸工具,分享一下地址主頁地址項目介紹通過和,把數據和事件進行可視化處理,用創建事件軸,用美化樣式,還有適合移動端的方法。創建簡單的時間軸只需要一個保存事件的數組使用安裝 看到一個很棒的時間軸工具,分享一下: github地址 https://github.com/sbstjn/timesheet.js 主頁地址:http://sbstjn.github.io/time...
摘要:圖表庫希望通過僅一次調用,接收所有的請求歷史。更新后臺返回線最新的數據網上比較少關于引入的文章小弟不才粗略的分享一下我的實現方法 **前言: 本文使用的是1.10版本 , 可通過TradingView.version()查看當前版本. 附上開發文檔地址:https://zlq4863947.gitbooks.i...** 一、修改datafeed.js為export導出,并在vue文件...
摘要:發布,海量圖表供你選擇,豐富模板一鍵創建,提供多種垂直領域模板,快速創建項目,支持風格切換,滿足個性化需求輕松操作頁面管理,海量物料自由搭配,頁面組合可視化操作更得心應手開發調試一體化,集成運行環境零配置運行,開箱即用。 Iceworks 2.7.0 發布,海量圖表供你選擇 Iceworks,豐富模板一鍵創建,提供多種垂直領域模板,快速創建項目,支持風格切換,滿足個性化需求;輕松操作頁...
摘要:發布,海量圖表供你選擇,豐富模板一鍵創建,提供多種垂直領域模板,快速創建項目,支持風格切換,滿足個性化需求輕松操作頁面管理,海量物料自由搭配,頁面組合可視化操作更得心應手開發調試一體化,集成運行環境零配置運行,開箱即用。 Iceworks 2.7.0 發布,海量圖表供你選擇 Iceworks,豐富模板一鍵創建,提供多種垂直領域模板,快速創建項目,支持風格切換,滿足個性化需求;輕松操作頁...
閱讀 2879·2021-11-24 09:39
閱讀 3130·2021-11-19 10:00
閱讀 1535·2021-10-27 14:17
閱讀 1811·2021-10-14 09:43
閱讀 961·2021-09-03 10:30
閱讀 3413·2019-08-30 15:54
閱讀 2728·2019-08-30 13:05
閱讀 2006·2019-08-30 11:02