vue 动态添加元素组件_Vue组件，用于将交叉观察器添加到Vue组件或HTML元素

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有许多用例，例如无限滚动，延迟加载或动画。

View Demo 查看演示 View Github 查看Github

安装 (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>

物产 (Properties)

Property	Type	Default	Required	Description
threshold	Array	[0, 0.2]	no	MDN docs
root	HTMLElement	null	no	MDN docs
rootMargin	String	0px 0px 0px 0px	no	MDN docs

属性	类型	默认	需要	描述
阈	数组	[0，0.2]	没有	MDN文档
根	HTMLElement	空值	没有	MDN文档
rootMargin	串	0px 0px 0px 0px	没有	MDN文档

大事记 (Events)

Name	Arguments	Description
change	IntersectionObserverEntry	Event fired on any inte.
enter	IntersectionObserverEntry	Event fired when the element is intersected (visible on the screen)
leave	IntersectionObserverEntry	Event fired when the element is not intersected (not visible on the screen)
destroyed	None	Fired when the underlying element is destroyed

名称	争论	描述
更改	IntersectionObserverEntry	事件在任何接口上触发。
输入	IntersectionObserverEntry	元素相交时触发的事件(在屏幕上可见)
离开	IntersectionObserverEntry	当元素不相交时触发事件(在屏幕上不可见)
被毁	没有	当基础元素被销毁时触发

The enter and leave event is sugar, for an often performed operation. You still have to set the threshold to e.g. [0, 0.2] (default). If you leave out "0", it will never call the leave event.

对于经常执行的操作， 进入和离开事件是糖。 您仍然必须将阈值设置为例如[0，0.2](默认)。 如果您遗漏“ 0”，它将永远不会调用请假事件。

The events is compliant with Vue's event modifiers. This means that you could add .once to the events to make sure you only trigger your event handler once.

这些事件与Vue的事件修饰符兼容。 这意味着您可以将.once添加到事件中，以确保仅触发一次事件处理程序。

Polyfill (Polyfill)

The IntersectionObserver API is not currently available in all browsers (IE11, Safari and iOS Safari). If you intend to support these browsers, you'll need to add a poylfill to your bundle.

当前，IntersectionObserver API并非在所有浏览器( IE11，Safari和iOS Safari )中都可用。 如果要支持这些浏览器，则需要在捆绑包中添加poylfill。

WICG IntersectionObserver Polyfill is highly recommended.

强烈建议使用WICG IntersectionObserver Polyfill 。

翻译自: https://vuejsexamples.com/a-vue-component-to-add-intersection-observer-to-a-vue-component-or-html-element/

vue 动态添加元素组件