元素互换插件_一个检查元素是否在视口中的插件

元素互换插件

视点检查视图 (vue-check-view)

Check if element is in viewport. Vue.js 2 plugin with SSR support without dependencies.

检查元素是否在视口中。 具有SSR支持的Vue.js 2插件，无需依赖。

View demo 查看演示 Download Source 下载源

Simple plugin that checks element position on the screen (viewport) and adds classes to element:

一个简单的插件，用于检查元素在屏幕(视口)上的位置并将类添加到元素：

1. In viewport classes: view-in and one of [view-in--gt-half, view-in--gt-thrid, view-in--full],

   在视口类中： view-in和[ view-in--gt-half ， view-in--gt-thrid ， view-in--full ]中的一种，

2. Out viewport classes: view-out and one of [view-out--below, view-out--above]

   出视口类： view-out和之一[ view-out--below ， view-out--above ]

It listens scroll and resize window events and supports modern browsers (Firefox, Chrome, Edge). Supports vue.js version 2 and higher.

它侦听scroll事件并resize窗口事件的resize并支持现代浏览器(Firefox，Chrome，Edge)。 支持vue.js版本2和更高版本。

安装 (Install)

npm i vue vue-check-view --save

import checkView from 'vue-check-view'
Vue.use(checkView)

or (only for test)

或(仅用于测试)

<script src="http://vtimofeev.github.io/vue-check-view/plugin.js">

向元素添加指令“视图” (Add directive 'view' to elements)

示例1，简单 (Example 1, simple)

Auto add classes to element

自动将类添加到元素

<div v-view>
    Content
</div>

示例2，使用处理程序进阶 (Example 2, advanced with use handler)

Auto add classes to element and executeHandler

自动将类添加到element和executeHandler

<div v-view="viewHandler">
    Content
</div>

funtion viewHandler (e) {
    console.log(e.type) // 'enter', 'exit', 'progress'
    console.log(e.percentInView) // 0..1 how much element overlap the viewport
    console.log(e.percentTop) // 0..1 position of element at viewport 0 - above , 1 - below
    console.log(e.percentCenter) // 0..1 position the center of element at viewport 0 - center at viewport top, 1 - center at viewport bottom
    console.log(e.scrollPercent) // 0..1 current scroll position of page
    console.log(e.scrollValue) // 0..1 last scroll value (change of page scroll offset)
    console.log(e.target.rect) // element.getBoundingClientRect() result
}

示例3，一旦元素出现在屏幕上，处理程序将一次执行 (Example 3, once time the handler will be executed when element appears on screen)

<div v-view.once="onceHandler">
    Content
</div>

funtion onceHandler (e) {
    console.log(e.type) // 'enter', 'exit', 'progress'
    console.log(e.percentInView) // 0..1 how much element overlap the viewport
    console.log(e.percentTop) // 0..1 position of element at viewport 0 - above , 1 - below
    console.log(e.percentCenter) // 0..1 position the center of element at viewport 0 - center at viewport top, 1 - center at viewport bottom
    console.log(e.scrollPercent) // 0..1 current scroll position of page
    console.log(e.scrollValue) // 0..1 last scroll value (change of page scroll offset)
    console.log(e.target.rect) // element.getBoundingClientRect() result
}

翻译自: https://vuejsexamples.com/a-plugin-that-checks-if-element-is-in-viewport/

元素互换插件