|
1 | 1 | /*! |
2 | | - * vue-virtual-scroll-list v2.1.5 |
| 2 | + * vue-virtual-scroll-list v2.1.6 |
3 | 3 | * open source under the MIT license |
4 | 4 | * https://github.com/tangbc/vue-virtual-scroll-list#readme |
5 | 5 | */ |
|
386 | 386 | type: Number, |
387 | 387 | "default": 50 |
388 | 388 | }, |
389 | | - rootTag: { |
390 | | - type: String, |
391 | | - "default": 'div' |
392 | | - }, |
393 | | - wrapTag: { |
394 | | - type: String, |
395 | | - "default": 'div' |
396 | | - }, |
397 | | - wrapClass: { |
398 | | - type: String, |
399 | | - "default": '' |
400 | | - }, |
401 | 389 | direction: { |
402 | 390 | type: String, |
403 | 391 | "default": 'vertical' // the other value is horizontal |
404 | 392 |
|
405 | 393 | }, |
406 | | - topThreshold: { |
| 394 | + start: { |
407 | 395 | type: Number, |
408 | 396 | "default": 0 |
409 | 397 | }, |
410 | | - bottomThreshold: { |
| 398 | + offset: { |
411 | 399 | type: Number, |
412 | 400 | "default": 0 |
413 | 401 | }, |
414 | | - start: { |
| 402 | + topThreshold: { |
415 | 403 | type: Number, |
416 | 404 | "default": 0 |
417 | 405 | }, |
418 | | - offset: { |
| 406 | + bottomThreshold: { |
419 | 407 | type: Number, |
420 | 408 | "default": 0 |
421 | 409 | }, |
| 410 | + rootTag: { |
| 411 | + type: String, |
| 412 | + "default": 'div' |
| 413 | + }, |
| 414 | + wrapTag: { |
| 415 | + type: String, |
| 416 | + "default": 'div' |
| 417 | + }, |
| 418 | + wrapClass: { |
| 419 | + type: String, |
| 420 | + "default": '' |
| 421 | + }, |
| 422 | + wrapStyle: { |
| 423 | + type: Object |
| 424 | + }, |
422 | 425 | itemTag: { |
423 | 426 | type: String, |
424 | 427 | "default": 'div' |
|
430 | 433 | itemClassAdd: { |
431 | 434 | type: Function |
432 | 435 | }, |
| 436 | + itemStyle: { |
| 437 | + type: Object |
| 438 | + }, |
433 | 439 | headerTag: { |
434 | 440 | type: String, |
435 | 441 | "default": 'div' |
|
438 | 444 | type: String, |
439 | 445 | "default": '' |
440 | 446 | }, |
| 447 | + headerStyle: { |
| 448 | + type: Object |
| 449 | + }, |
441 | 450 | footerTag: { |
442 | 451 | type: String, |
443 | 452 | "default": 'div' |
444 | 453 | }, |
445 | 454 | footerClass: { |
446 | 455 | type: String, |
447 | 456 | "default": '' |
| 457 | + }, |
| 458 | + footerStyle: { |
| 459 | + type: Object |
448 | 460 | } |
449 | 461 | }; |
450 | 462 | var ItemProps = { |
|
539 | 551 | extraProps.source = this.source; |
540 | 552 | extraProps.index = index; |
541 | 553 | return h(tag, { |
542 | | - role: 'item' |
| 554 | + attrs: { |
| 555 | + role: 'item' |
| 556 | + } |
543 | 557 | }, [h(component, { |
544 | 558 | props: extraProps |
545 | 559 | })]); |
|
760 | 774 | dataKey = this.dataKey, |
761 | 775 | itemClass = this.itemClass, |
762 | 776 | itemTag = this.itemTag, |
| 777 | + itemStyle = this.itemStyle, |
763 | 778 | isHorizontal = this.isHorizontal, |
764 | 779 | extraProps = this.extraProps, |
765 | 780 | dataComponent = this.dataComponent; |
|
780 | 795 | extraProps: extraProps, |
781 | 796 | component: dataComponent |
782 | 797 | }, |
783 | | - "class": "".concat(itemClass, " ").concat(this.itemClassAdd ? this.itemClassAdd(index) : '') |
| 798 | + style: itemStyle, |
| 799 | + "class": "".concat(itemClass).concat(this.itemClassAdd ? ' ' + this.itemClassAdd(index) : '') |
784 | 800 | })); |
785 | 801 | } else { |
786 | 802 | console.warn("Cannot get the data-key '".concat(dataKey, "' from data-sources.")); |
|
802 | 818 | var _this$range2 = this.range, |
803 | 819 | padFront = _this$range2.padFront, |
804 | 820 | padBehind = _this$range2.padBehind; |
805 | | - var rootTag = this.rootTag, |
806 | | - headerClass = this.headerClass, |
807 | | - headerTag = this.headerTag, |
| 821 | + var isHorizontal = this.isHorizontal, |
| 822 | + rootTag = this.rootTag, |
808 | 823 | wrapTag = this.wrapTag, |
809 | 824 | wrapClass = this.wrapClass, |
810 | | - footerClass = this.footerClass, |
| 825 | + wrapStyle = this.wrapStyle, |
| 826 | + headerTag = this.headerTag, |
| 827 | + headerClass = this.headerClass, |
| 828 | + headerStyle = this.headerStyle, |
811 | 829 | footerTag = this.footerTag, |
812 | | - isHorizontal = this.isHorizontal; |
813 | | - var padding = isHorizontal ? "0px ".concat(padBehind, "px 0px ").concat(padFront, "px") : "".concat(padFront, "px 0px ").concat(padBehind, "px"); |
| 830 | + footerClass = this.footerClass, |
| 831 | + footerStyle = this.footerStyle; |
| 832 | + var paddingStyle = { |
| 833 | + padding: isHorizontal ? "0px ".concat(padBehind, "px 0px ").concat(padFront, "px") : "".concat(padFront, "px 0px ").concat(padBehind, "px") |
| 834 | + }; |
| 835 | + var wrapperStyle = wrapStyle ? Object.assign({}, wrapStyle, paddingStyle) : paddingStyle; |
814 | 836 | return h(rootTag, { |
815 | 837 | ref: 'root', |
816 | 838 | on: { |
|
819 | 841 | }, [// header slot |
820 | 842 | header ? h(Slot, { |
821 | 843 | "class": headerClass, |
| 844 | + style: headerStyle, |
822 | 845 | props: { |
823 | 846 | tag: headerTag, |
824 | 847 | event: EVENT_TYPE.SLOT, |
|
830 | 853 | attrs: { |
831 | 854 | role: 'group' |
832 | 855 | }, |
833 | | - style: { |
834 | | - padding: padding |
835 | | - } |
| 856 | + style: wrapperStyle |
836 | 857 | }, this.getRenderSlots(h)), // footer slot |
837 | 858 | footer ? h(Slot, { |
838 | 859 | "class": footerClass, |
| 860 | + style: footerStyle, |
839 | 861 | props: { |
840 | 862 | tag: footerTag, |
841 | 863 | event: EVENT_TYPE.SLOT, |
|
0 commit comments