Check if element is in viewport with Vue2.0+
Install
npm i vue-on-screen
import vueOnScreen from 'vue-on-screen'
Vue.use(vueOnScreen,{
minShowHeight:20,//默认的最小展示高度判断设置
minShowWidth:1,//默认的最小展示宽度判断设置
callbk:function(e){//默认的回调函数设置
}
})
Add directive 'v-on-screen' to elements
Example
<!--minShowHeight:展示最低多少的高度才算展示,100表示在屏幕内展示出100px的高度,才算该元素展示了, 默认为1 -->
<!--isForceHeight:isForceHeight 强制是否强制使用传入的高度,一般在元素是动态高度的时候需要传入,默认为false，表示计算 minShowHeight = Math.min(元素高度,minShowHeight) -->
<!--minShowWidth:展示最低多少的宽度才算展示,100表示在屏幕内展示出100px的宽度,才算该元素展示了 ,默认为1 -->
<!--isForceWidth:isForceWidth 强制是否强制使用传入的宽度,一般在元素是动态款固定的时候需要传入,默认为false，表示计算 minShowWidth = Math.min(元素宽度,minShowWidth), -->
<!--callbkParam:表示位置需要传给回调函数callbk的对象,和callbk配合使用,默认值{} -->
<!--callbk:当元素符合条件展示在页面内的时候回调函数，默认为空 -->
<!--once，vue的modifiers,可以仅回调一次，这个和onceenter表现一致。为了向前兼容。和callbk配合使用>
<!--onceenter，vue的modifiers,可以在该元素符合进入条件时回调一次。和callbk配合使用>
<!--onceexit，vue的modifiers,可以在该元素符合退出条件时回调一次。和callbk配合使用>
<!--always，vue的modifiers,页面滚动的时候总是执行回调。和callbk配合使用>
<div v-on-screen.onceenter="{
minShowHeight:100,
isForceHeight:true,
minShowWidth:100,
callbkParam:{
index:2
},
callbk:onScreenCallbk
}">
Content
</div>
funtion onScreenCallbk (e) {
console.log(e.eventType) // 'enter' 'exit' 'process' 表示当前元素在屏幕的位置
console.log(e.isInView) // 是否在页面内展示了
console.log(e.isTopIn）// 是否顶部在页面内
console.log(e.isBottomIn) //是否底部在页面(仅针对盒子大小小于一个屏幕高度的，如果大于一个屏幕，这个值可能不准，建议用isBottomInOnePixMore)
console.log(e.isLeftIn) //是否左边缘在页面内
console.log(e.isRightIn) //是否右边缘在页面内
console.log(e.onScreenHeigh) //展示出来的高度PX
console.log(e.onScreenWidth) //展示出来的宽度Px
console.log(e.heightPercentInView) //展示出来的高度占元素总高度的百分比
console.log(e.widthPercentInView) //展示出来的宽度占元素总宽度的百分比
console.log(e.isAbove) //是否在屏幕的顶部
console.log(e.isBelow) //是否在屏幕的底部
console.log(e.isLeft) //是否在屏幕的左边
console.log(e.isRight) //是否在屏幕的右边
console.log(e.rect) // 元素的getBoundingClientRect返回值
console.log(e.target) //当前元素
console.log(e.callbkParam) //自定义传入的回调参数
}