1 | import { on, off } from 'element-ui/src/utils/dom';
|
2 | import { renderThumbStyle, BAR_MAP } from './util';
|
3 |
|
4 |
|
5 | export default {
|
6 | name: 'Bar',
|
7 |
|
8 | props: {
|
9 | vertical: Boolean,
|
10 | size: String,
|
11 | move: Number
|
12 | },
|
13 |
|
14 | computed: {
|
15 | bar() {
|
16 | return BAR_MAP[this.vertical ? 'vertical' : 'horizontal'];
|
17 | },
|
18 |
|
19 | wrap() {
|
20 | return this.$parent.wrap;
|
21 | }
|
22 | },
|
23 |
|
24 | render(h) {
|
25 | const { size, move, bar } = this;
|
26 |
|
27 | return (
|
28 | <div
|
29 | class={ ['el-scrollbar__bar', 'is-' + bar.key] }
|
30 | onMousedown={ this.clickTrackHandler } >
|
31 | <div
|
32 | ref="thumb"
|
33 | class="el-scrollbar__thumb"
|
34 | onMousedown={ this.clickThumbHandler }
|
35 | style={ renderThumbStyle({ size, move, bar }) }>
|
36 | </div>
|
37 | </div>
|
38 | );
|
39 | },
|
40 |
|
41 | methods: {
|
42 | clickThumbHandler(e) {
|
43 |
|
44 | if (e.ctrlKey || e.button === 2) {
|
45 | return;
|
46 | }
|
47 | this.startDrag(e);
|
48 | this[this.bar.axis] = (e.currentTarget[this.bar.offset] - (e[this.bar.client] - e.currentTarget.getBoundingClientRect()[this.bar.direction]));
|
49 | },
|
50 |
|
51 | clickTrackHandler(e) {
|
52 | const offset = Math.abs(e.target.getBoundingClientRect()[this.bar.direction] - e[this.bar.client]);
|
53 | const thumbHalf = (this.$refs.thumb[this.bar.offset] / 2);
|
54 | const thumbPositionPercentage = ((offset - thumbHalf) * 100 / this.$el[this.bar.offset]);
|
55 |
|
56 | this.wrap[this.bar.scroll] = (thumbPositionPercentage * this.wrap[this.bar.scrollSize] / 100);
|
57 | },
|
58 |
|
59 | startDrag(e) {
|
60 | e.stopImmediatePropagation();
|
61 | this.cursorDown = true;
|
62 |
|
63 | on(document, 'mousemove', this.mouseMoveDocumentHandler);
|
64 | on(document, 'mouseup', this.mouseUpDocumentHandler);
|
65 | document.onselectstart = () => false;
|
66 | },
|
67 |
|
68 | mouseMoveDocumentHandler(e) {
|
69 | if (this.cursorDown === false) return;
|
70 | const prevPage = this[this.bar.axis];
|
71 |
|
72 | if (!prevPage) return;
|
73 |
|
74 | const offset = ((this.$el.getBoundingClientRect()[this.bar.direction] - e[this.bar.client]) * -1);
|
75 | const thumbClickPosition = (this.$refs.thumb[this.bar.offset] - prevPage);
|
76 | const thumbPositionPercentage = ((offset - thumbClickPosition) * 100 / this.$el[this.bar.offset]);
|
77 |
|
78 | this.wrap[this.bar.scroll] = (thumbPositionPercentage * this.wrap[this.bar.scrollSize] / 100);
|
79 | },
|
80 |
|
81 | mouseUpDocumentHandler(e) {
|
82 | this.cursorDown = false;
|
83 | this[this.bar.axis] = 0;
|
84 | off(document, 'mousemove', this.mouseMoveDocumentHandler);
|
85 | document.onselectstart = null;
|
86 | }
|
87 | },
|
88 |
|
89 | destroyed() {
|
90 | off(document, 'mouseup', this.mouseUpDocumentHandler);
|
91 | }
|
92 | };
|