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