拖拽时滚动条动态变化
This commit is contained in:
parent
3a8dbcfe6d
commit
419913410f
|
@ -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';
|
||||||
}
|
}
|
||||||
|
|
|
@ -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');
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -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');
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue