1 | module.exports =
|
2 | (function(modules) {
|
3 |
|
4 | var installedModules = {};
|
5 |
|
6 |
|
7 | function __webpack_require__(moduleId) {
|
8 |
|
9 |
|
10 | if(installedModules[moduleId]) {
|
11 | return installedModules[moduleId].exports;
|
12 | }
|
13 |
|
14 | var module = installedModules[moduleId] = {
|
15 | i: moduleId,
|
16 | l: false,
|
17 | exports: {}
|
18 | };
|
19 |
|
20 |
|
21 | modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
|
22 |
|
23 |
|
24 | module.l = true;
|
25 |
|
26 |
|
27 | return module.exports;
|
28 | }
|
29 |
|
30 |
|
31 |
|
32 | __webpack_require__.m = modules;
|
33 |
|
34 |
|
35 | __webpack_require__.c = installedModules;
|
36 |
|
37 |
|
38 | __webpack_require__.d = function(exports, name, getter) {
|
39 | if(!__webpack_require__.o(exports, name)) {
|
40 | Object.defineProperty(exports, name, { enumerable: true, get: getter });
|
41 | }
|
42 | };
|
43 |
|
44 |
|
45 | __webpack_require__.r = function(exports) {
|
46 | if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
|
47 | Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
48 | }
|
49 | Object.defineProperty(exports, '__esModule', { value: true });
|
50 | };
|
51 |
|
52 |
|
53 |
|
54 |
|
55 |
|
56 |
|
57 | __webpack_require__.t = function(value, mode) {
|
58 | if(mode & 1) value = __webpack_require__(value);
|
59 | if(mode & 8) return value;
|
60 | if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
|
61 | var ns = Object.create(null);
|
62 | __webpack_require__.r(ns);
|
63 | Object.defineProperty(ns, 'default', { enumerable: true, value: value });
|
64 | if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
|
65 | return ns;
|
66 | };
|
67 |
|
68 |
|
69 | __webpack_require__.n = function(module) {
|
70 | var getter = module && module.__esModule ?
|
71 | function getDefault() { return module['default']; } :
|
72 | function getModuleExports() { return module; };
|
73 | __webpack_require__.d(getter, 'a', getter);
|
74 | return getter;
|
75 | };
|
76 |
|
77 |
|
78 | __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
|
79 |
|
80 |
|
81 | __webpack_require__.p = "/dist/";
|
82 |
|
83 |
|
84 |
|
85 | return __webpack_require__(__webpack_require__.s = 131);
|
86 | })
|
87 |
|
88 | ({
|
89 |
|
90 | 131:
|
91 | (function(module, __webpack_exports__, __webpack_require__) {
|
92 |
|
93 | "use strict";
|
94 | __webpack_require__.r(__webpack_exports__);
|
95 |
|
96 |
|
97 | var resize_event_ = __webpack_require__(16);
|
98 |
|
99 |
|
100 | var scrollbar_width_ = __webpack_require__(38);
|
101 | var scrollbar_width_default = __webpack_require__.n(scrollbar_width_);
|
102 |
|
103 |
|
104 | var util_ = __webpack_require__(3);
|
105 |
|
106 |
|
107 | var dom_ = __webpack_require__(2);
|
108 |
|
109 |
|
110 | var BAR_MAP = {
|
111 | vertical: {
|
112 | offset: 'offsetHeight',
|
113 | scroll: 'scrollTop',
|
114 | scrollSize: 'scrollHeight',
|
115 | size: 'height',
|
116 | key: 'vertical',
|
117 | axis: 'Y',
|
118 | client: 'clientY',
|
119 | direction: 'top'
|
120 | },
|
121 | horizontal: {
|
122 | offset: 'offsetWidth',
|
123 | scroll: 'scrollLeft',
|
124 | scrollSize: 'scrollWidth',
|
125 | size: 'width',
|
126 | key: 'horizontal',
|
127 | axis: 'X',
|
128 | client: 'clientX',
|
129 | direction: 'left'
|
130 | }
|
131 | };
|
132 |
|
133 | function renderThumbStyle(_ref) {
|
134 | var move = _ref.move,
|
135 | size = _ref.size,
|
136 | bar = _ref.bar;
|
137 |
|
138 | var style = {};
|
139 | var translate = 'translate' + bar.axis + '(' + move + '%)';
|
140 |
|
141 | style[bar.size] = size;
|
142 | style.transform = translate;
|
143 | style.msTransform = translate;
|
144 | style.webkitTransform = translate;
|
145 |
|
146 | return style;
|
147 | };
|
148 |
|
149 |
|
150 |
|
151 |
|
152 |
|
153 | var src_bar = ({
|
154 | name: 'Bar',
|
155 |
|
156 | props: {
|
157 | vertical: Boolean,
|
158 | size: String,
|
159 | move: Number
|
160 | },
|
161 |
|
162 | computed: {
|
163 | bar: function bar() {
|
164 | return BAR_MAP[this.vertical ? 'vertical' : 'horizontal'];
|
165 | },
|
166 | wrap: function wrap() {
|
167 | return this.$parent.wrap;
|
168 | }
|
169 | },
|
170 |
|
171 | render: function render(h) {
|
172 | var size = this.size,
|
173 | move = this.move,
|
174 | bar = this.bar;
|
175 |
|
176 |
|
177 | return h(
|
178 | 'div',
|
179 | {
|
180 | 'class': ['el-scrollbar__bar', 'is-' + bar.key],
|
181 | on: {
|
182 | 'mousedown': this.clickTrackHandler
|
183 | }
|
184 | },
|
185 | [h('div', {
|
186 | ref: 'thumb',
|
187 | 'class': 'el-scrollbar__thumb',
|
188 | on: {
|
189 | 'mousedown': this.clickThumbHandler
|
190 | },
|
191 |
|
192 | style: renderThumbStyle({ size: size, move: move, bar: bar }) })]
|
193 | );
|
194 | },
|
195 |
|
196 |
|
197 | methods: {
|
198 | clickThumbHandler: function clickThumbHandler(e) {
|
199 |
|
200 | if (e.ctrlKey || e.button === 2) {
|
201 | return;
|
202 | }
|
203 | this.startDrag(e);
|
204 | this[this.bar.axis] = e.currentTarget[this.bar.offset] - (e[this.bar.client] - e.currentTarget.getBoundingClientRect()[this.bar.direction]);
|
205 | },
|
206 | clickTrackHandler: function clickTrackHandler(e) {
|
207 | var offset = Math.abs(e.target.getBoundingClientRect()[this.bar.direction] - e[this.bar.client]);
|
208 | var thumbHalf = this.$refs.thumb[this.bar.offset] / 2;
|
209 | var thumbPositionPercentage = (offset - thumbHalf) * 100 / this.$el[this.bar.offset];
|
210 |
|
211 | this.wrap[this.bar.scroll] = thumbPositionPercentage * this.wrap[this.bar.scrollSize] / 100;
|
212 | },
|
213 | startDrag: function startDrag(e) {
|
214 | e.stopImmediatePropagation();
|
215 | this.cursorDown = true;
|
216 |
|
217 | Object(dom_["on"])(document, 'mousemove', this.mouseMoveDocumentHandler);
|
218 | Object(dom_["on"])(document, 'mouseup', this.mouseUpDocumentHandler);
|
219 | document.onselectstart = function () {
|
220 | return false;
|
221 | };
|
222 | },
|
223 | mouseMoveDocumentHandler: function mouseMoveDocumentHandler(e) {
|
224 | if (this.cursorDown === false) return;
|
225 | var prevPage = this[this.bar.axis];
|
226 |
|
227 | if (!prevPage) return;
|
228 |
|
229 | var offset = (this.$el.getBoundingClientRect()[this.bar.direction] - e[this.bar.client]) * -1;
|
230 | var thumbClickPosition = this.$refs.thumb[this.bar.offset] - prevPage;
|
231 | var thumbPositionPercentage = (offset - thumbClickPosition) * 100 / this.$el[this.bar.offset];
|
232 |
|
233 | this.wrap[this.bar.scroll] = thumbPositionPercentage * this.wrap[this.bar.scrollSize] / 100;
|
234 | },
|
235 | mouseUpDocumentHandler: function mouseUpDocumentHandler(e) {
|
236 | this.cursorDown = false;
|
237 | this[this.bar.axis] = 0;
|
238 | Object(dom_["off"])(document, 'mousemove', this.mouseMoveDocumentHandler);
|
239 | document.onselectstart = null;
|
240 | }
|
241 | },
|
242 |
|
243 | destroyed: function destroyed() {
|
244 | Object(dom_["off"])(document, 'mouseup', this.mouseUpDocumentHandler);
|
245 | }
|
246 | });
|
247 |
|
248 |
|
249 |
|
250 |
|
251 |
|
252 |
|
253 |
|
254 |
|
255 |
|
256 | var main = ({
|
257 | name: 'ElScrollbar',
|
258 |
|
259 | components: { Bar: src_bar },
|
260 |
|
261 | props: {
|
262 | native: Boolean,
|
263 | wrapStyle: {},
|
264 | wrapClass: {},
|
265 | viewClass: {},
|
266 | viewStyle: {},
|
267 | noresize: Boolean,
|
268 | tag: {
|
269 | type: String,
|
270 | default: 'div'
|
271 | }
|
272 | },
|
273 |
|
274 | data: function data() {
|
275 | return {
|
276 | sizeWidth: '0',
|
277 | sizeHeight: '0',
|
278 | moveX: 0,
|
279 | moveY: 0
|
280 | };
|
281 | },
|
282 |
|
283 |
|
284 | computed: {
|
285 | wrap: function wrap() {
|
286 | return this.$refs.wrap;
|
287 | }
|
288 | },
|
289 |
|
290 | render: function render(h) {
|
291 | var gutter = scrollbar_width_default()();
|
292 | var style = this.wrapStyle;
|
293 |
|
294 | if (gutter) {
|
295 | var gutterWith = '-' + gutter + 'px';
|
296 | var gutterStyle = 'margin-bottom: ' + gutterWith + '; margin-right: ' + gutterWith + ';';
|
297 |
|
298 | if (Array.isArray(this.wrapStyle)) {
|
299 | style = Object(util_["toObject"])(this.wrapStyle);
|
300 | style.marginRight = style.marginBottom = gutterWith;
|
301 | } else if (typeof this.wrapStyle === 'string') {
|
302 | style += gutterStyle;
|
303 | } else {
|
304 | style = gutterStyle;
|
305 | }
|
306 | }
|
307 | var view = h(this.tag, {
|
308 | class: ['el-scrollbar__view', this.viewClass],
|
309 | style: this.viewStyle,
|
310 | ref: 'resize'
|
311 | }, this.$slots.default);
|
312 | var wrap = h(
|
313 | 'div',
|
314 | {
|
315 | ref: 'wrap',
|
316 | style: style,
|
317 | on: {
|
318 | 'scroll': this.handleScroll
|
319 | },
|
320 |
|
321 | 'class': [this.wrapClass, 'el-scrollbar__wrap', gutter ? '' : 'el-scrollbar__wrap--hidden-default'] },
|
322 | [[view]]
|
323 | );
|
324 | var nodes = void 0;
|
325 |
|
326 | if (!this.native) {
|
327 | nodes = [wrap, h(src_bar, {
|
328 | attrs: {
|
329 | move: this.moveX,
|
330 | size: this.sizeWidth }
|
331 | }), h(src_bar, {
|
332 | attrs: {
|
333 | vertical: true,
|
334 | move: this.moveY,
|
335 | size: this.sizeHeight }
|
336 | })];
|
337 | } else {
|
338 | nodes = [h(
|
339 | 'div',
|
340 | {
|
341 | ref: 'wrap',
|
342 | 'class': [this.wrapClass, 'el-scrollbar__wrap'],
|
343 | style: style },
|
344 | [[view]]
|
345 | )];
|
346 | }
|
347 | return h('div', { class: 'el-scrollbar' }, nodes);
|
348 | },
|
349 |
|
350 |
|
351 | methods: {
|
352 | handleScroll: function handleScroll() {
|
353 | var wrap = this.wrap;
|
354 |
|
355 | this.moveY = wrap.scrollTop * 100 / wrap.clientHeight;
|
356 | this.moveX = wrap.scrollLeft * 100 / wrap.clientWidth;
|
357 | },
|
358 | update: function update() {
|
359 | var heightPercentage = void 0,
|
360 | widthPercentage = void 0;
|
361 | var wrap = this.wrap;
|
362 | if (!wrap) return;
|
363 |
|
364 | heightPercentage = wrap.clientHeight * 100 / wrap.scrollHeight;
|
365 | widthPercentage = wrap.clientWidth * 100 / wrap.scrollWidth;
|
366 |
|
367 | this.sizeHeight = heightPercentage < 100 ? heightPercentage + '%' : '';
|
368 | this.sizeWidth = widthPercentage < 100 ? widthPercentage + '%' : '';
|
369 | }
|
370 | },
|
371 |
|
372 | mounted: function mounted() {
|
373 | if (this.native) return;
|
374 | this.$nextTick(this.update);
|
375 | !this.noresize && Object(resize_event_["addResizeListener"])(this.$refs.resize, this.update);
|
376 | },
|
377 | beforeDestroy: function beforeDestroy() {
|
378 | if (this.native) return;
|
379 | !this.noresize && Object(resize_event_["removeResizeListener"])(this.$refs.resize, this.update);
|
380 | }
|
381 | });
|
382 |
|
383 |
|
384 |
|
385 |
|
386 | main.install = function (Vue) {
|
387 | Vue.component(main.name, main);
|
388 | };
|
389 |
|
390 | var scrollbar = __webpack_exports__["default"] = (main);
|
391 |
|
392 | }),
|
393 |
|
394 | 16:
|
395 | (function(module, exports) {
|
396 |
|
397 | module.exports = require("element-ui/lib/utils/resize-event");
|
398 |
|
399 | }),
|
400 |
|
401 | 2:
|
402 | (function(module, exports) {
|
403 |
|
404 | module.exports = require("element-ui/lib/utils/dom");
|
405 |
|
406 | }),
|
407 |
|
408 | 3:
|
409 | (function(module, exports) {
|
410 |
|
411 | module.exports = require("element-ui/lib/utils/util");
|
412 |
|
413 | }),
|
414 |
|
415 | 38:
|
416 | (function(module, exports) {
|
417 |
|
418 | module.exports = require("element-ui/lib/utils/scrollbar-width");
|
419 |
|
420 | })
|
421 |
|
422 | }); |
\ | No newline at end of file |