1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
| <template>
| <uni-resize-sensor @animationstart.once="update">
| <div @scroll="update">
| <div />
| </div>
| <div @scroll="update">
| <div />
| </div>
| </uni-resize-sensor>
| </template>
| <script>
| const MAX = 100000
|
| export default {
| name: 'ResizeSensor',
| props: {
| initial: {
| type: [Boolean, String],
| default: false
| }
| },
| data: function () {
| return {
| size: {
| width: -1,
| height: -1
| }
| }
| },
| watch: {
| size: {
| deep: true,
| handler: function (size) {
| this.$emit('resize', Object.assign({}, size))
| }
| }
| },
| mounted: function () {
| if (this.initial === true) {
| this.$nextTick(this.update)
| }
|
| if (this.$el.offsetParent !== this.$el.parentNode) {
| this.$el.parentNode.style.position = 'relative'
| }
|
| if (!('AnimationEvent' in window)) {
| this.reset()
| }
| },
| activated () {
| this.reset()
| },
| methods: {
| reset: function () {
| const expand = this.$el.firstChild
| expand.scrollLeft = MAX
| expand.scrollTop = MAX
| const shrink = this.$el.lastChild
| shrink.scrollLeft = MAX
| shrink.scrollTop = MAX
| },
| update: function () {
| this.size.width = this.$el.offsetWidth
| this.size.height = this.$el.offsetHeight
| this.reset()
| }
| }
| }
|
| </script>
|
| <style>
| @keyframes once-show {
| from {
| top: 0;
| }
| }
| uni-resize-sensor,
| uni-resize-sensor > div {
| position: absolute;
| left: 0;
| top: 0;
| right: 0;
| bottom: 0;
| overflow: hidden;
| }
| uni-resize-sensor {
| display: block;
| z-index: -1;
| visibility: hidden;
| animation: once-show 1ms;
| }
| uni-resize-sensor > div > div {
| position: absolute;
| left: 0;
| top: 0;
| }
| uni-resize-sensor > div:first-child > div {
| width: 100000px;
| height: 100000px;
| }
| uni-resize-sensor > div:last-child > div {
| width: 200%;
| height: 200%;
| }
| </style>
|
|
