refine readme

Author: huangshuwei

README-CN.md

@@ -0,0 +1,82 @@
+# vue-lazy-container
+
+**中文** | [English](./README.md)
+
+## Introduction
+
+vue 懒加载容器，通过监听元素在页面中的可见性，决定是否加载资源并渲染。
+
+## Why
+当页面内容超过一屏时，我们往往希望只加载并渲染当前一屏的数据，而随着页面的滚动，再去加载并渲染下面的内容。这样的好处可以大大提升页面打开速度，以及减少额外的网络请求（xhr）。vue-lazy-container 正好可以帮我们解决这个问题。
+
+## Install
+
+```
+npm install vue-lazy-container
+```
+
+or
+
+```
+yarn add vue-lazy-container
+```
+
+## Usage
+
+在你的 main.js 中写如下代码：
+
+```javascript
+import VueLazyContainer from "vue-lazy-container";
+Vue.use(VueLazyContainer);
+```
+
+示例:
+
+```javascript
+<template>
+  <vue-lazy-container tag-name="div" @change="visibilityChange">
+    <template v-if="isLoaded">
+      <!-- your content -->
+    </template>
+  </vue-lazy-container>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      isLoaded: false
+    };
+  },
+  methods: {
+    // visibility change
+    visibilityChange(entry, observer) {
+      const { isIntersecting } = entry;
+
+      // visibility
+      if (isIntersecting) {
+        this.isLoaded = true;
+        // you can ajax request or other logic
+      }
+    }
+  }
+};
+</script>
+
+```
+
+## API
+
+**Props**
+
+| 参数    | 说明         | 类型              | 可选值                       | 默认值 |
+| ------- | ------------ | ----------------- | ---------------------------- | ------ |
+| tagName | 容器节点类型 | `Element.tagName` | div、span、p、img、i、a etc. | -      |
+| intersectionOption | Intersection Observer Option | `Object` | root、rootMargin、threshold | -      |
+
+
+**Event**
+
+| 事件名称 | 说明         | 回调参数   |
+| -------- | ------------ | ---------- |
+| change   | 元素可见变化事件 | [IntersectionObserverEntry](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry)、observer |

README.md

@@ -1,8 +1,13 @@
 # vue-lazy-container
 
+**English** | [中文](./README-CN.md)
+
 ## Introduction
 
-Lazy container base on vuejs
+vue lazy container,By listening to the visibility of elements in the page, decide whether to load resources and render.
+
+## Why
+When the page content exceeds one screen, we often want to load and render only the data of the current screen,As the page scrolls, load and render the following. This can greatly improve the speed of page opening,And reduce additional network requests（xhr）。vue-lazy-container can just help us solve this problem.
 
 ## Install
 
@@ -18,7 +23,7 @@ yarn add vue-lazy-container
 
 ## Usage
 
-Write the following in your mian.js：
+Write the following in mian.js：
 
 ```javascript
 import VueLazyContainer from "vue-lazy-container";
@@ -64,12 +69,14 @@ export default {
 
 **Props**
 
-| 参数    | 说明         | 类型              | 可选值                       | 默认值 |
+| Prop    | Description         | Type              | Optional value                       | Default |
 | ------- | ------------ | ----------------- | ---------------------------- | ------ |
-| tagName | 容器节点类型 | `Element.tagName` | div、span、p、img、i、a etc. | -      |
+| tagName | Element TagName | `Element.tagName` | div、span、p、img、i、a etc. | -      |
+| intersectionOption | Intersection Observer Option | `Object` | root、rootMargin、threshold | -      |
+
 
 **Event**
 
-| 事件名称 | 说明         | 回调参数   |
+| Event Name | Description         | Callback Parameters   |
 | -------- | ------------ | ---------- |
-| change   | 容器节点类型 | 观察者列表 |
+| change   | Element visible change events | [IntersectionObserverEntry](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry)、observer |