feat: 重构纵向同步滚动

tm-fe · Sep 27, 2019 · 2f8a5d2 · 2f8a5d2
1 parent c7ee240
commit 2f8a5d2
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 84 deletions.
diff --git a/package.json b/package.json
@@ -38,6 +38,7 @@
   "homepage": "https://github.com/tm-fe/FlexTable#readme",
   "dependencies": {
     "lodash.debounce": "^4.0.8",
+    "normalize-wheel": "^1.0.1",
     "vue-checkbox-radio": "^0.6.0"
   },
   "devDependencies": {

diff --git a/src/table.vue b/src/table.vue
@@ -3,6 +3,8 @@
     <div
         class="flex-table-layout"
         @scroll="onTableScrollX"
+        @mousewheel="handleMousewheel"
+        @DOMMouseScroll="handleMousewheel"
     >
         <div class="flex-table" :style="style">
             <table-head
@@ -23,9 +25,8 @@
                 :columns="tableColumns"
                 :data="dataList"
                 :maxHeight="maxHeight"
-                :scroll="handleBodyScroll"
                 :no-data="noData"
-                :hover="bodyScrollOver"
+                :scrollTop="scrollTop"
                 @on-toggle-select="toggleSelect"
             ></table-body>
             <!-- /flex-table-body -->
@@ -57,13 +58,12 @@
             <table-body
                 ref="fixedLeftBody"
                 onlyFixed="left"
-                :scroll="handleFixedLeftBodyScroll"
                 :cal-width="calWidth"
                 :columns="tableColumns"
                 :data="dataList"
                 :maxHeight="maxHeight"
-                :hover="fixedLeftScrollOver"
                 :rowHeight="rowHeight"
+                :scrollTop="scrollTop"
                 @on-toggle-select="toggleSelect"
             ></table-body>
 
@@ -94,13 +94,12 @@
                 <table-body
                     ref="fixedRightBody"
                     onlyFixed="right"
-                    :scroll="handleFixedRightBodyScroll"
                     :cal-width="calWidth"
                     :columns="tableColumns"
                     :data="dataList"
                     :maxHeight="maxHeight"
-                    :hover="fixedRightScrollOver"
                     :rowHeight="rowHeight"
+                    :scrollTop="scrollTop"
                     @on-toggle-select="toggleSelect"
                 ></table-body>
 
@@ -121,13 +120,16 @@
         </slot>
     </div>
     <tableScrollBar
+        v-if="showScrollBar"
         :body-h="bodyH"
         :header-h="headerH"
         :max-height="maxHeight"
         :scroll="handleScrollYScroll"
         :sum="!!sum"
+        :scrollTop="scrollTop"
         ref="scrollYBody"
-        :hover="scrollScrollOver"
+        @mouseenter.native="scrollBarOver"
+        @mouseleave.native="scrollBarLeave"
     ></tableScrollBar>
     <!-- /Y轴固定滚动条 -->
     </div>
@@ -143,6 +145,7 @@ import tableFoot from './tableFoot.vue';
 import tableScrollBar from './tableScrollBar.vue';
 import Spinner from './Spinner.vue';
 import debounce from "lodash.debounce";
+import normalizeWheel from 'normalize-wheel';
 
 import { MIN_WIDTH } from './data';
 
@@ -221,6 +224,7 @@ export default {
             bodyH: 0,
             footH: 54,
             maxHeight: 0,
+            scrollTop: 0,
             shouldEachRenderQueue: false,
             hasFixedLeft: false,
             hasFixedRight: false,
@@ -337,6 +341,13 @@ export default {
         this.$el.removeEventListener('mousemove', this.onColResizeMove);
     },
     methods:{
+        handleMousewheel(event) {
+            const normalized = normalizeWheel(event);
+            if (Math.abs(normalized.spinY) > 0) {
+                event.preventDefault();
+                this.scrollTop += Math.ceil(normalized.pixelY);
+            }
+        },
         doLayout: debounce(function() {
             this.$nextTick(() => {
                 this.resize();
@@ -472,59 +483,20 @@ export default {
                 colResize.minX = this.minWidth - colWidth;
             }
         },
-        handleFixedLeftBodyScroll(e) {
-            if(!this.fixedLeftBodyScrolling) { return; }
-            const scrollTop = e.target.scrollTop;
-            this.$refs.tableBody.$el.scrollTop = scrollTop;
-            if (this.hasFixedRight) {this.$refs.fixedRightBody.$el.scrollTop = scrollTop;}
-            if(this.showScrollBar) this.$refs.scrollYBody.$refs.scrollYBody.scrollTop = scrollTop;
-        },
-        handleFixedRightBodyScroll(e) {
-            if(!this.fixedRightBodyScrolling) { return; }
-            const scrollTop = e.target.scrollTop;
-            this.$refs.tableBody.$el.scrollTop = scrollTop;
-            if (this.hasFixedLeft) {this.$refs.fixedLeftBody.$el.scrollTop = scrollTop;}
-            if(this.showScrollBar) this.$refs.scrollYBody.$refs.scrollYBody.scrollTop = scrollTop;
-        },
         onTableScrollX(event) {
             this.$emit('on-scroll-x', event);
         },
-        handleBodyScroll(e) {
-            if(!this.bodyScrolling) { return; }
-            const scrollTop = e.target.scrollTop;
-            if (this.hasFixedLeft) {this.$refs.fixedLeftBody.$el.scrollTop = scrollTop;}
-            if (this.hasFixedRight) {this.$refs.fixedRightBody.$el.scrollTop = scrollTop;}
-            if(this.showScrollBar) this.$refs.scrollYBody.$refs.scrollYBody.scrollTop = scrollTop;
-        },
         handleScrollYScroll(e) {
             if(!this.scrollYScrolling) { return; }
             const scrollTop = e.target.scrollTop;
-            this.$refs.tableBody.$el.scrollTop = scrollTop;
-            if (this.hasFixedLeft) {this.$refs.fixedLeftBody.$el.scrollTop = scrollTop;}
-            if (this.hasFixedRight) {this.$refs.fixedRightBody.$el.scrollTop = scrollTop;}
-        },
-        resetScrollFlag() {
-            this.bodyScrolling = false;
-            this.fixedLeftBodyScrolling = false;
-            this.fixedRightBodyScrolling = false;
-            this.scrollYScrolling = false;
-        },
-        bodyScrollOver(){
-            this.resetScrollFlag();
-            this.bodyScrolling = true;
-        },
-        fixedLeftScrollOver(){
-            this.resetScrollFlag();
-            this.fixedLeftBodyScrolling = true;
+            this.scrollTop = scrollTop;
         },
-        fixedRightScrollOver(){
-            this.resetScrollFlag();
-            this.fixedRightBodyScrolling = true;
-        },
-        scrollScrollOver(){
-            this.resetScrollFlag();
+        scrollBarOver(){
             this.scrollYScrolling = true;
         },
+        scrollBarLeave(){
+            this.scrollYScrolling = false;
+        },
         onSortChange(item) {
             this.$emit('on-sort-change', item);
         },

diff --git a/src/tableBody.vue b/src/tableBody.vue
@@ -1,8 +1,6 @@
 <template>
     <div
         class="flex-table-body"
-        @scroll="scroll"
-        @mouseenter="hover"
         :class="{'flex-table-fixed-header': maxHeight}"
         :style="style">
         <div class="flex-table-tr" v-if="data.length">
@@ -53,18 +51,6 @@ export default {
         maxHeight: {
             type: Number
         },
-        scroll: {
-            type: Function,
-            default: function() {
-                return noop;
-            }
-        },
-        hover: {
-            type: Function,
-            default: function() {
-                return noop;
-            }
-        },
         onlyFixed: {
             type: String,
             default: ''
@@ -76,6 +62,10 @@ export default {
         rowHeight: {
             type: Object,
             default: () => ({}),
+        },
+        scrollTop: {
+            type: Number,
+            default: 0
         }
     },
     computed: {
@@ -96,10 +86,13 @@ export default {
             return render;
         }
     },
+    watch: {
+        scrollTop(scrollTop) {
+            this.$el.scrollTop = scrollTop;
+        }
+    },
     data(){
-        return {
-
-        };
+        return {};
     },
     methods: {
         toggleSelect(index) {

diff --git a/src/tableScrollBar.vue b/src/tableScrollBar.vue
@@ -1,18 +1,11 @@
 <template>
-    <div
-        class="flex-table-scroll-y"
-        v-if="bodyH > maxHeight"
-    >
-        <div
-            class="flex-table-scroll-y-head"
-            :style="{'height': `${headerH}px`}"
-        ></div>
+    <div class="flex-table-scroll-y">
+        <div class="flex-table-scroll-y-head" :style="{'height': `${headerH}px`}"></div>
         <div
             class="flex-table-scroll-y-body"
             :style="{'height': `${maxHeight}px`}"
             ref="scrollYBody"
             @scroll="scroll"
-            @mouseenter="hover"
         >
             <div :style="{'height': `${bodyH}px`}"></div>
         </div>
@@ -37,15 +30,18 @@ export default {
                 return noop;
             }
         },
-        hover: {
-            type: Function,
-            default: function() {
-                return noop;
-            }
-        },
         sum: {
             type: Boolean
+        },
+        scrollTop: {
+            type: Number,
+            default: 0
+        }
+    },
+    watch: {
+        scrollTop(scrollTop) {
+            this.$refs.scrollYBody.scrollTop = scrollTop;
         }
     }
-}
+};
 </script>
diff --git a/yarn.lock b/yarn.lock
@@ -5210,6 +5210,11 @@ normalize-range@^0.1.2:
   resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
   integrity sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=
 
+normalize-wheel@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/normalize-wheel/-/normalize-wheel-1.0.1.tgz#aec886affdb045070d856447df62ecf86146ec45"
+  integrity sha1-rsiGr/2wRQcNhWRH32Ls+GFG7EU=
+
 npm-bundled@^1.0.1:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/npm-bundled/-/npm-bundled-1.0.6.tgz#e7ba9aadcef962bb61248f91721cd932b3fe6bdd"