v1.1.0

Author: huangshuwei

README-CN.md

@@ -9,6 +9,7 @@
 vue 懒加载容器，通过监听元素在页面中的可见性，决定是否加载资源并渲染。
 
 ## 解决什么问题
+
 当页面内容超过一屏时，我们往往希望只加载并渲染当前一屏的数据，而随着页面的滚动，再去加载并渲染下面的内容。这样的好处可以大大提升页面打开速度，以及减少额外的网络请求（xhr）。vue-lazy-container 正好可以帮我们解决这个问题。
 
 ## Online Demo
@@ -40,7 +41,7 @@ Vue.use(VueLazyContainer);
 
 ```javascript
 <template>
-  <vue-lazy-container tag-name="div" @change="visibilityChange">
+  <vue-lazy-container tag-name="div" id=1 @change="visibilityChange">
     <template v-if="isLoaded">
       <!-- your content -->
     </template>
@@ -56,7 +57,7 @@ export default {
   },
   methods: {
     // visibility change
-    visibilityChange(entry, observer) {
+    visibilityChange(entry, observer, id) {
       const { isIntersecting } = entry;
 
       // visibility
@@ -75,17 +76,17 @@ export default {
 
 **Props**
 
-| 参数    | 说明         | 类型              | 可选值                       | 默认值 |
-| ------- | ------------ | ----------------- | ---------------------------- | ------ |
-| tagName | 容器节点类型 | `Element.tagName` | div、span、p、img、i、a etc. | -      |
-| intersectionOption | Intersection Observer Option | `Object` | root、rootMargin、threshold | -      |
-
+| 参数               | 说明                         | 类型              | 可选值                       | 默认值 |
+| ------------------ | ---------------------------- | ----------------- | ---------------------------- | ------ |
+| tagName            | 容器节点类型                 | `Element.tagName` | div、span、p、img、i、a etc. | -      |
+| id                 | 容器的 id                    | `String, Number`  | -                            | -      |
+| intersectionOption | Intersection Observer Option | `Object`          | root、rootMargin、threshold  | -      |
 
 **Event**
 
-| 事件名称 | 说明         | 回调参数   |
-| -------- | ------------ | ---------- |
-| change   | 元素可见变化事件 | [IntersectionObserverEntry](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry)、observer |
+| 事件名称 | 说明             | 回调参数                                                                                                          |
+| -------- | ---------------- | ----------------------------------------------------------------------------------------------------------------- |
+| change   | 元素可见变化事件 | [IntersectionObserverEntry](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry)、observer、id|
 
 ## License
 

README.md

@@ -40,7 +40,7 @@ Example:
 
 ```javascript
 <template>
-  <vue-lazy-container tag-name="div" @change="visibilityChange">
+  <vue-lazy-container tag-name="div" id=1 @change="visibilityChange">
     <template v-if="isLoaded">
       <!-- your content -->
     </template>
@@ -56,7 +56,7 @@ export default {
   },
   methods: {
     // visibility change
-    visibilityChange(entry, observer) {
+    visibilityChange(entry, observer, id) {
       const { isIntersecting } = entry;
 
       // visibility
@@ -78,14 +78,15 @@ export default {
 | Prop    | Description         | Type              | Optional value                       | Default |
 | ------- | ------------ | ----------------- | ---------------------------- | ------ |
 | tagName | Element TagName | `Element.tagName` | div、span、p、img、i、a etc. | -      |
+| id                 | container id                    | `String, Number`  | -                            | -      |
 | intersectionOption | Intersection Observer Option | `Object` | root、rootMargin、threshold | -      |
 
 
 **Event**
 
 | Event Name | Description         | Callback Parameters   |
 | -------- | ------------ | ---------- |
-| change   | Element visible change events | [IntersectionObserverEntry](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry)、observer |
+| change   | Element visible change events | [IntersectionObserverEntry](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry)、observer、id |
 
 ## License
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-lazy-container",
-  "version": "1.1.0-beta.2",
+  "version": "1.1.0",
   "description": "listening to the visibility of elements in the page",
   "keywords": [
     "vue",