diff --git a/src/main.js b/src/main.js index dec34a4..719666a 100644 --- a/src/main.js +++ b/src/main.js @@ -54,4 +54,39 @@ let vue = new Vue({ render: h => h(App) }).$mount('#app') + +// const style = document.createElement('style'); +// style.type = 'text/css'; +// style.innerHTML = ` +// .el-tooltip__popper { +// max-width: 300px; +// word-wrap: break-word; +// color: white; +// background: #00000069; +// } +// `; +// document.head.appendChild(style); + +document.addEventListener('mouseover', function(event) { + const target = event.target; + if (target && target.classList.contains('cell')) { + if (target.scrollWidth > target.clientWidth) { + const tooltip = document.createElement('div'); + tooltip.className = 'el-tooltip__popper'; + tooltip.style.position = 'absolute'; + tooltip.style.zIndex = 9999; + tooltip.innerText = target.innerText; + + document.body.appendChild(tooltip); + + const rect = target.getBoundingClientRect(); + tooltip.style.top = `${rect.top - tooltip.offsetHeight}px`; + tooltip.style.left = `${rect.left + (rect.width - tooltip.offsetWidth) / 2}px`; + + target.addEventListener('mouseleave', function() { + document.body.removeChild(tooltip); + }, { once: true }); + } + } +}); export default vue; diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss index 26bd24c..cdb98b8 100644 --- a/src/styles/element-ui.scss +++ b/src/styles/element-ui.scss @@ -95,3 +95,16 @@ table { overflow: hidden; text-overflow: ellipsis; } +.el-tooltip__popper { + max-width: 300px; + word-wrap: break-word; + color: white; + background: #00000069; +} + +.el-tooltip__popper { + max-width: 350px; + word-wrap: break-word; + color: white; + background: rgba(0, 0, 0, 0.69); +} diff --git a/src/views/smart/workorder.vue b/src/views/smart/workorder.vue index 2155244..5bd0291 100644 --- a/src/views/smart/workorder.vue +++ b/src/views/smart/workorder.vue @@ -26,16 +26,16 @@ - - + + + + + + + + + +