Skip to content

Commit 6d2029b

Browse files
wangyi7099wangyi7099
committed
tweak: manully add height or width to vuescroll elm when mounted
1 parent 1ec99ec commit 6d2029b

File tree

7 files changed

+128
-19
lines changed

7 files changed

+128
-19
lines changed

‎dist/vuescroll.common.js‎

Lines changed: 31 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3093,7 +3093,9 @@ var vuescroll = {
30933093
internalScrollTop: 0,
30943094
internalScrollLeft: 0,
30953095
refreshStage: 'deactive',
3096-
loadStage: 'deactive'
3096+
loadStage: 'deactive',
3097+
height: '',
3098+
width: ''
30973099
}
30983100
},
30993101
scrollPanel: {},
@@ -3134,8 +3136,8 @@ var vuescroll = {
31343136
var vuescrollData = {
31353137
style: {
31363138
position: 'relative',
3137-
height: '100%',
3138-
width: '100%',
3139+
height: vm.vuescroll.state.height,
3140+
width: vm.vuescroll.state.width,
31393141
padding: 0,
31403142
overflow: 'hidden'
31413143
},
@@ -3348,6 +3350,22 @@ var vuescroll = {
33483350
destroyDomResize();
33493351
};
33503352
},
3353+
registryParentResize: function registryParentResize() {
3354+
this.destroyParentDomResize = listenResize(this.$el.parentNode, this.setVsSize);
3355+
this.setVsSize();
3356+
},
3357+
3358+
// set its size to be equal to its parentNode
3359+
setVsSize: function setVsSize() {
3360+
var parentElm = this.$el.parentNode;
3361+
var position = parentElm.style.position;
3362+
3363+
if (!position || position == 'static') {
3364+
this.$el.parentNode.style.position = 'relative';
3365+
}
3366+
this.vuescroll.state.height = parentElm.clientHeight + 'px';
3367+
this.vuescroll.state.width = parentElm.clientWidth + 'px';
3368+
},
33513369
recordCurrentPos: function recordCurrentPos() {
33523370
var mode = this.mode;
33533371
if (this.mode !== this.lastMode) {
@@ -3395,7 +3413,7 @@ var vuescroll = {
33953413

33963414
this.registryResize();
33973415
this.initWatch();
3398-
3416+
this.registryParentResize();
33993417
this.$nextTick(function () {
34003418
// update state
34013419
_this5.update();
@@ -3411,6 +3429,15 @@ var vuescroll = {
34113429
_this6.showAndDefferedHideBar();
34123430
}
34133431
});
3432+
},
3433+
beforeDestroy: function beforeDestroy() {
3434+
// remove registryed resize
3435+
if (this.destroyParentDomResize) {
3436+
this.destroyParentDomResize();
3437+
}
3438+
if (this.destroyDomResize) {
3439+
this.destroyDomResize();
3440+
}
34143441
}
34153442
};
34163443

‎dist/vuescroll.common.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/vuescroll.esm.js‎

Lines changed: 31 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3089,7 +3089,9 @@ var vuescroll = {
30893089
internalScrollTop: 0,
30903090
internalScrollLeft: 0,
30913091
refreshStage: 'deactive',
3092-
loadStage: 'deactive'
3092+
loadStage: 'deactive',
3093+
height: '',
3094+
width: ''
30933095
}
30943096
},
30953097
scrollPanel: {},
@@ -3130,8 +3132,8 @@ var vuescroll = {
31303132
var vuescrollData = {
31313133
style: {
31323134
position: 'relative',
3133-
height: '100%',
3134-
width: '100%',
3135+
height: vm.vuescroll.state.height,
3136+
width: vm.vuescroll.state.width,
31353137
padding: 0,
31363138
overflow: 'hidden'
31373139
},
@@ -3344,6 +3346,22 @@ var vuescroll = {
33443346
destroyDomResize();
33453347
};
33463348
},
3349+
registryParentResize: function registryParentResize() {
3350+
this.destroyParentDomResize = listenResize(this.$el.parentNode, this.setVsSize);
3351+
this.setVsSize();
3352+
},
3353+
3354+
// set its size to be equal to its parentNode
3355+
setVsSize: function setVsSize() {
3356+
var parentElm = this.$el.parentNode;
3357+
var position = parentElm.style.position;
3358+
3359+
if (!position || position == 'static') {
3360+
this.$el.parentNode.style.position = 'relative';
3361+
}
3362+
this.vuescroll.state.height = parentElm.clientHeight + 'px';
3363+
this.vuescroll.state.width = parentElm.clientWidth + 'px';
3364+
},
33473365
recordCurrentPos: function recordCurrentPos() {
33483366
var mode = this.mode;
33493367
if (this.mode !== this.lastMode) {
@@ -3391,7 +3409,7 @@ var vuescroll = {
33913409

33923410
this.registryResize();
33933411
this.initWatch();
3394-
3412+
this.registryParentResize();
33953413
this.$nextTick(function () {
33963414
// update state
33973415
_this5.update();
@@ -3407,6 +3425,15 @@ var vuescroll = {
34073425
_this6.showAndDefferedHideBar();
34083426
}
34093427
});
3428+
},
3429+
beforeDestroy: function beforeDestroy() {
3430+
// remove registryed resize
3431+
if (this.destroyParentDomResize) {
3432+
this.destroyParentDomResize();
3433+
}
3434+
if (this.destroyDomResize) {
3435+
this.destroyDomResize();
3436+
}
34103437
}
34113438
};
34123439

‎dist/vuescroll.esm.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/vuescroll.js‎

Lines changed: 31 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3095,7 +3095,9 @@ var vuescroll = {
30953095
internalScrollTop: 0,
30963096
internalScrollLeft: 0,
30973097
refreshStage: 'deactive',
3098-
loadStage: 'deactive'
3098+
loadStage: 'deactive',
3099+
height: '',
3100+
width: ''
30993101
}
31003102
},
31013103
scrollPanel: {},
@@ -3136,8 +3138,8 @@ var vuescroll = {
31363138
var vuescrollData = {
31373139
style: {
31383140
position: 'relative',
3139-
height: '100%',
3140-
width: '100%',
3141+
height: vm.vuescroll.state.height,
3142+
width: vm.vuescroll.state.width,
31413143
padding: 0,
31423144
overflow: 'hidden'
31433145
},
@@ -3350,6 +3352,22 @@ var vuescroll = {
33503352
destroyDomResize();
33513353
};
33523354
},
3355+
registryParentResize: function registryParentResize() {
3356+
this.destroyParentDomResize = listenResize(this.$el.parentNode, this.setVsSize);
3357+
this.setVsSize();
3358+
},
3359+
3360+
// set its size to be equal to its parentNode
3361+
setVsSize: function setVsSize() {
3362+
var parentElm = this.$el.parentNode;
3363+
var position = parentElm.style.position;
3364+
3365+
if (!position || position == 'static') {
3366+
this.$el.parentNode.style.position = 'relative';
3367+
}
3368+
this.vuescroll.state.height = parentElm.clientHeight + 'px';
3369+
this.vuescroll.state.width = parentElm.clientWidth + 'px';
3370+
},
33533371
recordCurrentPos: function recordCurrentPos() {
33543372
var mode = this.mode;
33553373
if (this.mode !== this.lastMode) {
@@ -3397,7 +3415,7 @@ var vuescroll = {
33973415

33983416
this.registryResize();
33993417
this.initWatch();
3400-
3418+
this.registryParentResize();
34013419
this.$nextTick(function () {
34023420
// update state
34033421
_this5.update();
@@ -3413,6 +3431,15 @@ var vuescroll = {
34133431
_this6.showAndDefferedHideBar();
34143432
}
34153433
});
3434+
},
3435+
beforeDestroy: function beforeDestroy() {
3436+
// remove registryed resize
3437+
if (this.destroyParentDomResize) {
3438+
this.destroyParentDomResize();
3439+
}
3440+
if (this.destroyDomResize) {
3441+
this.destroyDomResize();
3442+
}
34163443
}
34173444
};
34183445

‎dist/vuescroll.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/vuescroll.js‎

Lines changed: 32 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,9 @@ export default {
5252
internalScrollTop: 0,
5353
internalScrollLeft: 0,
5454
refreshStage: 'deactive',
55-
loadStage: 'deactive'
55+
loadStage: 'deactive',
56+
height: '',
57+
width: ''
5658
}
5759
},
5860
scrollPanel: {},
@@ -93,8 +95,8 @@ export default {
9395
const vuescrollData = {
9496
style: {
9597
position: 'relative',
96-
height: '100%',
97-
width: '100%',
98+
height: vm.vuescroll.state.height,
99+
width: vm.vuescroll.state.width,
98100
padding: 0,
99101
overflow: 'hidden'
100102
},
@@ -323,6 +325,23 @@ export default {
323325
destroyDomResize();
324326
};
325327
},
328+
registryParentResize() {
329+
this.destroyParentDomResize = listenResize(
330+
this.$el.parentNode,
331+
this.setVsSize
332+
);
333+
this.setVsSize();
334+
},
335+
// set its size to be equal to its parentNode
336+
setVsSize() {
337+
const parentElm = this.$el.parentNode;
338+
const { position } = parentElm.style;
339+
if (!position || position == 'static') {
340+
this.$el.parentNode.style.position = 'relative';
341+
}
342+
this.vuescroll.state.height = parentElm.clientHeight + 'px';
343+
this.vuescroll.state.width = parentElm.clientWidth + 'px';
344+
},
326345
recordCurrentPos() {
327346
let mode = this.mode;
328347
if (this.mode !== this.lastMode) {
@@ -374,7 +393,7 @@ export default {
374393

375394
this.registryResize();
376395
this.initWatch();
377-
396+
this.registryParentResize();
378397
this.$nextTick(() => {
379398
// update state
380399
this.update();
@@ -388,5 +407,14 @@ export default {
388407
this.showAndDefferedHideBar();
389408
}
390409
});
410+
},
411+
beforeDestroy() {
412+
// remove registryed resize
413+
if (this.destroyParentDomResize) {
414+
this.destroyParentDomResize();
415+
}
416+
if (this.destroyDomResize) {
417+
this.destroyDomResize();
418+
}
391419
}
392420
};

0 commit comments

Comments
 (0)