export function lazy(app: any) {
  app.directive("lazy", (el: any, binding: any) => {
    console.log(binding.value);
    let lazyLoadObser = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.intersectionRatio > 0) {
          console.log("进入可视区域");
          binding.value.lazyFn(true, binding.value.item);
        } else {
          binding.value.item.lazy = false;
          binding.value.lazyFn(false, binding.value.item);
        }
      });
    });
    lazyLoadObser.observe(el);
  });
}

export function lazy(app: any) {
  app.directive("lazy", (el: any, binding: any) => {
    console.log(binding.value);
    let lazyLoadObser = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.intersectionRatio > 0) {
          console.log("进入可视区域");
          binding.value.lazyFn(true, binding.value.item);
        } else {
          binding.value.item.lazy = false;
          binding.value.lazyFn(false, binding.value.item);
        }
      });
    });
    lazyLoadObser.observe(el);
  });
}

const lazyFn = (show, item) => {
  item.lazy = show;
};

const lazyFn = (show, item) => {
  item.lazy = show;
};

export function lazy(app: any) {
  app.directive("lazy", (el: any, binding: any) => {
    console.log(binding.value);
    let lazyLoadObser = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.intersectionRatio > 0) {
          console.log("进入可视区域");
          binding.value.item.lazy = true;
        } else {
          binding.value.item.lazy = false;
        }
      });
    });
    lazyLoadObser.observe(el);
  });
}

export function lazy(app: any) {
  app.directive("lazy", (el: any, binding: any) => {
    console.log(binding.value);
    let lazyLoadObser = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.intersectionRatio > 0) {
          console.log("进入可视区域");
          binding.value.item.lazy = true;
        } else {
          binding.value.item.lazy = false;
        }
      });
    });
    lazyLoadObser.observe(el);
  });
}

<div
          class="card-item"
          v-for="(item, index) in list"
          :key="index"
        >
          <div class="item-content" v-lazy="{ item }">
            <div class="item">
              <p class="item-title">【工作内容】</p>
              <p class="text">
                {{ item.content }}
              </p>
            </div>
            <div class="height400">
              <operation-box
                :info="item"
                v-if="item.lazy"
              ></operation-box>
            </div>
          </div>
        </div>

<div
          class="card-item"
          v-for="(item, index) in list"
          :key="index"
        >
          <div class="item-content" v-lazy="{ item }">
            <div class="item">
              <p class="item-title">【工作内容】</p>
              <p class="text">
                {{ item.content }}
              </p>
            </div>
            <div class="height400">
              <operation-box
                :info="item"
                v-if="item.lazy"
              ></operation-box>
            </div>
          </div>
        </div>