Skip to content

Commit e8863f6

Browse files
David-DesmaisonsDavid-Desmaisons
committed
Example and correction for issue#10
1 parent a1dd83f commit e8863f6

File tree

4 files changed

+163
-37
lines changed

4 files changed

+163
-37
lines changed

‎example/components/Hello.vue‎

Lines changed: 78 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,35 @@
11
<template>
22
<div class="hello">
3-
<label>Show examples: <input type="checkbox" v-model="showExample" /></label>
3+
<label>Show examples: <input
4+
type="checkbox"
5+
v-model="showExample"
6+
/></label>
7+
8+
<div
9+
class="container"
10+
v-show="showExample"
11+
>
12+
13+
<div>
14+
<div class="resizable ui-widget-content keep-alive">
15+
<select v-model="component">
16+
<option>dummy</option>
17+
<option>counter</option>
18+
</select>
19+
<keep-alive>
20+
<component :is="component"></component>
21+
</keep-alive>
22+
</div>
23+
</div>
424

5-
<div class="container" v-show="showExample">
625
<div>
726
<div>
827
<b>Resize count : {{resizeCount}} </b>
928
</div>
10-
<div class="resizable ui-widget-content" v-resize="onResize">
29+
<div
30+
class="resizable ui-widget-content standard"
31+
v-resize="onResize"
32+
>
1133
<b>Standard</b>
1234
</div>
1335
</div>
@@ -16,7 +38,10 @@
1638
<div>
1739
<b>Resize count : {{resizeThrottleCount}} </b>
1840
</div>
19-
<div class="resizable ui-widget-content throttle" v-resize:throttle.250="onResizeThrottle">
41+
<div
42+
class="resizable ui-widget-content throttle"
43+
v-resize:throttle.250="onResizeThrottle"
44+
>
2045
<b>Throttle</b>
2146
</div>
2247
</div>
@@ -25,40 +50,63 @@
2550
<div>
2651
<b>Resize count : {{resizeDebounceCount}} </b>
2752
</div>
28-
<div class="resizable ui-widget-content debounce" v-resize:debounce="onResizeDebounce">
53+
<div
54+
class="resizable ui-widget-content debounce"
55+
v-resize:debounce="onResizeDebounce"
56+
>
2957
<b>Debounce</b>
3058
</div>
3159
</div>
3260
</div>
3361

34-
<div class="container" v-show="showExample">
62+
<div
63+
class="container"
64+
v-show="showExample"
65+
>
3566
<div>
3667
<div>
3768
<b>Resize count : {{resizeInitialCount}} </b>
3869
</div>
39-
<div class="resizable ui-widget-content throttle" v-resize:throttle.initial.1000="onResizeInitial">
70+
<div
71+
class="resizable ui-widget-content throttle"
72+
v-resize:throttle.initial.1000="onResizeInitial"
73+
>
4074
<b>Initial</b>
4175
</div>
4276
</div>
4377

4478
<div>
4579
<div>
46-
<label>Show: <input type="checkbox" v-model="show" /></label>
80+
<label>Show: <input
81+
type="checkbox"
82+
v-model="show"
83+
/></label>
4784

4885
<b>Resize count : {{resizeShowCount}} </b>
4986
</div>
50-
<div class="resizable ui-widget-content" v-resize="onResizeShow" v-show="show">
87+
<div
88+
class="resizable ui-widget-content"
89+
v-resize="onResizeShow"
90+
v-show="show"
91+
>
5192
<b>Show</b>
5293
</div>
5394
</div>
5495

5596
<div>
5697
<div>
57-
<label>If: <input type="checkbox" v-model="display" /></label>
98+
<label>If: <input
99+
type="checkbox"
100+
v-model="display"
101+
/></label>
58102

59103
<b>Resize count : {{resizeIfCount}} </b>
60104
</div>
61-
<div class="resizable ui-widget-content" v-resize="onResizeIf" v-if="display">
105+
<div
106+
class="resizable ui-widget-content"
107+
v-resize="onResizeIf"
108+
v-if="display"
109+
>
62110
<b>If</b>
63111
</div>
64112
</div>
@@ -69,10 +117,16 @@
69117

70118
<script>
71119
import resize from "../../src/Vueresize";
120+
import dummy from "./dummy";
121+
import counter from "./counter";
72122
import $ from "jquery";
73123
import jquery_ui from "jquery-ui/ui/widgets/resizable.js";
74124
75125
export default {
126+
components: {
127+
dummy,
128+
counter
129+
},
76130
directives: {
77131
resize
78132
},
@@ -81,6 +135,7 @@ export default {
81135
},
82136
data() {
83137
return {
138+
component: "dummy",
84139
resizeCount: 0,
85140
resizeDebounceCount: 0,
86141
resizeThrottleCount: 0,
@@ -108,7 +163,7 @@ export default {
108163
onResizeInitial() {
109164
this.resizeInitialCount++;
110165
},
111-
onResizeIf () {
166+
onResizeIf() {
112167
this.resizeIfCount++;
113168
}
114169
}
@@ -136,16 +191,24 @@ text {
136191
}
137192
138193
.resizable.throttle {
139-
background: blue !important;
194+
background: blue;
140195
}
141196
142197
.resizable.debounce {
143-
background: yellow !important;
198+
background: yellow;
199+
}
200+
201+
.resizable.keep-alive {
202+
background: grey;
203+
}
204+
205+
.resizable.standard {
206+
background: green;
144207
}
145208
146209
.resizable {
147210
overflow: hidden;
148-
background: green !important;
211+
background: green;
149212
height: 200px;
150213
width: 200px;
151214
vertical-align: middle;

‎example/components/counter.vue‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<template>
2+
<div
3+
v-resize.count="onResize"
4+
class="kept"
5+
>
6+
<div>
7+
<b>Resize count : {{resizeCount}} </b>
8+
</div>
9+
<div class="ui-widget-content">
10+
<b>kept alive</b>
11+
</div>
12+
</div>
13+
</template>
14+
<script>
15+
import resize from "../../src/Vueresize";
16+
17+
export default {
18+
directives: {
19+
resize
20+
},
21+
data() {
22+
return {
23+
resizeCount: 0
24+
};
25+
},
26+
methods: {
27+
onResize() {
28+
this.resizeCount++;
29+
}
30+
}
31+
};
32+
</script>
33+
<style>
34+
.kept {
35+
width: 100%;
36+
height: 100%;
37+
}
38+
</style>
39+
40+

‎example/components/dummy.vue‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<template>
2+
<div>
3+
dummy
4+
<div/>
5+
</template>
6+
<script>
7+
export default {
8+
9+
}
10+
</script>
11+

‎src/Vueresize.js‎

Lines changed: 34 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -53,27 +53,39 @@ function createResizeSensor(el, { value, arg, options }) {
5353
return res;
5454
}
5555

56-
export default {
57-
inserted(el, { value, arg, modifiers }) {
58-
if (!value || typeof value !== 'function') {
59-
console.warn('v-resize should received a function as value');
60-
return;
61-
}
62-
const options = getOptions(modifiers);
63-
if (el.offsetParent) {
64-
createResizeSensor(el, { value, arg, options });
65-
return;
66-
}
67-
options.initial = true;
68-
el.__visibility__listener__ = listenToVisible(el, () => createResizeSensor(el, { value, arg, options }));
69-
},
70-
unbind(el) {
71-
if (el.__visibility__listener__) {
72-
el.__visibility__listener__.disconnect();
73-
}
74-
if (!el.resizeSensor) {
75-
return;
76-
}
77-
ResizeSensor.detach(el);
56+
function inserted(el, { value, arg, modifiers }, { context: component }) {
57+
if (!value || typeof value !== 'function') {
58+
console.warn('v-resize should received a function as value');
59+
return;
60+
}
61+
const options = getOptions(modifiers);
62+
if (component && component.$el === el) {
63+
component.$once("hook:deactivated", () => {
64+
unbind(el);
65+
component.$once("hook:activated", () => {
66+
inserted(el, { value, arg, modifiers }, { context: component });
67+
})
68+
})
69+
}
70+
if (el.offsetParent) {
71+
createResizeSensor(el, { value, arg, options });
72+
return;
73+
}
74+
options.initial = true;
75+
el.__visibility__listener__ = listenToVisible(el, () => createResizeSensor(el, { value, arg, options }));
76+
};
77+
78+
function unbind(el) {
79+
if (el.__visibility__listener__) {
80+
el.__visibility__listener__.disconnect();
81+
}
82+
if (!el.resizeSensor) {
83+
return;
7884
}
85+
ResizeSensor.detach(el);
86+
};
87+
88+
export default {
89+
inserted,
90+
unbind
7991
}

0 commit comments

Comments
 (0)