vue-observer-directive

通过window.IntersectionObserver判断DOM是否在视口展示，在Vue@2自定义指令中进行方法执行。

1. npm：https://www.npmjs.com/package/vue-observer-directive
2. demo：https://realgeoffrey.github.io/vue-observer-directive/demo/index.html

安装

1. Node.js安装

   npm install vue-observer-directive --save

2. 浏览器引用

   <!-- 需要先引入vue：<script src="//unpkg.com/vue@2"></script> -->
   <script src="//unpkg.com/vue-observer-directive"></script>

注册指令

1. Node.js注册

   1. 全局注册

      import Vue from 'vue'
      import vueObserverDirective from 'vue-observer-directive'
      
      // 全局注册
      Vue.use(vueObserverDirective, { directive: 'observer' }) // 自定义指令名默认是：observer
      // 或：Vue.directive('observer', vueObserverDirective)

   2. 局部注册

      import vueObserverDirective from 'vue-observer-directive'
      
      export default {
        directives: {
          // 局部注册
          observer: vueObserverDirective
        }
      }

2. 浏览器注册

   1. 全局注册

      <!-- 需要先引入vue：<script src="//unpkg.com/vue@2"></script> -->
      <!-- 需要先引入vue-observer-directive：<script src="//unpkg.com/vue-observer-directive"></script> -->
      
      <script>
      // 全局注册
      Vue.use(vueObserverDirective, { directive: 'observer' }) // 自定义指令名默认是：observer
      // 或：Vue.directive('observer', vueObserverDirective)
      </script>

   2. 局部注册

      <!-- 需要先引入vue：<script src="//unpkg.com/vue@2"></script> -->
      <!-- 需要先引入vue-observer-directive：<script src="//unpkg.com/vue-observer-directive"></script> -->
      
      <script>
      new Vue({
        directives: {
          // 局部注册
          observer: vueObserverDirective
        }
      })
      </script>

用法

1. 指令名称：v-observer

2. 指令参数：

   1. 传给指令的参数：:数字（数字：1~100）
   2. 修饰符：.once
   3. 绑定值：{ show: 可见时方法, hide: 非可见时方法 }

• e.g.

  <!-- DOM展示100%时执行：方法1；否则执行：方法2 -->
  <div v-observer="{ show: 方法1, hide: 方法2 }" />
  
  <!-- DOM展示≥10%时执行：方法1；否则执行：方法2 -->
  <div v-observer:10="{ show: 方法1, hide: 方法2 }" />
  
  <!-- DOM展示100%时执行：方法1；否则执行：方法2。若展示过一次，则不再触发2个方法 -->
  <div v-observer.once="{ show: 方法1, hide: 方法2 }" />
  
  <!-- DOM展示≥80%时执行：方法1；否则执行：方法2。若展示过一次，则不再触发2个方法 -->
  <div v-observer:80.once="{ show: 方法1, hide: 方法2 }" />

注意

若用来处理无限加载的问题，则要考虑show方法仅在从消失变为展示时才会触发（window.IntersectionObserver作用原理），hide方法同理。

• 可以在触发节点上增加v-if/v-show来处理无限加载

  e.g.<div v-if="showLoadMore" v-observer="{ show: () => { 加载数据；在加载数据前把showLoadMore设置为false、加载完毕后设置为true } }">