7fa943eb
 梁灏
init
|
1
2
3
4
5
6
7
|
<template>
<div>
<div :class="classes" :style="styles">
<slot></slot>
</div>
</div>
</template>
|
|
7fa943eb
梁灏
init
|
8
|
<script>
|
|
2919aa36
梁灏
update Affix & Ba...
|
9
|
import { on, off } from '../../utils/dom';
|
|
7fa943eb
梁灏
init
|
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
|
const prefixCls = 'ivu-affix';
function getScroll(target, top) {
const prop = top ? 'pageYOffset' : 'pageXOffset';
const method = top ? 'scrollTop' : 'scrollLeft';
let ret = target[prop];
if (typeof ret !== 'number') {
ret = window.document.documentElement[method];
}
return ret;
}
function getOffset(element) {
const rect = element.getBoundingClientRect();
const scrollTop = getScroll(window, true);
const scrollLeft = getScroll(window);
const docEl = window.document.body;
const clientTop = docEl.clientTop || 0;
const clientLeft = docEl.clientLeft || 0;
return {
top: rect.top + scrollTop - clientTop,
left: rect.left + scrollLeft - clientLeft
|
b0893113
jingsam
 add eslint
|
38
|
};
|
|
7fa943eb
梁灏
init
|
39
40
41
|
}
export default {
|
|
06322514
梁灏
support Radio
|
42
|
name: 'Affix',
|
|
7fa943eb
梁灏
init
|
43
44
45
46
47
48
49
50
51
52
53
54
55
|
props: {
offsetTop: {
type: Number,
default: 0
},
offsetBottom: {
type: Number
}
},
data () {
return {
affix: false,
styles: {}
|
|
b0893113
jingsam
add eslint
|
56
|
};
|
|
7fa943eb
梁灏
init
|
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
|
},
computed: {
offsetType () {
let type = 'top';
if (this.offsetBottom >= 0) {
type = 'bottom';
}
return type;
},
classes () {
return [
{
[`${prefixCls}`]: this.affix
}
|
|
b0893113
jingsam
add eslint
|
72
|
];
|
|
7fa943eb
梁灏
init
|
73
74
|
}
},
|
|
fcf37f49
梁灏
update webpack & ...
|
75
|
mounted () {
|
|
2919aa36
梁灏
update Affix & Ba...
|
76
77
78
79
|
// window.addEventListener('scroll', this.handleScroll, false);
// window.addEventListener('resize', this.handleScroll, false);
on(window, 'scroll', this.handleScroll);
on(window, 'resize', this.handleScroll);
|
|
7fa943eb
梁灏
init
|
80
81
|
},
beforeDestroy () {
|
|
2919aa36
梁灏
update Affix & Ba...
|
82
83
84
85
|
// window.removeEventListener('scroll', this.handleScroll, false);
// window.removeEventListener('resize', this.handleScroll, false);
off(window, 'scroll', this.handleScroll);
off(window, 'resize', this.handleScroll);
|
|
7fa943eb
梁灏
init
|
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
|
},
methods: {
handleScroll () {
const affix = this.affix;
const scrollTop = getScroll(window, true);
const elOffset = getOffset(this.$el);
const windowHeight = window.innerHeight;
const elHeight = this.$el.getElementsByTagName('div')[0].offsetHeight;
// Fixed Top
if ((elOffset.top - this.offsetTop) < scrollTop && this.offsetType == 'top' && !affix) {
this.affix = true;
this.styles = {
top: `${this.offsetTop}px`,
left: `${elOffset.left}px`,
width: `${this.$el.offsetWidth}px`
};
this.$emit('on-change', true);
} else if ((elOffset.top - this.offsetTop) > scrollTop && this.offsetType == 'top' && affix) {
this.affix = false;
this.styles = null;
this.$emit('on-change', false);
}
// Fixed Bottom
if ((elOffset.top + this.offsetBottom + elHeight) > (scrollTop + windowHeight) && this.offsetType == 'bottom' && !affix) {
this.affix = true;
this.styles = {
bottom: `${this.offsetBottom}px`,
left: `${elOffset.left}px`,
width: `${this.$el.offsetWidth}px`
};
this.$emit('on-change', true);
} else if ((elOffset.top + this.offsetBottom + elHeight) < (scrollTop + windowHeight) && this.offsetType == 'bottom' && affix) {
this.affix = false;
this.styles = null;
|
|
b0893113
jingsam
add eslint
|
125
|
|
|
7fa943eb
梁灏
init
|
126
127
128
129
|
this.$emit('on-change', false);
}
}
}
|
|
b0893113
jingsam
add eslint
|
130
|
};
|
|
7fa943eb
梁灏
init
|
131
|
</script>
|
