Feat: 'block show track' support setting element percent

docs/pages/block-show.vue

@@ -66,7 +66,7 @@
     </section>
 
     <!----------------------- DEMO 3 ------------------------>
-    <section ref="viewport" class="demo viewport">
+    <section ref="viewport1" class="demo viewport">
       <el-alert
         center
         type="info"
@@ -75,7 +75,7 @@
       >
       </el-alert>
       <div class="section-content large">
-        <el-card shadow="always" v-track:18029.show="{ viewport: 'viewport' }">
+        <el-card shadow="always" v-track:18029.show="{ viewport: 'viewport1' }">
           我也想被曝光无数次
         </el-card>
       </div>
@@ -84,7 +84,33 @@
       <CodeSnippet
         class="snippet"
         lang="html"
-        :code="viewportTrackViewComponentSnippet"
+        :code="viewportTrackViewComponentSnippet1"
+      />
+    </section>
+
+    <!----------------------- DEMO 4 ------------------------>
+    <section ref="viewport2" class="demo viewport">
+      <el-alert
+        center
+        type="info"
+        title="某个区域内元素曝光超过一半则上报埋点"
+        :closable="false"
+      >
+      </el-alert>
+      <div class="section-content large">
+        <el-card
+          shadow="always"
+          v-track:18030.show="{ viewport: 'viewport2', percent: 0.5 }"
+        >
+          我也想被曝光无数次
+        </el-card>
+      </div>
+    </section>
+    <section class="snippets">
+      <CodeSnippet
+        class="snippet"
+        lang="html"
+        :code="viewportTrackViewComponentSnippet2"
       />
     </section>
   </div>
@@ -99,9 +125,14 @@ const trackViewComponentSnippet = `
 const trackViewComponentOnceSnippet = `
 <el-card shadow="always" v-track:18027.show.once>我只想被曝光一次</el-card>
 `;
-const viewportTrackViewComponentSnippet = `
+const viewportTrackViewComponentSnippet1 = `
+<section ref="viewport">
+  <el-card shadow="always" v-track:18029.show="{ viewport: 'viewport1' }">我也想被曝光无数次</el-card>
+</section>
+`;
+const viewportTrackViewComponentSnippet2 = `
 <section ref="viewport">
-  <el-card shadow="always" v-track:18029.show="{ viewport: 'viewport' }">我也想被曝光无数次</el-card>
+  <el-card shadow="always" v-track:18029.show="{ viewport: 'viewport2', percent: 0.5 }">我也想被曝光无数次</el-card>
 </section>
 `;
 
@@ -114,7 +145,8 @@ export default {
     return {
       trackViewComponentSnippet,
       trackViewComponentOnceSnippet,
-      viewportTrackViewComponentSnippet,
+      viewportTrackViewComponentSnippet1,
+      viewportTrackViewComponentSnippet2,
       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: 2020-06-04 20:20:23
+ * @Last Modified time: 2020-06-05 20:42:48
  */
 import trackAction from "./action";
 
@@ -130,5 +130,11 @@ export default {
       source_page: name,
       description: "我也想被曝光无数次"
     });
+  },
+  18030({ $route: { name } }) {
+    trackAction("18030", {
+      source_page: name,
+      description: "我也想被曝光无数次"
+    });
   }
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "v-track",
-  "version": "0.8.9",
+  "version": "0.8.10",
   "description": "一个基于Vue指令的埋点插件",
   "author": "LHammer <lhammer@qq.com>",
   "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 20:15:02
+ * @Last Modified time: 2020-06-05 20:23:06
  */
 import {
   zipArray,
@@ -117,7 +117,8 @@ export function bind(
         const vm = new VisMonitor(
           el,
           custom && context.$refs[value.ref],
-          value && context.$refs[value.viewport]
+          value && context.$refs[value.viewport],
+          value && value.percent
         );
 
         (once ? vm.$once : vm.$on).call(vm, "fullyvisible", tck);

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 20:15:46
+ * @Last Modified time: 2020-06-07 10:47:44
  */
 import { isElement, isVisible, isInViewport } from "./dom";
 import { isFun, debounce } from "./helper";
@@ -14,14 +14,18 @@ import { isFun, debounce } from "./helper";
  * @desc 目标元素控制器
  */
 export default class VisMonitor {
-  constructor(ele, ref, refwin = window) {
+  constructor(ele, ref, refwin = window, percent = 1) {
     if (!isElement(ele)) {
       throw new Error("not an element node");
     }
+    if (percent > 1 && percent <= 0) {
+      throw new Error("'percent' must be a number between 0 and 1");
+    }
     this.ele = ele;
     this.ref = ref;
     this.refWin = refwin;
     this.started = false;
+    this.percent = percent;
     this.prevPerc = null; // 保存前一次曝光百分比
     this.listeners = {};
     this.removeScrollLisener = null;
@@ -130,6 +134,22 @@ export default class VisMonitor {
     let vw = 0;
     let perc = 0;
 
+    if (view.top < 0) {
+      view.top = 0;
+    }
+
+    if (view.bottom > window.innerHeight) {
+      view.bottom = window.innerHeight;
+    }
+
+    if (view.left < 0) {
+      view.left = 0;
+    }
+
+    if (view.right > window.innerWidth) {
+      view.right = window.innerWidth;
+    }
+
     if (rect.top >= view.top && rect.bottom > view.bottom) {
       vh = view.bottom - rect.top;
     } else if (rect.top < view.top && rect.bottom <= view.bottom) {
@@ -148,7 +168,7 @@ export default class VisMonitor {
 
     perc = (vh * vw) / (rect.height * rect.width);
 
-    if (this.prevPerc !== 1 && perc === 1) {
+    if (this.prevPerc < this.percent && perc >= this.percent) {
       this.$emit("fullyvisible");
       this.prevPerc = perc;
     }