@@ -16,9 +16,10 @@ npm install --save vue-observable
16
16
17
17
### Componentlist
18
18
19
- - [ ` <intersect> ` ] ( )
20
- - [ ` <mutate> ` ] ( )
21
- - [ ` <resize> ` ] ( )
19
+ - [ ` <intersect> ` ] ( /src/IntersectionnObserver.js )
20
+ - [ ` <mutation> ` ] ( /src/MutationObserver.js )
21
+ - [ ` <resize> ` ] ( /src/ResizeObserver.js )
22
+
22
23
### Bundler (Webpack, Rollup)
23
24
24
25
``` js
@@ -31,10 +32,10 @@ Vue.use(VueObservable)
31
32
or
32
33
33
34
``` js
34
- import {intersect , mutate } from ' vue-observable'
35
+ import {Intersect , Mutation , Resize } from ' vue-observable'
35
36
36
37
export default {
37
- components: {intersect, mutate }
38
+ components: {Intersect, Mutation, Resize }
38
39
}
39
40
```
40
41
@@ -51,19 +52,19 @@ export default {
51
52
52
53
## 📒 Components
53
54
54
- ### IntersectionObserver
55
+ ### IntersectionObserver - [ ` <intersect> ` ] ( /src/IntersectionnObserver.js )
56
+
55
57
The ` <intersect> ` component will detect if a given element is in the viewport. And emit an event.
56
58
57
59
#### Props
58
60
59
- | Prop | Required | Url | Default |
60
- | --- | --- | --- | --- |
61
- | root | no | [ url ] ( https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/root ) | null
62
- | rootMargin | no | [ url ] ( https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin ) | ` 0px 0px 0px 0px ` |
63
- | threshold | no | [ url ] ( https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/thresholds ) | ` [0, 0.2] ` |
61
+ | Prop | Required | Default |
62
+ | --- | --- | --- |
63
+ | [ root ] ( https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/root ) | no | null
64
+ | [ rootMargin ] ( https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin ) | no | ` 0px 0px 0px 0px ` |
65
+ | [ threshold ] ( https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/thresholds ) | no | ` [0, 0.2] ` |
64
66
65
67
#### Events
66
- The ` <intersect></intersect> ` component emits following events:
67
68
68
69
- ` enter `
69
70
- ` leave `
@@ -72,21 +73,55 @@ The `<intersect></intersect>` component emits following events:
72
73
#### Usage
73
74
74
75
``` html
75
- <intersect @enter =" someMethod() " @leave =" someMethod() " @change =" someMethod() " >
76
+ <intersect @enter =" enterMethod " @leave =" leaveMethod " @change =" changeMethod " >
76
77
<some-component-or-node >
77
78
</intersect >
78
79
```
79
- ### MutationObserver
80
+
81
+ ### MutationObserver - [ ` <Mutation> ` ] ( /src/MutationObserver.js )
80
82
81
83
#### Props
84
+
85
+ | Prop | Required | Default |
86
+ | --- | --- | --- |
87
+ | [ attributeFilter] ( https://developer.mozilla.org/en-US/docs/Web/API/MutationObserverInit/attributeFilter ) | no | null
88
+ | [ attributeOldValue] ( https://developer.mozilla.org/en-US/docs/Web/API/MutationObserverInit/attributeOldValue ) | no | null
89
+ | [ attributes] ( https://developer.mozilla.org/en-US/docs/Web/API/MutationObserverInit/attributes ) | no | false
90
+ | [ characterData] ( https://developer.mozilla.org/en-US/docs/Web/API/MutationObserverInit/characterData ) | no |null
91
+ | [ characterDataOldValue] ( https://developer.mozilla.org/en-US/docs/Web/API/MutationObserverInit/characterDataOldValue ) | no |null
92
+ | [ childList] ( https://developer.mozilla.org/en-US/docs/Web/API/MutationObserverInit/childList ) | no |false
93
+ | [ subtree] ( https://developer.mozilla.org/en-US/docs/Web/API/MutationObserverInit/subtree ) | no |false
94
+
82
95
#### Events
96
+
97
+ - ` mutation `
98
+
83
99
#### Usage
84
100
85
- ### ResizeObserver
101
+ ``` html
102
+ <mutation @mutation =" mutationMethod" >
103
+ <some-component-or-node >
104
+ </mutation >
105
+ ```
106
+
107
+ ### ResizeObserver - [ ` <resize> ` ] ( /src/ResizeObserver.js )
86
108
87
109
#### Props
110
+
111
+ N/A
112
+
88
113
#### Events
114
+
115
+ - ` resize `
116
+
89
117
#### Usage
118
+
119
+ ``` html
120
+ <resize @resize =" resizeMethod" >
121
+ <some-component-or-node >
122
+ </resize >
123
+ ```
124
+
90
125
## Development
91
126
92
127
### Launch visual tests
0 commit comments