曝光埋点IntersectionObserver

曝光埋点IntersectionObserver

封装成一个指令

import Vue from "vue";
Vue.directive("exposure", {
  // 指令的定义
  inserted: function (el, binding) {
    const ioCourse = new IntersectionObserver(
      (entries) => {
        entries.forEach((i) => {
          //console.log("log", i);
          if (i.isIntersecting) {
            binding.value.callback();
          }
        });
      },
      {
        threshold: binding.value.threshold,
      }
    );
    ioCourse.observe(el);
  },
});

调用

    <div class="container"></div>
    <div class="container"></div>
    <div
      class="container"
      v-exposure="{ callback: testCallBack, threshold: [0.75] }"
    >
      <div style="height: 25%; background: red"></div>
      <div style="height: 25%; background: blue"></div>
      <div style="height: 25%; background: green"></div>
      <div style="height: 25%; background: black"></div>
    </div>
    <div
      class="container"
      v-exposure="{ callback: testCallBack2, threshold: [0.3] }"
    ></div>