This repository has been archived on 2023-08-30. You can view files and clone it, but cannot push or open issues/pull-requests.
bytedo
/
wcui
Archived
1
0
Fork 0

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

old
宇天 2020-05-10 18:31:42 +08:00
parent 16cca96cd3
commit f6cb2d8e76
4 changed files with 49 additions and 83 deletions

View File

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

View File

@ -1,8 +1,8 @@
<template> <template>
<div class="table"> <div class="table">
<ul class="thead"></ul> <wc-tr class="thead"></wc-tr>
<wc-scroll class="tbody"><slot /></wc-scroll> <wc-scroll class="tbody"><slot /></wc-scroll>
<ul class="tfoot"></ul> <wc-tr class="tfoot"></wc-tr>
</div> </div>
</template> </template>
@ -12,10 +12,6 @@
width: 100%; width: 100%;
color: nth($cd, 1); color: nth($cd, 1);
} }
ul,
li {
list-style: none;
}
.table { .table {
overflow: hidden; overflow: hidden;
flex: 1; flex: 1;
@ -30,60 +26,11 @@ li {
user-select: none; user-select: none;
-moz-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> </style>
<script> <script>
import $ from '../utils'
import '../scroll/index' import '../scroll/index'
import './tr' import './tr'
import './td' import './td'
@ -106,23 +53,17 @@ export default class Table {
var { thead, flex } = this.props var { thead, flex } = this.props
if (thead) { if (thead) {
this.__THEAD__.innerHTML = ` this.__THEAD__.innerHTML = thead
<li class="tr">
${thead
.map((name, i) => { .map((name, i) => {
let w = flex[i] let w = flex[i]
if (typeof w === 'number') { if (typeof w === 'number') {
w = ` flex-${w || 1}"` w = `flex="${w}"`
} else { } 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 return style || flex
}) })
this.props.flex = tds this.props.flex = tds
log(tds)
$.bind(this.__TBODY__, 'scroll', ev => {
this.__THEAD__.scrollLeft = ev.detail.x
})
} }
watch() { watch() {

View File

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

View File

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