feat:添加自定义markline

w1301625107 · Jul 19, 2021 · 9f25ea8 · 9f25ea8
1 parent b10a570
commit 9f25ea8
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 20 deletions.
diff --git a/src/components/mark-line/index.vue b/src/components/mark-line/index.vue
@@ -1,15 +1,3 @@
-<template>
-  <div
-    v-show="visible"
-    class="gantt-markline"
-    :style="{ 'background-color': color, left: getPosition() + 'px' }"
-  >
-    <div class="gantt-markline-label" :style="{ 'background-color': color }">
-      {{ dayjs(markLineTime).format("HH:mm:ss") }}
-    </div>
-  </div>
-</template>
-
 <script>
 import dayjs from "dayjs";
 export default {
@@ -31,20 +19,47 @@ export default {
   },
   data() {
     return {
-      visible: false,
       dayjs: dayjs
     };
   },
+  computed: {
+    visible() {
+      return this.markLineTime == null ? false : true;
+    }
+  },
   methods: {
     getPosition() {
       if (this.markLineTime == null) {
-        this.visible = false;
         return 0;
       } else {
-        this.visible = true;
         return this.getPositonOffset(this.markLineTime);
       }
     }
+  },
+  // eslint-disable-next-line
+  render: function(h) {
+    const { visible, getPosition, color, markLineTime } = this;
+    if (!visible) {
+      return null;
+    }
+    let vnode =
+      this.$scopedSlots.default &&
+      this.$scopedSlots.default({ markLineTime, getPosition });
+
+    const px = getPosition();
+
+    return !vnode ? (
+      <div
+        class="gantt-markline"
+        style={{ "background-color": color, left: px + "px" }}
+      >
+        <div class="gantt-markline-label" style={{ "background-color": color }}>
+          {dayjs(markLineTime).format("HH:mm:ss")}
+        </div>
+      </div>
+    ) : (
+      vnode
+    );
   }
 };
 </script>
diff --git a/src/gantt.vue b/src/gantt.vue
@@ -72,7 +72,15 @@
               :markLineTime="times.time"
               :getPositonOffset="getPositonOffset"
               :color="times.color"
-            ></mark-line>
+            >
+              <template v-slot="{ markLineTime, getPosition }">
+                <slot
+                  name="markLine"
+                  :markLineTime="markLineTime"
+                  :getPosition="getPosition"
+                ></slot>
+              </template>
+            </mark-line>
           </div>
           <div
             ref="leftbarWrapper"
@@ -99,8 +107,8 @@
           <div
             ref="blocksWrapper"
             class="gantt-blocks-wrapper"
-            @mousedown="e => (enableGrab ? mouseDownHandle(e) : noop)"
-            @mouseup="e => (enableGrab ? mouseUpHandle(e) : noop)"
+            @mousedown="(e) => (enableGrab ? mouseDownHandle(e) : noop)"
+            @mouseup="(e) => (enableGrab ? mouseUpHandle(e) : noop)"
           >
             <blocks
               :scrollTop="scrollTop"
@@ -456,8 +464,8 @@ export default {
   mounted() {
     this.cacheSelector();
     // 计算准确的渲染区域范围
-    const observeContainer = throttle(entries => {
-      entries.forEach(entry => {
+    const observeContainer = throttle((entries) => {
+      entries.forEach((entry) => {
         const cr = entry.contentRect;
         this.heightOfBlocksWrapper = cr.height;
         this.widthOfBlocksWrapper = cr.width;