feature: 添加组件埋点指令

app/web/component/layout/activity/index.ts

@@ -2,8 +2,10 @@ import { Vue, Component, Prop } from 'vue-property-decorator';
 import { Getter } from 'vuex-class';
 import Raven from 'raven-js';
 import RavenVue from 'raven-js/plugins/vue';
+import 'intersection-observer';
 import { release } from '@/.sentryclirc';
 import '@/service/qg.service';
+import Exposure from '@/service/exposure.service';
 
 // 初始化sentry
 if (process.env.SENTRY_ENV !== 'test' && process.env.NODE_ENV === 'production') {
@@ -15,6 +17,16 @@ if (process.env.SENTRY_ENV !== 'test' && process.env.NODE_ENV === 'production')
     .install();
 }
 
+if (EASY_ENV_IS_BROWSER) {
+  const exp = new Exposure();
+
+  Vue.directive('exp-dot', {
+    bind(el, binding, vnode) {
+      exp.add({el, val: binding.value});
+    }
+  });
+}
+
 @Component({
   name: 'Layout'
 })

app/web/page/activity/view/activity/index.ts

@@ -71,6 +71,10 @@ export default class Activity extends Mixins(TransformStyleMixin) {
     this.setPageElement(elements);
   }
 
+  dot(title) {
+    console.log(title, '点击了');
+  }
+
   modfiTabsStyle() {
     const tabsEle = document.querySelector('.tabs');
     if (tabsEle) {

app/web/page/activity/view/activity/index.vue

@@ -19,8 +19,10 @@
   	             :w="item.point.w"
   	             :h="item.point.h"
   	             :i="item.point.i"
-  	             :key="item.point.i">
-  	      <component :data-index="index" :containerIndex="index" :childItem="item" :is="item.name" :key="item.id" v-bind="item.props"></component>
+  	             :key="item.point.i"
+                 @click.native="dot(item.title)"  
+                 >
+  	      <component v-exp-dot :data-dot="item.title" :data-index="index" :containerIndex="index" :childItem="item" :is="item.name" :key="item.id" v-bind="item.props"></component>
   	  </grid-item>
   	</grid-layout>
     <cr-back-top v-if="showBackTop && pageData.props.showBackTop" />

app/web/service/exposure.service.ts

+import 'intersection-observer';
+
+export default class Exposure {
+  observer;
+
+  constructor() {
+    this.init();
+  }
+
+  init() {
+    this.observer = new IntersectionObserver((entries, observer) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          this.dot(entry?.target?.attributes?.['data-dot']?.value);
+        }
+      });
+    });
+
+  }
+
+  add(entry) {
+    if (this.observer) { this.observer.observe(entry.el); }
+  }
+
+  dot(title) {
+    console.log(title, '进入了');
+  }
+}
\ No newline at end of file

package.json

@@ -20,7 +20,7 @@
   "dependencies": {
     "@better-scroll/core": "^2.0.5",
     "@qg/cherry-ui": "^2.20.1",
-    "@qg/citrus-ui": "0.0.34",
+    "@qg/citrus-ui": "0.0.37",
     "babel-plugin-transform-vue-jsx": "^4.0.1",
     "egg": "^2.3.0",
     "egg-bin": "^4.9.0",
@@ -30,6 +30,7 @@
     "egg-view-vue-ssr": "^3.0.5",
     "egg-webpack": "^4.4.7",
     "egg-webpack-vue": "^2.0.0",
+    "intersection-observer": "^0.12.0",
     "js-cookie": "^2.2.1",
     "npm": "^6.14.10",
     "raven-js": "^3.27.2",