feat(埋点): 添加数据埋点测试

@@ -10,7 +10,7 @@
 <template>
 <div class="yasTest-wrap">
   <div class="top">height:1000px</div>
-  <div :id="`box${item.id}`" class="box" v-for="(item, index) in yasList" :key="index">
+  <div v-expose:foo.a.b="true" ref="exposeRef" :id="`box${item.id}`" class="box" v-for="(item, index) in yasList" :key="index">
     <pre>
       height:100px
       id: {{item.id}}
@@ -29,13 +29,18 @@ import { debounce, throttle } from 'lodash';
 const mixins = {
   data() {
     return {
-      yasList: [...Array(5).keys()].map((item,index)=>({id: index, offset:null}))
+      yasList: [...Array(20).keys()].map((item,index)=>({id: index, offset:null}))
     }
   },
   created() {},
   mounted() {
-    console.log('init mixins');
-    window.addEventListener('scroll', debounce(this.handleScroll,500));
+    console.log(this);
+
+    setTimeout(() => {
+      window.addEventListener('scroll', debounce(throttle(this.handleScroll,500),200));
+    }, 0);
+
+
     // window.addEventListener('scroll', throttle(this.handleScroll,500));
   },
   activated() {},
@@ -43,15 +48,63 @@ const mixins = {
   // beforeRouteEnter (to, from, next) {},
   // beforeRouteUpdate(to, from, next) {},
   // beforeRouteLeave(to, from, next) {},
-  destroyed() {},
+  destroyed() {
+    window.removeEventListener('scroll', null);
+  },
   methods: {
     handleScroll(e) {
-      console.log(e);
+      const viewPortHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
+
+      let isInViewPortArr = this.$refs['exposeRef'].map(el => {
+        const Rect = el.getBoundingClientRect();
+        const top = el.getBoundingClientRect().top;
+        const elHeight = Rect.height;
+        console.log(`窗口宽度：${viewPortHeight},元素距离可视基准线top值:${top},是否在可视区域内：${top+ elHeight<0?false:top <= viewPortHeight}`);
+        return (top > 0 || top + elHeight > 0) ? top <= viewPortHeight : false;
+      });
+
+      console.log('isInViewPortArr', isInViewPortArr);
+
+
+      isInViewPortArr.filter((isInViewPort,index)=>{
+        if (isInViewPort===true) {
+          console.log(`此处进行曝光事件上报,需要曝光索引为`, index, isInViewPort);
+        }
+      });
     }
   },
   computed: {},
   watch: {},
-  components: {}
+  components: {},
+  directives: {
+    expose: {
+      // 指令的定义
+      inserted: function (el,binding,vnode,oldVnode) {
+        console.log('inserted', el.getBoundingClientRect());
+      },
+      bind: function (el,binding,vnode,oldVnode) {
+        console.log('bind', el);
+        // var s = JSON.stringify
+        // el.innerHTML =
+        // 'name: '       + s(binding.name) + '<br>' +
+        // 'value: '      + s(binding.value) + '<br>' +
+        // 'expression: ' + s(binding.expression) + '<br>' +
+        // 'argument: '   + s(binding.arg) + '<br>' +
+        // 'modifiers: '  + s(binding.modifiers) + '<br>' +
+        // 'vnode keys: ' + Object.keys(vnode).join(', ')
+      },
+      update: function (el,binding,vnode,oldVnode) {
+        console.log('update', el);
+      },
+      componentUpdated: function (el,binding,vnode,oldVnode) {
+        console.log('componentUpdated', el);
+      },
+      unbind: function (el,binding,vnode,oldVnode) {
+        console.log('unbind', el);
+      },
+
+    }
+  }
 }
 
 export default {