Vue Observe Visibility
made with Vuejs

Vue Observe Visibility是一个元素可见性观察者指令组件，用来监测页面元素隐藏和显示的变化。

安装

Npm

npm i vue-observe-visibility

Yarn

yarn add vue-observe-visibility

浏览器

<script src="vue.js"></script>
<script src="https://unpkg.com/vue-observe-visibility/dist/vue-observe-visibility.min.js"></script>

Vue.use(VueObserveVisibility)

//或者

Vue.directive('observe-visibility', VueObserveVisibility.ObserveVisibility)

使用

引入

import Vue from 'vue'
import VueObserveVisibility from 'vue-observe-visibility'

Vue.use(VueObserveVisibility)

或者

import Vue from 'vue'
import { ObserveVisibility } from 'vue-observe-visibility'

Vue.directive('observe-visibility', ObserveVisibility)

作为指令使用

<div v-observe-visibility="visibilityChanged">


//函数

visibilityChanged (isVisible, entry) {
  this.isVisible = isVisible
  console.log(entry)
}

示例

<div id="app">
  <button @click="show = !show">Toggle</button>
  <label>
    <input type="checkbox" v-model="isVisible" disabled/> Is visible?
  </label>
  <div ref="test" v-show="show" v-observe-visibility="visibilityChanged">Hello world!</div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    show: true,
    isVisible: true,
  },
  methods: {
    visibilityChanged (isVisible, entry) {
      this.isVisible = isVisible
      console.log(entry)
    },
  },
})
</script>