other:更新demo

README.md

@@ -320,6 +320,20 @@ export default {
 </template>
 ```
 
+### markline 时间标记线slot
+```html
+<template v-slot:markLine="{markLineTime, getPosition}">
+    <!-- 你的时间标记线组件 -->
+    <TestMarkline :markLineTime="markLineTime" :getPosition="getPosition"></TestMarkline>
+</template>
+```
+
+`markLineTime` 为 传人的`timelines`的每一个值
+
+`getPosition(day:string):number` 
+计算当前时间的偏移值，参数为day,返回偏移值
+
+
 ### title 标题slot
 
 ```html
@@ -489,6 +503,9 @@ yarn serve
 
 
 ## Update
+1.6.0
+- 添加markline slot 支持
+
 1.5.2
 - 修复文档中的错误的默认值
 - 修改导出的内容，支持页面单独引入

package.json

@@ -1,6 +1,6 @@
 {
   "name": "v-gantt-chart",
-  "version": "1.5.2",
+  "version": "1.6.0",
   "description": "display gantt-like vaule,like use this to order bus schedule.",
   "main": "dist/v-gantt-chart.umd.min.js",
   "files": [

prettier.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  tabWidth: 2,
+  semi: true,
+  singleQuote: false,
+  arrowParens: "always"
+};

src/components/time-line/index.vue

@@ -102,7 +102,7 @@ export default {
     },
     paddingWidth() {
       const { allDayBlocks, scale, startDayOfRenderArea } = this;
-      const temp = allDayBlocks.find(day => {
+      const temp = allDayBlocks.find((day) => {
         if (
           scale >= MINUTE_OF_ONE_DAY &&
           startDayOfRenderArea.isBetween(

src/demo/App.vue

@@ -166,6 +166,9 @@
         <template v-slot:title>
           铁胆火车侠日程表
         </template>
+        <template v-slot:markLine="{markLineTime, getPosition}" >
+          <TestMarkline :markLineTime="markLineTime" :getPosition="getPosition"></TestMarkline>
+        </template>
       </v-gantt-chart>
     </div>
     <footer class="main-footer">
@@ -180,6 +183,8 @@
 import Test from "./components/test.vue"
 import TestLeft from "./components/test-left.vue"
 import TestTimeline from "./components/test-timeline.vue"
+import TestMarkline from "./components/test-markline.vue"
+
 import { mockDatas } from "./mock/index.js"
 import dayjs from "dayjs"
 
@@ -202,7 +207,7 @@ const scaleList = `1,2,3,4,5,6,10,12,15,20,30,60,120,180,240,360,720,1440,2880,4
   })
 export default {
   name: "App",
-  components: { Test, TestLeft,TestTimeline },
+  components: { Test, TestLeft,TestTimeline,TestMarkline },
   data() {
     return {
       timeLines: [

src/demo/components/test-markline.vue

@@ -0,0 +1,46 @@
+<template>
+  <div
+    class="markline"
+    :style="{  left: getPosition() + 'px' }"
+  >
+    <div class="markline-label">
+      自定义{{ dayjs(markLineTime).format("HH:mm:ss") }}
+    </div>
+  </div>
+</template>
+
+<script>
+import dayjs from "dayjs"
+export default {
+  name: "TestMarkLine",
+	props:['getPosition','markLineTime'],
+	data(){
+		return {
+			dayjs
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+
+.markline {
+    position: absolute;
+    z-index: 100;
+    width: 2px;
+    height: 100vh;
+    background: #747e80;
+
+    &-label {
+      padding: 3px;
+      width: 6rem;
+      margin-left: -3rem;
+      margin-top: 5rem;
+      color: #fff;
+      background: #747e80;
+      text-align: center;
+      border-radius: 5px;
+      font-size: 0.7rem;
+    }
+}
+</style>

src/main.js

@@ -34,5 +34,5 @@ Vue.use(Option);
 Vue.use(Checkbox);
 
 new Vue({
-  render: h => h(App)
+  render: (h) => h(App)
 }).$mount("#app");