拖拽时滚动条动态变化

This commit is contained in:
wanghaoo 2018-11-28 15:36:11 +08:00
parent 3a8dbcfe6d
commit 419913410f
7 changed files with 15914 additions and 20767 deletions

View File

@ -791,7 +791,7 @@ var Table = function (_Component) {
} else { } else {
//内容少,不用显示滚动条 //内容少,不用显示滚动条
if (this.domWidthDiff > 0) { if (this.domWidthDiff > 0) {
headStyle.overflowX = 'auto'; headStyle.overflowX = 'hidden';
} }
headStyle.marginBottom = '0px'; headStyle.marginBottom = '0px';
} }

View File

@ -281,12 +281,14 @@ var TableHeader = function (_Component) {
} }
var fixedLeftTable = contentTable.querySelector('.u-table-fixed-left .u-table-header'); var fixedLeftTable = contentTable.querySelector('.u-table-fixed-left .u-table-header');
var fixedRightTable = contentTable.querySelector('.u-table-fixed-rigth .u-table-header'); var fixedRightTable = contentTable.querySelector('.u-table-fixed-rigth .u-table-header');
var contentTableHeader = contentTable.querySelector('.u-table-scroll .u-table-header');
if (showScroll < 0) { if (showScroll < 0) {
//找到固定列表格设置表头的marginBottom值为scrollbarWidth; //找到固定列表格设置表头的marginBottom值为scrollbarWidth;
contentTableHeader.style.overflowX = 'scroll';
fixedLeftTable && (fixedLeftTable.style.marginBottom = scrollbarWidth + "px"); fixedLeftTable && (fixedLeftTable.style.marginBottom = scrollbarWidth + "px");
fixedRightTable && (fixedRightTable.style.marginBottom = scrollbarWidth + "px"); fixedRightTable && (fixedRightTable.style.marginBottom = scrollbarWidth + "px");
} else { } else {
contentTableHeader.style.overflowX = 'hidden';
fixedLeftTable && (fixedLeftTable.style.marginBottom = '0px'); fixedLeftTable && (fixedLeftTable.style.marginBottom = '0px');
fixedRightTable && (fixedRightTable.style.marginBottom = '0px'); fixedRightTable && (fixedRightTable.style.marginBottom = '0px');
} }

59
dist/demo.css vendored
View File

@ -2421,6 +2421,9 @@ i.uf {
/* /*
* 选择时删除文本阴影及设置默认选中颜色 * 选择时删除文本阴影及设置默认选中颜色
*/ */
::-moz-selection {
background: rgb(187,222,251);
text-shadow: none; }
::selection { ::selection {
background: rgb(187,222,251); background: rgb(187,222,251);
text-shadow: none; } text-shadow: none; }
@ -5284,7 +5287,7 @@ a, .mdl-accordion, .mdl-button, .mdl-card, .mdl-checkbox, .mdl-dropdown-menu,
.u-panel .u-panel-body { .u-panel .u-panel-body {
padding: 15px 15px; padding: 15px 15px;
position: relative; } position: relative; }
.u-panel .u-panel-body .u-panel-copy { .u-panel .u-panel-body .uf {
position: absolute; position: absolute;
right: 25px; right: 25px;
top: 30px; top: 30px;
@ -5294,7 +5297,7 @@ a, .mdl-accordion, .mdl-button, .mdl-card, .mdl-checkbox, .mdl-dropdown-menu,
margin: 8px; margin: 8px;
border-radius: 4px; border-radius: 4px;
cursor: pointer; } cursor: pointer; }
.u-panel .u-panel-body .u-panel-copy:hover { .u-panel .u-panel-body .uf:hover {
color: #a8a7a7; } color: #a8a7a7; }
.u-panel-default { .u-panel-default {
@ -6670,8 +6673,7 @@ input.u-button[type="submit"] {
border-radius: 0 500px 500px 0; } border-radius: 0 500px 500px 0; }
.u-pagination { .u-pagination {
font-size: 14px; font-size: 14px; }
position: relative; }
.u-pagination-list { .u-pagination-list {
float: left; float: left;
margin: 5px; } margin: 5px; }
@ -6809,15 +6811,6 @@ input.u-button[type="submit"] {
margin: 5px; } margin: 5px; }
.u-pagination-total span { .u-pagination-total span {
padding: 0 5px; } padding: 0 5px; }
.u-pagination.u-pagination-disabled .u-pagination-disabled-mask {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 46px;
background: rgba(255, 255, 255, 0.6);
z-index: 2;
cursor: not-allowed; }
.pagination-state { .pagination-state {
float: left; float: left;
@ -6924,29 +6917,15 @@ input.u-button[type="submit"] {
margin: 0 5px; margin: 0 5px;
height: 18px; height: 18px;
line-height: 18px; line-height: 18px;
font-size: 14px; font-size: 14px; }
white-space: nowrap;
cursor: pointer;
outline: none;
position: relative;
line-height: 1;
vertical-align: middle; }
.u-checkbox.disabled .u-checkbox-label { .u-checkbox.disabled .u-checkbox-label {
cursor: not-allowed; cursor: not-allowed;
opacity: 0.5; } opacity: 0.5; }
.u-checkbox input[type='checkbox'] { .u-checkbox input[type='checkbox'] {
position: absolute; display: none;
z-index: 3; cursor: pointer; }
cursor: pointer;
opacity: 0;
box-sizing: border-box;
padding: 0;
width: 100%;
height: 100%; }
.u-checkbox input[disabled] { .u-checkbox input[disabled] {
cursor: not-allowed; } cursor: not-allowed; }
.u-checkbox input[type='checkbox']:focus + .u-checkbox-label:before {
border-color: #1e88e5; }
.u-checkbox.is-checked .u-checkbox-label:before { .u-checkbox.is-checked .u-checkbox-label:before {
box-shadow: inset 0 0 0 10px rgb(30,136,229); box-shadow: inset 0 0 0 10px rgb(30,136,229);
border-color: rgb(30,136,229); } border-color: rgb(30,136,229); }
@ -6998,37 +6977,22 @@ input.u-button[type="submit"] {
box-shadow: inset 0 0 0 10px rgb(76,175,80); box-shadow: inset 0 0 0 10px rgb(76,175,80);
border-color: rgb(76,175,80); } border-color: rgb(76,175,80); }
.u-checkbox.u-checkbox-success input[type='checkbox']:focus + .u-checkbox-label:before {
border-color: rgb(76,175,80); }
.u-checkbox.u-checkbox-warning.is-checked .u-checkbox-label:before { .u-checkbox.u-checkbox-warning.is-checked .u-checkbox-label:before {
box-shadow: inset 0 0 0 10px rgb(255,152,0); box-shadow: inset 0 0 0 10px rgb(255,152,0);
border-color: rgb(255,152,0); } border-color: rgb(255,152,0); }
.u-checkbox.u-checkbox-warning input[type='checkbox']:focus + .u-checkbox-label:before {
border-color: rgb(255,152,0); }
.u-checkbox.u-checkbox-danger.is-checked .u-checkbox-label:before { .u-checkbox.u-checkbox-danger.is-checked .u-checkbox-label:before {
box-shadow: inset 0 0 0 10px rgb(244,67,54); box-shadow: inset 0 0 0 10px rgb(244,67,54);
border-color: rgb(244,67,54); } border-color: rgb(244,67,54); }
.u-checkbox.u-checkbox-danger input[type='checkbox']:focus + .u-checkbox-label:before {
border-color: rgb(244,67,54); }
.u-checkbox.u-checkbox-dark.is-checked .u-checkbox-label:before { .u-checkbox.u-checkbox-dark.is-checked .u-checkbox-label:before {
box-shadow: inset 0 0 0 10px rgb(97,97,97); box-shadow: inset 0 0 0 10px rgb(97,97,97);
border-color: rgb(97,97,97); } border-color: rgb(97,97,97); }
.u-checkbox.u-checkbox-dark input[type='checkbox']:focus + .u-checkbox-label:before {
border-color: rgb(97,97,97); }
.u-checkbox.u-checkbox-info.is-checked .u-checkbox-label:before { .u-checkbox.u-checkbox-info.is-checked .u-checkbox-label:before {
box-shadow: inset 0 0 0 10px rgb(0,188,212); box-shadow: inset 0 0 0 10px rgb(0,188,212);
border-color: rgb(0,188,212); } border-color: rgb(0,188,212); }
.u-checkbox.u-checkbox-info input[type='checkbox']:focus + .u-checkbox-label:before {
border-color: rgb(0,188,212); }
/* FormGroup */ /* FormGroup */
/* Navlayout */ /* Navlayout */
/* keyframes 定义 */ /* keyframes 定义 */
@ -7566,8 +7530,7 @@ ul {
zoom: 1; zoom: 1;
position: absolute; position: absolute;
right: 4px; right: 4px;
padding: 0 0 0 8px; padding: 0 0 0 8px; }
top: -3px; }
.u-select-selection--multiple .u-select-selection-choice-remove:before { .u-select-selection--multiple .u-select-selection-choice-remove:before {
display: block; display: block;
font-family: "uf"; } font-family: "uf"; }
@ -8489,6 +8452,8 @@ ul {
.u-table td { .u-table td {
padding: 12px 8px; padding: 12px 8px;
word-break: break-all; } word-break: break-all; }
.u-table tr th:last-child {
overflow: hidden; }
.u-table-row-hover { .u-table-row-hover {
background: #e3f2fd; } background: #e3f2fd; }
.u-table-scroll { .u-table-scroll {

2
dist/demo.css.map vendored

File diff suppressed because one or more lines are too long

36608
dist/demo.js vendored

File diff suppressed because one or more lines are too long

2
dist/demo.js.map vendored

File diff suppressed because one or more lines are too long

View File

@ -290,12 +290,14 @@ class TableHeader extends Component {
} }
const fixedLeftTable = contentTable.querySelector('.u-table-fixed-left .u-table-header') ; const fixedLeftTable = contentTable.querySelector('.u-table-fixed-left .u-table-header') ;
const fixedRightTable = contentTable.querySelector('.u-table-fixed-rigth .u-table-header'); const fixedRightTable = contentTable.querySelector('.u-table-fixed-rigth .u-table-header');
const contentTableHeader = contentTable.querySelector('.u-table-scroll .u-table-header');
if(showScroll < 0){ if(showScroll < 0){
//找到固定列表格设置表头的marginBottom值为scrollbarWidth; //找到固定列表格设置表头的marginBottom值为scrollbarWidth;
contentTableHeader.style.overflowX = 'scroll';
fixedLeftTable && (fixedLeftTable.style.marginBottom = scrollbarWidth + "px"); fixedLeftTable && (fixedLeftTable.style.marginBottom = scrollbarWidth + "px");
fixedRightTable && (fixedRightTable.style.marginBottom = scrollbarWidth + "px"); fixedRightTable && (fixedRightTable.style.marginBottom = scrollbarWidth + "px");
}else{ }else{
contentTableHeader.style.overflowX = 'hidden';
fixedLeftTable && (fixedLeftTable.style.marginBottom = '0px'); fixedLeftTable && (fixedLeftTable.style.marginBottom = '0px');
fixedRightTable && (fixedRightTable.style.marginBottom = '0px'); fixedRightTable && (fixedRightTable.style.marginBottom = '0px');
} }