|
@@ -1,71 +1,86 @@
|
|
|
-import Vue from 'vue'
|
|
|
+import Vue from "vue";
|
|
|
|
|
|
-let timerId = null
|
|
|
-let intervalId = null
|
|
|
-let isShowTitle = false
|
|
|
-let titleNode = null
|
|
|
+let timerId = null;
|
|
|
+let intervalId = null;
|
|
|
+let isShowTitle = false;
|
|
|
+let titleNode = null;
|
|
|
|
|
|
function removeTitle() {
|
|
|
if (!isShowTitle) {
|
|
|
- clearTimeout(timerId)
|
|
|
+ clearTimeout(timerId);
|
|
|
} else {
|
|
|
- isShowTitle = false
|
|
|
- document.body.removeChild(titleNode)
|
|
|
- clearInterval(intervalId)
|
|
|
+ isShowTitle = false;
|
|
|
+ document.body.removeChild(titleNode);
|
|
|
+ clearInterval(intervalId);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-Vue.directive('title', {
|
|
|
+Vue.directive("title", {
|
|
|
bind: function (el, binding) {
|
|
|
if (!binding.value) {
|
|
|
- return
|
|
|
+ return;
|
|
|
}
|
|
|
- el.addEventListener('mousemove', function(e) {
|
|
|
- if (!isShowTitle) {
|
|
|
- clearTimeout(timerId)
|
|
|
- timerId = setTimeout(() => {
|
|
|
- isShowTitle = true
|
|
|
+ el.addEventListener(
|
|
|
+ "mousemove",
|
|
|
+ function (e) {
|
|
|
+ if (!isShowTitle) {
|
|
|
+ clearTimeout(timerId);
|
|
|
+ timerId = setTimeout(() => {
|
|
|
+ isShowTitle = true;
|
|
|
|
|
|
- titleNode = document.createElement('div')
|
|
|
+ titleNode = document.createElement("div");
|
|
|
|
|
|
- titleNode.style.position = 'fixed',
|
|
|
- titleNode.style.zIndex = 100,
|
|
|
- titleNode.style.backgroundColor = '#191A1C'
|
|
|
- titleNode.style.borderRadius = '2px'
|
|
|
- titleNode.style.border = '1px solid rgba(151, 151, 151, 0.2)'
|
|
|
- titleNode.style.padding = '2px 6px'
|
|
|
- titleNode.style.fontSize = '12px'
|
|
|
- titleNode.style.color = 'rgba(255, 255, 255, 0.6)'
|
|
|
- titleNode.innerText = binding.value
|
|
|
- titleNode.style.left = e.clientX + 11 + 'px'
|
|
|
- titleNode.style.top = e.clientY + 18 + 'px'
|
|
|
+ titleNode.style.position = "fixed";
|
|
|
+ titleNode.style.zIndex = 2147483647;
|
|
|
+ titleNode.style.backgroundColor = "#191A1C";
|
|
|
+ titleNode.style.borderRadius = "2px";
|
|
|
+ titleNode.style.border = "1px solid rgba(151, 151, 151, 0.2)";
|
|
|
+ titleNode.style.padding = "2px 6px";
|
|
|
+ titleNode.style.fontSize = "12px";
|
|
|
+ titleNode.style.color = "rgba(255, 255, 255, 0.6)";
|
|
|
+ titleNode.innerText = binding.value;
|
|
|
+ titleNode.style.left = e.clientX + 11 + "px";
|
|
|
+ titleNode.style.top = e.clientY + 18 + "px";
|
|
|
|
|
|
- document.body.appendChild(titleNode)
|
|
|
+ document.body.appendChild(titleNode);
|
|
|
|
|
|
- if (e.clientX + 11 + titleNode.offsetWidth > document.documentElement.clientWidth) {
|
|
|
- titleNode.style.left = document.documentElement.clientWidth - titleNode.offsetWidth + 'px'
|
|
|
- }
|
|
|
- if (e.clientY + 18 + titleNode.offsetHeight > document.documentElement.clientHeight) {
|
|
|
- titleNode.style.top = document.documentElement.clientHeight - titleNode.offsetHeight + 'px'
|
|
|
- }
|
|
|
-
|
|
|
- intervalId = setInterval(() => {
|
|
|
- if (!document.contains(el)) {
|
|
|
- removeTitle()
|
|
|
+ if (
|
|
|
+ e.clientX + 11 + titleNode.offsetWidth >
|
|
|
+ document.documentElement.clientWidth
|
|
|
+ ) {
|
|
|
+ titleNode.style.left =
|
|
|
+ document.documentElement.clientWidth -
|
|
|
+ titleNode.offsetWidth +
|
|
|
+ "px";
|
|
|
+ }
|
|
|
+ if (
|
|
|
+ e.clientY + 18 + titleNode.offsetHeight >
|
|
|
+ document.documentElement.clientHeight
|
|
|
+ ) {
|
|
|
+ titleNode.style.top =
|
|
|
+ document.documentElement.clientHeight -
|
|
|
+ titleNode.offsetHeight +
|
|
|
+ "px";
|
|
|
}
|
|
|
- }, 300);
|
|
|
-
|
|
|
- }, 500);
|
|
|
+
|
|
|
+ intervalId = setInterval(() => {
|
|
|
+ if (!document.contains(el)) {
|
|
|
+ removeTitle();
|
|
|
+ }
|
|
|
+ }, 300);
|
|
|
+ }, 500);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ passive: false,
|
|
|
}
|
|
|
- }, {
|
|
|
- passive: false,
|
|
|
- })
|
|
|
+ );
|
|
|
|
|
|
- el.addEventListener('mouseleave', removeTitle)
|
|
|
- el.addEventListener('mousedown', removeTitle)
|
|
|
- el.addEventListener('keydown', removeTitle)
|
|
|
- el.addEventListener('scroll', removeTitle)
|
|
|
- el.addEventListener('dragover', removeTitle)
|
|
|
- el.addEventListener('dragleave', removeTitle)
|
|
|
+ el.addEventListener("mouseleave", removeTitle);
|
|
|
+ el.addEventListener("mousedown", removeTitle);
|
|
|
+ el.addEventListener("keydown", removeTitle);
|
|
|
+ el.addEventListener("scroll", removeTitle);
|
|
|
+ el.addEventListener("dragover", removeTitle);
|
|
|
+ el.addEventListener("dragleave", removeTitle);
|
|
|
},
|
|
|
-})
|
|
|
+});
|