feat:滚动条宽度计算逻辑调整；滚动条样式只加在Table上
This commit is contained in:
izbz wh
parent
465408c604
commit
46961d05e0
|
|
@ -337,7 +337,7 @@
|
|||
cursor: pointer; }
|
||||
.u-table-filter-column-pop-cont-item .u-checkbox {
|
||||
margin: 0px; }
|
||||
.u-table-filter-column-pop-cont-item > span {
|
||||
.u-table-filter-column-pop-cont-item span.drop-menu-title {
|
||||
margin-left: -3px;
|
||||
max-width: 132px;
|
||||
width: auto !important;
|
||||
|
|
@ -367,6 +367,22 @@
|
|||
padding-left: 12px; }
|
||||
.u-table.has-fixed-left .u-table-scroll tr td:first-child, .u-table.has-fixed-left .u-table-scroll tr th:first-child {
|
||||
padding-left: 8px; }
|
||||
.u-table ::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px; }
|
||||
.u-table ::-webkit-scrollbar-button {
|
||||
display: none; }
|
||||
.u-table ::-webkit-scrollbar-thumb {
|
||||
background: #d5d5d5 !important;
|
||||
border-radius: 5px; }
|
||||
.u-table ::-webkit-scrollbar-thumb {
|
||||
border-radius: 4px;
|
||||
background-color: #d5d5d5;
|
||||
position: absolute; }
|
||||
.u-table ::-webkit-scrollbar-track {
|
||||
display: none; }
|
||||
.u-table ::-webkit-scrollbar-track-piece {
|
||||
display: none; }
|
||||
|
||||
.u-table:focus {
|
||||
outline: none;
|
||||
|
|
@ -579,28 +595,6 @@
|
|||
position: absolute;
|
||||
left: 100; }
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px; }
|
||||
|
||||
::-webkit-scrollbar-button {
|
||||
display: none; }
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #d5d5d5 !important;
|
||||
border-radius: 5px; }
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 4px;
|
||||
background-color: #d5d5d5;
|
||||
position: absolute; }
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
display: none; }
|
||||
|
||||
::-webkit-scrollbar-track-piece {
|
||||
display: none; }
|
||||
|
||||
.header-dispaly-in-row.u-table table {
|
||||
table-layout: fixed; }
|
||||
|
||||
|
|
|
|||
|
|
@ -44,9 +44,13 @@ var scrollbarMeasure = {
|
|||
function measureScrollbar() {
|
||||
var direction = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'vertical';
|
||||
|
||||
|
||||
if (typeof document === 'undefined' || typeof window === 'undefined') {
|
||||
return 0;
|
||||
}
|
||||
var tableDom = document.querySelector('.u-table');
|
||||
var currentDom = tableDom ? tableDom : document.body;
|
||||
|
||||
if (scrollbarSize) {
|
||||
return scrollbarSize;
|
||||
}
|
||||
|
|
@ -54,7 +58,7 @@ function measureScrollbar() {
|
|||
Object.keys(scrollbarMeasure).forEach(function (scrollProp) {
|
||||
scrollDiv.style[scrollProp] = scrollbarMeasure[scrollProp];
|
||||
});
|
||||
document.body.appendChild(scrollDiv);
|
||||
currentDom.appendChild(scrollDiv);
|
||||
var size = 0;
|
||||
if (direction === 'vertical') {
|
||||
size = scrollDiv.offsetWidth - scrollDiv.clientWidth;
|
||||
|
|
@ -62,7 +66,7 @@ function measureScrollbar() {
|
|||
size = scrollDiv.offsetHeight - scrollDiv.clientHeight;
|
||||
}
|
||||
|
||||
document.body.removeChild(scrollDiv);
|
||||
currentDom.removeChild(scrollDiv);
|
||||
scrollbarSize = size;
|
||||
return scrollbarSize;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,14 +8,13 @@
|
|||
// @import "../node_modules/bee-pagination/src/Pagination.scss";
|
||||
// @import "../node_modules/bee-checkbox/src/Checkbox.scss";
|
||||
// @import "../node_modules/bee-select/src/Select.scss";
|
||||
// @import "../node_modules/bee-form/src/Form.scss";
|
||||
// @import "../node_modules/bee-popover/src/Popover.scss";
|
||||
// @import "../node_modules/bee-tooltip/src/Tooltip.scss";
|
||||
// @import "../node_modules/bee-message/build/Message.css";
|
||||
// @import "../node_modules/bee-dropdown/build/Dropdown.css";
|
||||
// @import "../node_modules/bee-input-number/build/InputNumber.css";
|
||||
// @import "../node_modules/bee-modal/build/Modal.css";
|
||||
@import "../src/Table.scss";
|
||||
// @import "../src/Table.scss";
|
||||
|
||||
|
||||
//引入日期控件样式文件
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -8627,6 +8627,22 @@ ul {
|
|||
padding-left: 12px; }
|
||||
.u-table.has-fixed-left .u-table-scroll tr td:first-child, .u-table.has-fixed-left .u-table-scroll tr th:first-child {
|
||||
padding-left: 8px; }
|
||||
.u-table ::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px; }
|
||||
.u-table ::-webkit-scrollbar-button {
|
||||
display: none; }
|
||||
.u-table ::-webkit-scrollbar-thumb {
|
||||
background: #d5d5d5 !important;
|
||||
border-radius: 5px; }
|
||||
.u-table ::-webkit-scrollbar-thumb {
|
||||
border-radius: 4px;
|
||||
background-color: #d5d5d5;
|
||||
position: absolute; }
|
||||
.u-table ::-webkit-scrollbar-track {
|
||||
display: none; }
|
||||
.u-table ::-webkit-scrollbar-track-piece {
|
||||
display: none; }
|
||||
|
||||
.u-table:focus {
|
||||
outline: none;
|
||||
|
|
@ -8841,28 +8857,6 @@ ul {
|
|||
position: absolute;
|
||||
left: 100; }
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px; }
|
||||
|
||||
::-webkit-scrollbar-button {
|
||||
display: none; }
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #d5d5d5 !important;
|
||||
border-radius: 5px; }
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 4px;
|
||||
background-color: #d5d5d5;
|
||||
position: absolute; }
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
display: none; }
|
||||
|
||||
::-webkit-scrollbar-track-piece {
|
||||
display: none; }
|
||||
|
||||
.header-dispaly-in-row.u-table table {
|
||||
table-layout: fixed; }
|
||||
|
||||
|
|
|
|||
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
|
|
@ -621,6 +621,31 @@ $icon-color:#505F79;
|
|||
}
|
||||
}
|
||||
}
|
||||
// 滚动条样式复写
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
::-webkit-scrollbar-button {
|
||||
display: none;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #d5d5d5 !important;
|
||||
border-radius: 5px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 4px;
|
||||
background-color: #d5d5d5;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
display: none;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track-piece {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.u-table:focus{
|
||||
outline: none;
|
||||
|
|
@ -901,31 +926,7 @@ $icon-color:#505F79;
|
|||
left: 100;
|
||||
}
|
||||
|
||||
// 滚动条样式复写
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
::-webkit-scrollbar-button {
|
||||
display: none;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #d5d5d5 !important;
|
||||
border-radius: 5px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 4px;
|
||||
background-color: #d5d5d5;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
display: none;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track-piece {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// 表格显示里面的内容显示在一行
|
||||
.header-dispaly-in-row{
|
||||
|
|
|
|||
|
|
@ -14,9 +14,13 @@ const scrollbarMeasure = {
|
|||
};
|
||||
|
||||
export function measureScrollbar(direction = 'vertical') {
|
||||
|
||||
if (typeof document === 'undefined' || typeof window === 'undefined') {
|
||||
return 0;
|
||||
}
|
||||
const tableDom =document.querySelector('.u-table');
|
||||
let currentDom = tableDom?tableDom:document.body;
|
||||
|
||||
if (scrollbarSize) {
|
||||
return scrollbarSize;
|
||||
}
|
||||
|
|
@ -24,7 +28,7 @@ export function measureScrollbar(direction = 'vertical') {
|
|||
Object.keys(scrollbarMeasure).forEach(scrollProp => {
|
||||
scrollDiv.style[scrollProp] = scrollbarMeasure[scrollProp];
|
||||
});
|
||||
document.body.appendChild(scrollDiv);
|
||||
currentDom.appendChild(scrollDiv);
|
||||
let size = 0;
|
||||
if (direction === 'vertical') {
|
||||
size = scrollDiv.offsetWidth - scrollDiv.clientWidth;
|
||||
|
|
@ -32,7 +36,7 @@ export function measureScrollbar(direction = 'vertical') {
|
|||
size = scrollDiv.offsetHeight - scrollDiv.clientHeight;
|
||||
}
|
||||
|
||||
document.body.removeChild(scrollDiv);
|
||||
currentDom.removeChild(scrollDiv);
|
||||
scrollbarSize = size;
|
||||
return scrollbarSize;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue