优化滚动组件;简化表格组件
parent
16cca96cd3
commit
f6cb2d8e76
|
@ -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,
|
||||
|
|
|
@ -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() {
|
||||
|
|
|
@ -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
|
||||
}
|
||||
|
|
|
@ -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: ''
|
||||
}
|
||||
|
|
Reference in New Issue