Package Exports

vue-observer-directive

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-observer-directive) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

vue-observer-directive

在线Demo

https://realgeoffrey.github.io/vue-observer-directive

Installation

npm i vue-observer-directive -S

注册指令

通过指令的方式实现的，因此使用前需注册指令，可以全局注册也可以局部注册。

全局注册

import Vue from 'vue'
import vueObserverDirective from 'vue-observer-directive'

Vue.use(vueObserverDirective)

局部注册 && 用法

<template>
  <div>
    <!-- DOM展示≥10%执行：方法1-1；否则执行：方法2-1 -->
    <img v-observer:10="{ show: 方法1-1, hide: 方法2-1 }" alt="first" src="//via.placeholder.com/150?text=first">

    <!-- DOM展示100%执行：方法1-2；否则执行：方法2-2；若展示过一次，则不再触发2个方法 -->
    <img v-observer.once="{ show: 方法1-2, hide: 方法2-2 }" alt="second" src="//via.placeholder.com/150?text=second">

    <!-- DOM展示≥80%执行：方法1-3；否则执行：方法2-3；若展示过一次，则不再触发2个方法 -->
    <img v-observer:80.once="{ show: 方法1-3, hide: 方法2-3 }" alt="third" src="//via.placeholder.com/150?text=third">

    <!-- DOM展示100%执行：方法1-4；否则执行：方法2-4 -->
    <img v-observer="{ show: 方法1-4, hide: 方法2-4 }" alt="four" src="//via.placeholder.com/150?text=four">
  </div>
</template>
<script>
import vueObserverDirective from 'vue-observer-directive'

export default {
  // 注册指令
  directives: {
    vueObserverDirective.observer
  }
}
</script>