innov
/
bee-table
1
0
Fork 0
Code Issues Pull Requests 3 Projects Releases Wiki Activity

1px像素问题、拖拽列宽焦点问题

This commit is contained in:
jonyshi 2018-11-26 20:34:43 +08:00
parent 922ab8080d
commit a328e32476
2 changed files with 31 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/Table.scss
View File

@ -290,9 +290,9 @@ $table-move-in-color: $bg-color-base;
} }
th{ th{
background: $table-head-background-color; background: $table-head-background-color;
overflow: hidden; // overflow: hidden;
white-space: nowrap; // white-space: nowrap;
text-overflow: ellipsis; // text-overflow: ellipsis;
.bee-table-column-sorter { .bee-table-column-sorter {
position: relative; position: relative;
margin-left: 4px; margin-left: 4px;
@ -366,15 +366,25 @@ $table-move-in-color: $bg-color-base;
&-drag-gap{ &-drag-gap{
height: 100%; height: 100%;
position: absolute; position: absolute;
right: 0px; right: -10px;
top: 0; top: 0;
// background:transparent; // background:transparent;
// width: 1px; // width: 1px;
background:#ccc; // background:#ccc;
width: 2px; width: 20px;
box-sizing: border-box; box-sizing: border-box;
z-index: 1; z-index: 1;
.online{
height: 100%;
width: 1px;
background:transparent;
margin: 0 auto;
}
.online-hover{
background:#000000;
}
} }
.th-drag-gap{ .th-drag-gap{
background:transparent; background:transparent;
@ -383,6 +393,12 @@ $table-move-in-color: $bg-color-base;
// background: #ccc; // background: #ccc;
cursor: col-resize; cursor: col-resize;
} }
.th-drag-gap>div{
background:transparent;
}
.th-drag-gap-hover>div{
background: #000000
}
// &.th-can-not-drag{ // &.th-can-not-drag{
// .th-drag-gap-hover{ // .th-drag-gap-hover{
// cursor: none; // cursor: none;

9
src/TableHeader.js
View File

@ -102,7 +102,9 @@ class TableHeader extends Component {
//如果是固定列没有拖拽功能 //如果是固定列没有拖拽功能
if (this.border || data.fixed) return; if (this.border || data.fixed) return;
const { clsPrefix } = this.props; const { clsPrefix } = this.props;
if(event.target.id != 'th-online'){
event.target.className = `${clsPrefix}-thead-th-drag-gap th-drag-gap-hover`; event.target.className = `${clsPrefix}-thead-th-drag-gap th-drag-gap-hover`;
}
}; };
ableOnMouseMove = (event, data) => { ableOnMouseMove = (event, data) => {
@ -130,7 +132,9 @@ class TableHeader extends Component {
onMouseOut = (event, data) => { onMouseOut = (event, data) => {
if (this.border) return; if (this.border) return;
const { clsPrefix } = this.props; const { clsPrefix } = this.props;
if(event.target.id != 'th-online'){
event.target.className = `${clsPrefix}-thead-th-drag-gap th-drag-gap`; event.target.className = `${clsPrefix}-thead-th-drag-gap th-drag-gap`;
}
}; };
onMouseDown = (event, data) => { onMouseDown = (event, data) => {
let {dragAbleOrBord,dragAbleOrBordStart} = this.state; let {dragAbleOrBord,dragAbleOrBordStart} = this.state;
@ -484,18 +488,19 @@ class TableHeader extends Component {
thClassName += `${fixedStyle}`; thClassName += `${fixedStyle}`;
if(!da.fixed){ if(!da.fixed){
thLineObj = { thLineObj = {
//----------------
onMouseMove:(e)=>{ e.stopPropagation();this.onMouseMove(e, da)}, onMouseMove:(e)=>{ e.stopPropagation();this.onMouseMove(e, da)},
onMouseOut:(e)=>{this.onMouseOut(e, da)}, onMouseOut:(e)=>{this.onMouseOut(e, da)},
onMouseDown:(e)=>{ e.stopPropagation();this.onMouseDown(e, da)}, onMouseDown:(e)=>{ e.stopPropagation();this.onMouseDown(e, da)},
onMouseUp:(e)=>{this.onMouseUp(e, da)}, onMouseUp:(e)=>{this.onMouseUp(e, da)},
onMouseOver:(e)=>{this.onMouseOver(e, da)}, onMouseOver:(e)=>{this.onMouseOver(e, da)},
className:`${clsPrefix}-thead-th-drag-gap `, className:`${clsPrefix}-thead-th-drag-gap th-drag-gap`,
}; };
} }
return (<th key={Math.random()} {...thAbleObj} {...thBorObj} className={thClassName} > return (<th key={Math.random()} {...thAbleObj} {...thBorObj} className={thClassName} >
{da.children} {da.children}
{ {
da.fixed ? "":<div ref={el => (this.gap = el)} {...thLineObj} /> da.fixed ? "":<div ref={el => (this.gap = el)} {...thLineObj} ><div id='th-online' className='online' /></div>
} }
</th>) </th>)
}else{ }else{