安装
npm install --save vue-observe-visibility
1
注意
这个插件使用的Intersection Observer API并不是所有浏览器都支持的(目前Edge、Firefox和Chrome都支持)。您需要使用polyfill使它在不兼容的浏览器能够正常工作。
引入
import Vue from 'vue'
import VueObserveVisibility from 'vue-observe-visibility'
Vue.use(VueObserveVisibility)
1
2
3
4
2
3
4
或：
import Vue from 'vue'
import { ObserveVisibility } from 'vue-observe-visibility'
Vue.directive('observe-visibility', ObserveVisibility)
1
2
3
4
2
3
4
浏览器
<script src="vue.js"></script>
<script src="https://unpkg.com/vue-observe-visibility/dist/vue-observe-visibility.min.js"></script>
1
2
2
插件可以自动安装。如果没有，您可以按照下面的说明手动安装它。
加载指令。
Vue.use(VueObserveVisibility)
1
使用特定指令：
Vue.directive('observe-visibility', VueObserveVisibility.ObserveVisibility)
1
使用 →