diff --git a/docs/pages/block-show.vue b/docs/pages/block-show.vue index e21d5f4..8150efa 100644 --- a/docs/pages/block-show.vue +++ b/docs/pages/block-show.vue @@ -66,7 +66,7 @@ -
+
- + 我也想被曝光无数次
@@ -84,7 +84,33 @@ +
+ + +
+ + +
+ + 我也想被曝光无数次 + +
+
+
+
@@ -99,9 +125,14 @@ const trackViewComponentSnippet = ` const trackViewComponentOnceSnippet = ` 我只想被曝光一次 `; -const viewportTrackViewComponentSnippet = ` +const viewportTrackViewComponentSnippet1 = ` +
+ 我也想被曝光无数次 +
+`; +const viewportTrackViewComponentSnippet2 = `
- 我也想被曝光无数次 + 我也想被曝光无数次
`; @@ -114,7 +145,8 @@ export default { return { trackViewComponentSnippet, trackViewComponentOnceSnippet, - viewportTrackViewComponentSnippet, + viewportTrackViewComponentSnippet1, + viewportTrackViewComponentSnippet2, show: false, rest1: null, rest2: null diff --git a/docs/tracks/events.js b/docs/tracks/events.js index e3b9ace..f4f1ad1 100644 --- a/docs/tracks/events.js +++ b/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: "我也想被曝光无数次" + }); } }; diff --git a/package.json b/package.json index 1e337e8..7ca51cc 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "v-track", - "version": "0.8.9", + "version": "0.8.10", "description": "一个基于Vue指令的埋点插件", "author": "LHammer ", "scripts": { diff --git a/src/hooks/index.js b/src/hooks/index.js index 297eecc..5d99a2c 100644 --- a/src/hooks/index.js +++ b/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); diff --git a/src/utils/vis-monitor.js b/src/utils/vis-monitor.js index 0862f9e..802f4f1 100644 --- a/src/utils/vis-monitor.js +++ b/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; }