Feat: block show track support custom viewport [0E0W]

docs/assets/app.scss

@@ -126,6 +126,15 @@ a {
   }
 }
 
+.demo.viewport {
+  height: 364px;
+  overflow: auto;
+
+  .section-content.large {
+    padding: 375px 0;
+  }
+}
+
 .footer {
   font-size: 14px;
   text-align: center;

docs/pages/block-show.vue

@@ -64,6 +64,29 @@
         :code="trackViewComponentSnippet"
       />
     </section>
+
+    <!----------------------- DEMO 3 ------------------------>
+    <section ref="viewport" class="demo viewport">
+      <el-alert
+        center
+        type="info"
+        title="某个区域内元素曝光埋点"
+        :closable="false"
+      >
+      </el-alert>
+      <div class="section-content large">
+        <el-card shadow="always" v-track:18029.show="{ viewport: 'viewport' }">
+          我也想被曝光无数次
+        </el-card>
+      </div>
+    </section>
+    <section class="snippets">
+      <CodeSnippet
+        class="snippet"
+        lang="html"
+        :code="viewportTrackViewComponentSnippet"
+      />
+    </section>
   </div>
 </template>
 
@@ -76,6 +99,11 @@ const trackViewComponentSnippet = `
 const trackViewComponentOnceSnippet = `
 <el-card shadow="always" v-track:18027.show.once>我只想被曝光一次</el-card>
 `;
+const viewportTrackViewComponentSnippet = `
+<section ref="viewport">
+  <el-card shadow="always" v-track:18029.show="{ viewport: 'viewport' }">我也想被曝光无数次</el-card>
+</section>
+`;
 
 export default {
   name: "BlockShow",
@@ -86,6 +114,7 @@ export default {
     return {
       trackViewComponentSnippet,
       trackViewComponentOnceSnippet,
+      viewportTrackViewComponentSnippet,
       show: false,
       rest1: null,
       rest2: null

docs/tracks/events.js

@@ -2,7 +2,7 @@
  * @Author: 宋慧武
  * @Date: 2019-04-14 17:10:31
  * @Last Modified by: 宋慧武
- * @Last Modified time: 2019-07-26 11:32:10
+ * @Last Modified time: 2020-06-04 20:20:23
  */
 import trackAction from "./action";
 
@@ -124,5 +124,11 @@ export default {
       source_page: name,
       description: "我只想被曝光一次"
     });
+  },
+  18029({ $route: { name } }) {
+    trackAction("18029", {
+      source_page: name,
+      description: "我也想被曝光无数次"
+    });
   }
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "v-track",
-  "version": "0.8.8",
+  "version": "0.8.9",
   "description": "一个基于Vue指令的埋点插件",
   "author": "LHammer <[email protected]>",
   "scripts": {

src/hooks/index.js

@@ -2,7 +2,7 @@
  * @Author: 宋慧武
  * @Date: 2019-03-06 17:49:29
  * @Last Modified by: 宋慧武
- * @Last Modified time: 2020-06-04 13:57:24
+ * @Last Modified time: 2020-06-04 20:15:02
  */
 import {
   zipArray,
@@ -113,14 +113,16 @@ export function bind(
     const custom = partialMatch("custom");
 
     if (!el.$visMonitor) {
-      const vm = new VisMonitor(
-        el,
-        custom && context.$refs[value.ref],
-        value && value.refWin
-      );
+      setTimeout(() => {
+        const vm = new VisMonitor(
+          el,
+          custom && context.$refs[value.ref],
+          value && context.$refs[value.viewport]
+        );
 
-      (once ? vm.$once : vm.$on).call(vm, "fullyvisible", tck);
-      el.$visMonitor = vm;
+        (once ? vm.$once : vm.$on).call(vm, "fullyvisible", tck);
+        el.$visMonitor = vm;
+      }, 0);
     }
   } else if (
     (!componentInstance && modifiers.click) ||

src/utils/dom.js

@@ -2,7 +2,7 @@
  * @Author: 宋慧武
  * @Date: 2019-04-08 11:13:34
  * @Last Modified by: 宋慧武
- * @Last Modified time: 2019-04-08 11:59:30
+ * @Last Modified time: 2020-06-04 17:08:44
  */
 
 /**
@@ -33,11 +33,18 @@ export function isInViewport(rect, viewport) {
   if (!rect || (rect.width <= 0 || rect.height <= 0)) {
     return false;
   }
+
   return (
     rect.bottom > 0 &&
     rect.right > 0 &&
-    rect.top < viewport.height &&
-    rect.left < viewport.width
+    rect.top < window.innerHeight &&
+    rect.left < window.innerWidth &&
+    !(
+      rect.left > viewport.right ||
+      rect.top > viewport.bottom ||
+      rect.right < viewport.left ||
+      rect.bottom < viewport.top
+    )
   );
 }
 

src/utils/vis-monitor.js

@@ -2,7 +2,7 @@
  * @Author: 宋慧武
  * @Date: 2019-04-08 11:13:34
  * @Last Modified by: 宋慧武
- * @Last Modified time: 2020-06-04 13:56:14
+ * @Last Modified time: 2020-06-04 20:15:46
  */
 import { isElement, isVisible, isInViewport } from "./dom";
 import { isFun, debounce } from "./helper";
@@ -48,10 +48,15 @@ export default class VisMonitor {
 
   viewport() {
     const win = this.refWin;
+    const rect = isElement(win) ? win.getBoundingClientRect() : win;
 
     return {
-      height: win.innerHeight,
-      width: win.innerWidth
+      top: isElement(win) ? rect.top : 0,
+      right: rect.right || rect.innerWidth,
+      bottom: rect.bottom || rect.innerHeight,
+      left: rect.left || 0,
+      height: win.innerHeight || win.offsetHeight,
+      width: win.innerWidth || win.offsetWidth
     };
   }
 
@@ -125,17 +130,24 @@ export default class VisMonitor {
     let vw = 0;
     let perc = 0;
 
-    if (rect.top >= 0) {
-      vh = Math.min(rect.height, view.height - rect.top);
-    } else if (rect.bottom > 0) {
-      vh = Math.min(view.height, rect.bottom);
+    if (rect.top >= view.top && rect.bottom > view.bottom) {
+      vh = view.bottom - rect.top;
+    } else if (rect.top < view.top && rect.bottom <= view.bottom) {
+      vh = rect.bottom - view.top;
+    } else {
+      vh = rect.height;
     }
-    if (rect.left >= 0) {
-      vw = Math.min(rect.width, view.width - rect.left);
-    } else if (rect.right > 0) {
-      vw = Math.min(view.width, rect.right);
+
+    if (rect.left >= view.left && rect.right > view.right) {
+      vw = view.right - rect.left;
+    } else if (rect.left < view.left && rect.right <= view.right) {
+      vw = rect.right - view.left;
+    } else {
+      vw = rect.width;
     }
+
     perc = (vh * vw) / (rect.height * rect.width);
+
     if (this.prevPerc !== 1 && perc === 1) {
       this.$emit("fullyvisible");
       this.prevPerc = perc;