优化软件内文本悬浮提示

src/renderer/plugins/Tips/Tips.js

@@ -0,0 +1,30 @@
+import Tips from './Tips.vue'
+import Vue from 'vue'
+
+const TipsConstructor = Vue.extend(Tips)
+export default ({ position, message } = {}) => {
+  if (!position) return
+  let instance = new TipsConstructor().$mount(document.createElement('div'))
+
+  // Tips实例挂载到刚创建的div
+  // 属性设置
+  instance.visible = true
+  instance.message = message
+  instance.position.top = position.top
+  instance.position.left = position.left
+
+  // 将Tips的DOM挂载到body上
+  document.body.appendChild(instance.$el)
+
+  instance.cancel = () => {
+    instance.visible = false
+    instance = null
+  }
+
+  instance.setTips = tips => {
+    instance.message = tips
+  }
+
+  return instance
+}
+

src/renderer/plugins/Tips/Tips.vue

@@ -0,0 +1,93 @@
+<template>
+  <transition name="tips-fade" @after-leave="afterLeave">
+    <div v-show="visible" :style="{ left: position.left + 'px' , top: position.top + 'px', transform: transform }" ref="dom_tips" :class="$style.tips">{{message}}</div>
+  </transition>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      visible: false,
+      message: '',
+      position: {
+        top: 0,
+        left: 0,
+      },
+      transform: 'translate(0, 0)',
+      cancel: null,
+      setTips: null,
+    }
+  },
+  watch: {
+    message() {
+      this.$nextTick(() => {
+        this.transform = `translate(${this.handleGetOffsetXY(this.position.left, this.position.top)})`
+      })
+    },
+  },
+  methods: {
+    afterLeave(el, done) {
+      el.parentNode.removeChild(el)
+    },
+    handleGetOffsetXY(left, top) {
+      const tipsWidth = this.$refs.dom_tips.clientWidth
+      const tipsHeight = this.$refs.dom_tips.clientHeight
+      const dom_container = document.body
+      const containerWidth = dom_container.clientWidth
+      const containerHeight = dom_container.clientHeight
+      const offsetWidth = containerWidth - left - tipsWidth
+      const offsetHeight = containerHeight - top - tipsHeight
+      let x = 0
+      let y = 0
+      if (tipsWidth < containerWidth / 2 && containerWidth > tipsWidth && offsetWidth < 5) {
+        x = -tipsWidth - 12
+      }
+      if (tipsHeight < containerHeight / 2 && containerHeight > tipsHeight && offsetHeight < 5) {
+        y = -tipsHeight - 8
+      }
+      return `${x}px, ${y}px`
+    },
+  },
+}
+</script>
+
+<style lang="less" module>
+@import '../../assets/styles/layout.less';
+
+.tips {
+  position: fixed;
+  // transform: scale(1);
+  line-height: 1.2;
+  word-wrap: break-word;
+  padding: 4px 5px;
+  z-index: 999;
+  font-size: 12px;
+  max-width: 80%;
+  color: @color-theme_2-font;
+  border-radius: 3px;
+  background: @color-green-theme_2-background_1;
+  overflow: hidden;
+  pointer-events: none;
+  // text-align: justify;
+  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
+}
+
+:global(.tips-fade-enter-active), :global(.tips-fade-leave-active) {
+  transition: opacity .2s;
+}
+:global(.tips-fade-enter), :global(.tips-fade-leave-to) {
+  opacity: 0;
+}
+
+each(@themes, {
+  :global(#container.@{value}) {
+    ~.tips {
+      color: ~'@{color-@{value}-theme_2-font}';
+      background: ~'@{color-@{value}-theme_2-background_1}';
+    }
+  }
+})
+
+
+</style>

src/renderer/plugins/Tips/index.js

@@ -0,0 +1,57 @@
+import tips from './Tips'
+import { debounce } from '../../utils'
+
+let instance
+let prevTips
+
+const getTips = el => el == null
+  ? null
+  : el.getAttribute('tips')
+    ? el.getAttribute('tips')
+    : el.parentNode === document.body
+      ? null
+      : getTips(el.parentNode)
+
+const showTips = debounce(event => {
+  let msg = getTips(event.target)
+  if (!msg) return
+  prevTips = msg
+  instance = tips({
+    message: msg,
+    position: {
+      top: event.y + 12,
+      left: event.x + 8,
+    },
+  })
+}, 400)
+
+const hideTips = () => {
+  if (!instance) return
+  instance.cancel()
+  prevTips = null
+  instance = null
+}
+
+const setTips = tips => {
+  if (!instance) return
+  instance.setTips(tips)
+}
+
+const updateTips = event => {
+  if (!instance) return
+  setTimeout(() => {
+    let msg = getTips(event.target)
+    if (!msg || prevTips === msg) return
+    setTips(msg)
+    prevTips = msg
+  })
+}
+
+document.body.addEventListener('mousemove', event => {
+  hideTips()
+  showTips(event)
+})
+
+document.body.addEventListener('click', updateTips)
+
+document.body.addEventListener('contextmenu', updateTips)

src/renderer/plugins/index.js

@@ -1 +1,2 @@
 // import './axios'
+import './Tips'