diff --git a/.editorconfig b/.editorconfig
deleted file mode 100644
index 870a768..0000000
--- a/.editorconfig
+++ /dev/null
@@ -1,12 +0,0 @@
-root = true
-
-[*]
-indent_size = 2
-charset = utf-8
-indent_style = space
-end_of_line = lf
-insert_final_newline = true
-trim_trailing_whitespace = true
-
-[*.md]
-indent_size = 4
diff --git a/README.md b/README.md
index 2f3f856..91fdfdd 100644
--- a/README.md
+++ b/README.md
@@ -1,114 +1,65 @@
 # vue-observer-directive
 
-## 在线Demo
-
-[https://xunleif2e.github.io/vue-clickout/demo/dist/index.html](https://xunleif2e.github.io/vue-clickout/demo/dist/index.html)
-
-## Installation
-
-```
-npm i @xunlei/vue-clickout -S
-```
-
-## 注册指令
-
-`clickout`事件是通过指令的方式实现的，因此使用前需注册指令，可以全局注册也可以局部注册。
-
-### 全局注册
-```javascript
-import Vue from 'vue'
-import VueClickout from '@xunlei/vue-clickout'
-
-Vue.use(VueClickout)
-```
-### 局部注册
-```html
-<template>
-  <div class="face" v-clickout @clickout="open=false">
-    <a href="javascript:;" @click="open=!open">表情</a>
-    <div class="emoji">
-       <li title="开心"><span class="ico-emoji emoji-kaixin"></span></li>
-       <li title="可爱"><span class="ico-emoji emoji-keai"></span></li>
-    </div>
-  </div>
-</template>
-<script>
-import { clickout } from '@xunlei/vue-clickout'
-
-export default {
-  data () {
-    return {
-       open: false
-    }
-  },
-  // 注册指令
-  directives: {
-    clickout
-  }
-}
-</script>
-```
-### 用法
+通过[`window.IntersectionObserver`](https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserver)判断DOM是否在视口展示，在Vue自定义指令中进行方法执行。
 
-```html
-<template>
-  <div class="item-comment">
-    <div class="comment-user">
-      <span class="user-name">疯狂的迷弟: </span>
-      <p class="text-comment">王祖贤越看越美</p>
-      <a href="javascript:;" class="reply-btn" @click="showReply=!showReply" ref="replyBtnRef">回复</a>
-    </div>
-    <div class="reply"  v-clickout="['replyBtnRef']" @clickout="showReply=false">
-      <div class="reply-area" v-show="showReply">
-        <input type="text" class="ipt-reply">
-        <div class="reply-option">
-          <button>发送</button>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-      showReply: false
-    }
-  }
-}
-</script>
-```
-### 参数
+1. npm：<https://www.npmjs.com/package/vue-observer-directive>
+2. demo：<https://realgeoffrey.github.io/vue-observer-directive/index.html>
+
+### 安装
+1. node安装
+
+    ```bash
+    npm install vue-observer-directive
+    ```
+2. 浏览器引用
 
-参数 | 说明 | 类型 | 
-| :-- | :-- | :-- |
-| exceptRefs | 要排除的Ref,默认为指令所在的DOM | Array
+    ```html
+    <script src="//unpkg.com/vue-observer-directive"></script>
+    ```
 
-## 开发命令
+### 注册指令
+1. 全局注册
 
-``` bash
-# install deps
-npm install
+    ```javascript
+    import Vue from 'vue'
+    import vueObserverDirective from 'vue-observer-directive'
 
-# serve demo at localhost:8080
-npm run dev
+    // 全局注册
+    Vue.use(vueObserverDirective)
+    ```
+2. 局部注册
 
-# build library and demo
-npm run build
+    ```javascript
+    import vueObserverDirective from 'vue-observer-directive'
+
+    export default {
+      directives: {
+        // 局部注册
+        observer: vueObserverDirective.observer
+      }
+    }
+    ```
+
+### 用法
+1. 指令名称：`v-observer`
+2. 指令参数：
 
-# build library
-npm run build:library
+    1. 传给指令的参数：`:数字`（数字：1~100）
+    2. 修饰符：`.once`
+    3. 绑定值：`{ show: 可见时方法, hide: 非可见时方法 }`
 
-# build demo
-npm run build:demo
+- e.g.
 
-# pre publish
-npm run prepublish
-```
+    ```vue
+    <!-- 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">
 
-## License
+    <!-- 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">
 
-[MIT](http://opensource.org/licenses/MIT)
+    <!-- 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">
 
-Copyright (c) 2018 [greenfavo](https://github.com/greenfavo)
+    <!-- DOM展示100%执行：方法1-4；否则执行：方法2-4 -->
+    <img v-observer="{ show: 方法1-4, hide: 方法2-4 }" alt="four" src="//via.placeholder.com/150?text=four">
+    ```
diff --git a/build/rollup.config.js b/build/rollup.config.js
index 6b5291e..68b536d 100644
--- a/build/rollup.config.js
+++ b/build/rollup.config.js
@@ -7,7 +7,6 @@ const config = {
   plugins: [
     babel({
       ...babelrc({
-        addModuleOptions: false,
         addExternalHelpersPlugin: false
       }),
       exclude: 'node_modules/**'
@@ -18,23 +17,27 @@ const config = {
   ]
 }
 
-export default [{
-  ...config,
-  output: {
-    format: 'iife', // <script>引用
-    file: 'dist/vue-observer-directive.iife.js',
-    name: 'vueObserverDirective'
+export default [
+  {
+    ...config,
+    output: {
+      format: 'cjs',  // CommonJS
+      file: 'dist/vue-observer-directive.cjs.js'
+    }
+  },
+  {
+    ...config,
+    output: {
+      format: 'esm',  // ES6 module
+      file: 'dist/vue-observer-directive.esm.js'
+    }
+  },
+  {
+    ...config,
+    output: {
+      format: 'iife', // <script>引用
+      file: 'dist/vue-observer-directive.iife.js',
+      name: 'vueObserverDirective'
+    }
   }
-}, {
-  ...config,
-  output: {
-    format: 'esm',  // ES6 module
-    file: 'dist/vue-observer-directive.esm.js'
-  }
-}, {
-  ...config,
-  output: {
-    format: 'cjs',  // CommonJS
-    file: 'dist/vue-observer-directive.cjs.js'
-  }
-}]
+]
diff --git a/demo.html b/demo/index.html
similarity index 100%
rename from demo.html
rename to demo/index.html
diff --git a/dist/vue-observer-directive.cjs.js b/dist/vue-observer-directive.cjs.js
index 04142a2..47fb174 100644
--- a/dist/vue-observer-directive.cjs.js
+++ b/dist/vue-observer-directive.cjs.js
@@ -55,30 +55,34 @@ function DisplayDom() {
   }
 }
 
-var vueObserverDirective = {
-  install: function install(Vue) {
-    Vue.directive('observer', {
-      // v-observer:数字.once="{ show: ()=>{}, hide: ()=>{} }"
-      inserted: function inserted(el, _ref2) {
-        var value = _ref2.value,
-            arg = _ref2.arg,
-            modifiers = _ref2.modifiers;
-        el.observer = new DisplayDom({
-          target: el,
-          show: typeof value === 'function' ? value : value.show,
-          hide: value.hide,
-          threshold: arg / 100 || undefined,
-          once: modifiers.once,
-          root: value.dom
-        });
-      },
-      unbind: function unbind(el) {
-        if (el.observer && typeof el.observer.stop === 'function') {
-          el.observer.stop();
-        }
-      }
+var observer = {
+  // v-observer:数字.once="{ show: ()=>{}, hide: ()=>{} }"
+  inserted: function inserted(el, _ref2) {
+    var value = _ref2.value,
+        arg = _ref2.arg,
+        modifiers = _ref2.modifiers;
+    el.observer = new DisplayDom({
+      target: el,
+      show: typeof value === 'function' ? value : value.show,
+      hide: value.hide,
+      threshold: arg / 100 || undefined,
+      once: modifiers.once,
+      root: value.dom
     });
+  },
+  unbind: function unbind(el) {
+    if (el.observer && typeof el.observer.stop === 'function') {
+      el.observer.stop();
+    }
   }
 };
+var vueObserverDirective = {
+  // 全局注册
+  install: function install(Vue) {
+    Vue.directive('observer', observer);
+  },
+  // 局部注册
+  observer: observer
+};
 
 module.exports = vueObserverDirective;
diff --git a/dist/vue-observer-directive.esm.js b/dist/vue-observer-directive.esm.js
index d0c39bd..02f39c2 100644
--- a/dist/vue-observer-directive.esm.js
+++ b/dist/vue-observer-directive.esm.js
@@ -53,30 +53,34 @@ function DisplayDom() {
   }
 }
 
-var vueObserverDirective = {
-  install: function install(Vue) {
-    Vue.directive('observer', {
-      // v-observer:数字.once="{ show: ()=>{}, hide: ()=>{} }"
-      inserted: function inserted(el, _ref2) {
-        var value = _ref2.value,
-            arg = _ref2.arg,
-            modifiers = _ref2.modifiers;
-        el.observer = new DisplayDom({
-          target: el,
-          show: typeof value === 'function' ? value : value.show,
-          hide: value.hide,
-          threshold: arg / 100 || undefined,
-          once: modifiers.once,
-          root: value.dom
-        });
-      },
-      unbind: function unbind(el) {
-        if (el.observer && typeof el.observer.stop === 'function') {
-          el.observer.stop();
-        }
-      }
+var observer = {
+  // v-observer:数字.once="{ show: ()=>{}, hide: ()=>{} }"
+  inserted: function inserted(el, _ref2) {
+    var value = _ref2.value,
+        arg = _ref2.arg,
+        modifiers = _ref2.modifiers;
+    el.observer = new DisplayDom({
+      target: el,
+      show: typeof value === 'function' ? value : value.show,
+      hide: value.hide,
+      threshold: arg / 100 || undefined,
+      once: modifiers.once,
+      root: value.dom
     });
+  },
+  unbind: function unbind(el) {
+    if (el.observer && typeof el.observer.stop === 'function') {
+      el.observer.stop();
+    }
   }
 };
+var vueObserverDirective = {
+  // 全局注册
+  install: function install(Vue) {
+    Vue.directive('observer', observer);
+  },
+  // 局部注册
+  observer: observer
+};
 
 export default vueObserverDirective;
diff --git a/dist/vue-observer-directive.iife.js b/dist/vue-observer-directive.iife.js
index 33a4e4e..43241d0 100644
--- a/dist/vue-observer-directive.iife.js
+++ b/dist/vue-observer-directive.iife.js
@@ -56,31 +56,35 @@ var vueObserverDirective = (function () {
     }
   }
 
-  var vueObserverDirective = {
-    install: function install(Vue) {
-      Vue.directive('observer', {
-        // v-observer:数字.once="{ show: ()=>{}, hide: ()=>{} }"
-        inserted: function inserted(el, _ref2) {
-          var value = _ref2.value,
-              arg = _ref2.arg,
-              modifiers = _ref2.modifiers;
-          el.observer = new DisplayDom({
-            target: el,
-            show: typeof value === 'function' ? value : value.show,
-            hide: value.hide,
-            threshold: arg / 100 || undefined,
-            once: modifiers.once,
-            root: value.dom
-          });
-        },
-        unbind: function unbind(el) {
-          if (el.observer && typeof el.observer.stop === 'function') {
-            el.observer.stop();
-          }
-        }
+  var observer = {
+    // v-observer:数字.once="{ show: ()=>{}, hide: ()=>{} }"
+    inserted: function inserted(el, _ref2) {
+      var value = _ref2.value,
+          arg = _ref2.arg,
+          modifiers = _ref2.modifiers;
+      el.observer = new DisplayDom({
+        target: el,
+        show: typeof value === 'function' ? value : value.show,
+        hide: value.hide,
+        threshold: arg / 100 || undefined,
+        once: modifiers.once,
+        root: value.dom
       });
+    },
+    unbind: function unbind(el) {
+      if (el.observer && typeof el.observer.stop === 'function') {
+        el.observer.stop();
+      }
     }
   };
+  var vueObserverDirective = {
+    // 全局注册
+    install: function install(Vue) {
+      Vue.directive('observer', observer);
+    },
+    // 局部注册
+    observer: observer
+  };
 
   return vueObserverDirective;
 
diff --git a/package.json b/package.json
index 8ff90b2..8039fca 100644
--- a/package.json
+++ b/package.json
@@ -20,16 +20,16 @@
   "unpkg": "dist/vue-observer-directive.iife.js",
   "jsdelivr": "dist/vue-observer-directive.iife.js",
   "scripts": {
-    "build": "rollup --config ./build/rollup.config.js ./src/vue-observer-directive.js"
+    "build": "rollup --config ./build/rollup.config.js "
   },
   "dependencies": {},
   "devDependencies": {
-    "@babel/core": "^7.2.2",
+    "@babel/core": "^7.3.3",
     "@babel/preset-env": "^7.3.1",
     "rollup": "^1.1.2",
     "rollup-plugin-babel": "^4.3.2",
     "rollup-plugin-commonjs": "^9.2.0",
     "babelrc-rollup": "^3.0.0"
   },
-  "version": "0.2.0"
+  "version": "1.0.0"
 }
diff --git a/src/vue-observer-directive.js b/src/vue-observer-directive.js
index 72a9f68..2162a1d 100644
--- a/src/vue-observer-directive.js
+++ b/src/vue-observer-directive.js
@@ -36,26 +36,32 @@ function DisplayDom ({ target, show = () => {}, hide = () => {}, threshold = 0.0
   }
 }
 
-const vueObserverDirective = {
-  install (Vue) {
-    Vue.directive('observer', {  // v-observer:数字.once="{ show: ()=>{}, hide: ()=>{} }"
-      inserted (el, { value, arg, modifiers }) {
-        el.observer = new DisplayDom({
-          target: el,
-          show: typeof value === 'function' ? value : value.show,
-          hide: value.hide,
-          threshold: (arg / 100) || undefined,
-          once: modifiers.once,
-          root: value.dom
-        })
-      },
-      unbind (el) {
-        if (el.observer && typeof el.observer.stop === 'function') {
-          el.observer.stop()
-        }
-      }
+const observer = {  // v-observer:数字.once="{ show: ()=>{}, hide: ()=>{} }"
+  inserted (el, { value, arg, modifiers }) {
+    el.observer = new DisplayDom({
+      target: el,
+      show: typeof value === 'function' ? value : value.show,
+      hide: value.hide,
+      threshold: (arg / 100) || undefined,
+      once: modifiers.once,
+      root: value.dom
     })
+  },
+  unbind (el) {
+    if (el.observer && typeof el.observer.stop === 'function') {
+      el.observer.stop()
+    }
   }
 }
 
+const vueObserverDirective = {
+  // 全局注册
+  install (Vue) {
+    Vue.directive('observer', observer)
+  },
+
+  // 局部注册
+  observer
+}
+
 export default vueObserverDirective