vue 动态添加元素组件_将交集观察者添加到Vue组件或HTML元素-CSDN博客

vue 动态添加元素组件

Vue相交 (Vue Intersect)

A Vue component to add intersection-observer to a Vue component or HTML element.

Vue组件，用于将交叉观察器添加到Vue组件或HTML元素。

The IntersectionObserver is an amazing API which allows you to observe one or more HTMLElement for when it has entered or left the viewport.

IntersectionObserver是一个了不起的API，可让您观察一个或多个HTMLElement何时进入或离开视口。

This API has many use cases like, infinite-scroll, lazy-loading or animations when an element enters the viewport.

当一个元素进入视口时，此API有许多用例，例如无限滚动，延迟加载或动画。

安装 (Installation)

Simply install using your favorite package manager 🔥

只需使用您喜欢的软件包管理器进行安装install

NPM (NPM)

npm install vue-intersect --save

纱 (Yarn)

yarn add vue-intersect

用法 (Usage)

The package acts as an abstract component, much like what you may know from keep-alive or transition.

该软件包充当抽象组件，就像您从keep-alive或transition可能了解的那样。

This means that it's basically a "decorator". A component which does not output any markup to the DOM, but adds the functionality under the hood 😱.

这意味着它基本上是一个“装饰器”。一个组件，不向DOM输出任何标记，但在幕后adds添加了功能。

.vue (.vue)

<template>
  <intersect @enter="msg = 'Intersected'" @leave="msg = 'Not intersected'">
    <div>{{ msg }}</div>
  </intersect>
</template>

<script>
  import Intersect from 'vue-intersect'

  export default {
    components: { Intersect },
    data () {
      return {
        msg: 'I will change'
      }
    }
  }
</script>