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 {
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,

View File

@ -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 = `
<li class="tr">
${thead
.map((name, i) => {
let w = flex[i]
if (typeof w === 'number') {
w = ` flex-${w || 1}"`
} else {
w = `" style="${w}"`
}
return `
<section class="td${w}>
<div class="cell">${name}</div>
</section>`
})
.join('')}
</li>`
this.__THEAD__.innerHTML = thead
.map((name, i) => {
let w = flex[i]
if (typeof w === 'number') {
w = `flex="${w}"`
} else {
w = `style="${w}"`
}
return `<wc-td align="center" ${w}>${name}</wc-td>`
})
.join('')
}
}
@ -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() {

View File

@ -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
}

View File

@ -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: ''
}