优化滚动组件;简化表格组件

src/scroll/index.wc

@@ -107,6 +107,8 @@ const IS_FF = !!window.sidebar
 /*  */
 export default class Scroll {
   props = {
+    thumbX: 0,
+    thumbY: 0,
     disabled: false,
     axis: 'xy' // 滚动方向, 默认x轴和y轴都可以滚动
   }
@@ -253,7 +255,7 @@ export default class Scroll {
       if (!xw && !yh) {
         return
       }
-      ev.preventDefault()
+      // ev.preventDefault()
 
       //校正兼容苹果鼠标在 chrome和FF下滚动的精度
       var deltaX
@@ -283,8 +285,12 @@ export default class Scroll {
           // 修正滚动条的位置
           // 滚动比例 y 滚动条的可移动距离
           var fixedY = (this.__BOX__.scrollTop / (sh - oh)) * (oh - yh)
+          fixedY = fixedY >> 0
           this.props.thumbY = fixedY
-
+          if (fixedY === 0 || oh - yh === fixedY) {
+            return
+          }
+          ev.preventDefault()
           this.__Y__.style.transform = `translateY(${fixedY}px)`
         }
       }
@@ -296,11 +302,21 @@ export default class Scroll {
           // 修正滚动条的位置
           // 滚动比例 x 滚动条的可移动距离
           var fixedX = (this.__BOX__.scrollLeft / (sw - ow)) * (ow - xw)
+          fixedX = fixedX >> 0
           this.props.thumbX = fixedX
-
+          if (fixedX === 0 || ow - xw === fixedX) {
+            return
+          }
+          ev.preventDefault()
           this.__X__.style.transform = `translateX(${fixedX}px)`
         }
       }
+
+      this.dispatchEvent(
+        new CustomEvent('scroll', {
+          detail: { x: this.props.thumbX, y: this.props.thumbY }
+        })
+      )
     })
 
     var startX,

src/table/index.wc

@@ -1,8 +1,8 @@
 <template>
   <div class="table">
-    <ul class="thead"></ul>
+    <wc-tr class="thead"></wc-tr>
     <wc-scroll class="tbody"><slot /></wc-scroll>
-    <ul class="tfoot"></ul>
+    <wc-tr class="tfoot"></wc-tr>
   </div>
 </template>
 
@@ -12,10 +12,6 @@
   width: 100%;
   color: nth($cd, 1);
 }
-ul,
-li {
-  list-style: none;
-}
 .table {
   overflow: hidden;
   flex: 1;
@@ -30,60 +26,11 @@ li {
     user-select: none;
     -moz-user-select: none;
   }
-
-  .tr {
-    display: flex;
-    height: 100%;
-  }
-  .td {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    min-height: 36px;
-    border-right: 1px solid nth($cp, 3);
-    border-bottom: 1px solid nth($cp, 3);
-
-    &.flex-2 {
-      flex: 2;
-    }
-    &.flex-3 {
-      flex: 3;
-    }
-    &.flex-4 {
-      flex: 4;
-    }
-    &.flex-5 {
-      flex: 5;
-    }
-    &.flex-6 {
-      flex: 6;
-    }
-    &.flex-7 {
-      flex: 7;
-    }
-    &.flex-8 {
-      flex: 8;
-    }
-
-    &:last-child {
-      border-right: 0;
-    }
-  }
-
-  .thead .td {
-    justify-content: center;
-    text-align: center;
-  }
-
-  .cell {
-    padding: 3px 5px;
-    word-wrap: break-word;
-    word-break: break-all;
-  }
 }
 </style>
 
 <script>
+import $ from '../utils'
 import '../scroll/index'
 import './tr'
 import './td'
@@ -106,23 +53,17 @@ export default class Table {
     var { thead, flex } = this.props
 
     if (thead) {
-      this.__THEAD__.innerHTML = `
+      this.__THEAD__.innerHTML = thead
-        <li class="tr">
-          ${thead
         .map((name, i) => {
           let w = flex[i]
           if (typeof w === 'number') {
-                w = ` flex-${w || 1}"`
+            w = `flex="${w}"`
           } else {
-                w = `" style="${w}"`
+            w = `style="${w}"`
           }
-              return `
+          return `<wc-td align="center" ${w}>${name}</wc-td>`
-              <section class="td${w}>
-                <div class="cell">${name}</div>
-              </section>`
         })
-            .join('')}
+        .join('')
-        </li>`
     }
   }
 
@@ -134,7 +75,10 @@ export default class Table {
       return style || flex
     })
     this.props.flex = tds
-    log(tds)
+
+    $.bind(this.__TBODY__, 'scroll', ev => {
+      this.__THEAD__.scrollLeft = ev.detail.x
+    })
   }
 
   watch() {

src/table/td.wc

@@ -7,6 +7,7 @@
   flex: 1;
   display: flex;
   align-items: center;
+  min-width: 60px;
   min-height: 36px;
   border-right: 1px solid nth($cp, 3);
   border-bottom: 1px solid nth($cp, 3);
@@ -32,6 +33,13 @@
 :host([flex='8']) {
   flex: 8;
 }
+:host([align='center']) {
+  justify-content: center;
+}
+:host([align='right']) {
+  justify-content: flex-end;
+}
+
 .cell {
   padding: 3px 5px;
   word-wrap: break-word;
@@ -40,7 +48,7 @@
 </style>
 
 <script>
-export default class TableTd {
+export default class Td {
   props = {
     width: null
   }

src/table/tr.wc

@@ -4,22 +4,20 @@
 
 <style lang="scss">
 :host {
-  // flex: 1;
   display: flex;
-  width: auto;
-  // border-bottom: 1px solid nth($cp, 3);
   color: inherit;
 }
 :host(:hover) {
   background-color: #fbfbfb;
 }
-::slotted(wc-table-td:last-child) {
+
+::slotted(wc-td:last-child) {
   border-right: 0;
 }
 </style>
 
 <script>
-export default class TableTr {
+export default class Tr {
   props = {
     foo: ''
   }