fix: [tooltip] mount every time

components/tooltip/demo/basic.vue

@@ -0,0 +1,66 @@
+<template>
+  <div>
+    <tool-tip
+      placement="bottom"
+      :title="showText">
+      <h1 @click="boom" style="display: inline-block">This is just a test, put your cursor here</h1>
+    </tool-tip>
+    <ant-button>2223</ant-button>
+    <div class="box">
+      <table>
+        <tr v-for="(tr, index) in table" :key="index">
+          <td v-for="(td, i) in tr" :key="i">
+            <tool-tip v-if="td" :placement="td" :title="td"><AntButton type="primary">{{td}}</AntButton></tool-tip>
+          </td>
+        </tr>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script>
+  import { ToolTip, Button } from '../../../components'
+  import '../../../components/button/style'
+	export default {
+		name: 'tooltip-basic',
+		data() {
+			return {
+        show: true,
+        showText: '你好啊，233',
+        table: [
+          ['', 'topLeft', 'top', 'topRight', ''],
+          ['leftTop', '', '', '', 'rightTop'],
+          ['left', '', '', '', 'right'],
+          ['leftBottom', '', '', '', 'rightBottom'],
+          ['', 'bottomLeft', 'bottom', 'bottomRight', ''],
+        ]
+      }
+		},
+    methods: {
+		  boom() {
+		    this.showText += '3'
+      }
+    },
+    components: {
+		  ToolTip,
+      AntButton: Button,
+    },
+    beforeUpdate() {
+		  console.info(90909090)
+    }
+	}
+</script>
+<style scoped lang="less">
+  .box {
+    margin: 100px;
+  }
+  table {
+    td {
+      padding: 20px;
+    }
+    p {
+      text-align: center;
+      vertical-align: middle;
+    }
+  }
+</style>

components/tooltip/index.js

@@ -1,3 +1,4 @@
 import ToolTip from './tooltip.vue'
+import './style'
 export default ToolTip
 

components/tooltip/tooltip.vue

@@ -33,7 +33,6 @@ export default {
       visible: false,
       left: 0,
       top: 0,
-      domNode: null,
     }
   },
   computed: {
@@ -44,7 +43,12 @@ export default {
       }
     },
   },
-  created() {
+  methods: {
+    mountNode(callback) {
+      if (this.vnode) {
+        callback()
+        return
+      }
       const div = document.createElement('div')
       document.body.appendChild(div)
       const that = this
@@ -76,10 +80,9 @@ export default {
       }).$mount(div)
       this.$nextTick(() => {
         this.vnode = vnode
-      this.domNode = div
+        callback()
       })
     },
-  methods: {
     onPopupAlign: (placement, domNode, target, align) => {
       if (!placement) {
         return;
@@ -118,10 +121,10 @@ export default {
       left += window.scrollX
       const ret = { left, top }
 
-      if (/top/.test(placement)) ret.top -= popup.height
+      if (/top/.test(placement)) ret.top -= popup.height + 5
-      if (/bottom/.test(placement)) ret.top += height
+      if (/bottom/.test(placement)) ret.top += height + 5
-      if (/left/.test(placement)) ret.left -= popup.width
+      if (/left/.test(placement)) ret.left -= popup.width + 10
-      if (/right/.test(placement)) ret.left += width
+      if (/right/.test(placement)) ret.left += width + 5
 
       if (/Left/.test(placement)) {
       } else if(/Right/.test(placement)) {
@@ -138,6 +141,7 @@ export default {
       return ret
     },
     showNode() {
+      this.mountNode(() => {
         this.visible = true
         this.$nextTick(() => {
           const popup = this.vnode.$el.getBoundingClientRect()
@@ -147,32 +151,33 @@ export default {
           this.vnode.top = top
         })
         this.onPopupAlign(this.placement, this.$el, this.vnode.$el, { offset: [0,0] })
+      })
     },
     hideNode() {
       this.visible = false
     }
   },
   render(h) {
-    let node = this.vnode
     const inner = this.$slots.default[0]
     inner.data = inner.data || {}
     inner.data.on = inner.data.on || {}
     inner.data.on.mouseenter = this.addEventHandle(inner.data.on.mouseenter, this.showNode)
     inner.data.on.mouseleave = this.addEventHandle(inner.data.on.mouseleave, this.hideNode)
-//    console.info(inner)
+
     return this.$slots.default[0]
   },
   updated() {
+    if (!this.vnode) return
     const popup = this.vnode.$el.getBoundingClientRect()
     const content = this.$el.getBoundingClientRect()
     const { left, top } = this.computeOffset(popup, content, this.placement)
     this.vnode.left = left
     this.vnode.top = top
   },
-  beforeDestory() {
+  beforeDestroy() {
-    console.info('没有成功清除实例 ，看vue panel')
+    if (!this.vnode) return
+    this.vnode.$el.remove()
     this.vnode.$destroy();
-    this.domNode && this.domNode.remove()
   }
 }
 </script>

examples/tooltip.vue

@@ -1,30 +0,0 @@
-<template>
-  <div>
-    <tool-tip
-      placement="top"
-      :title="showText">
-      <h1 @click="boom" style="display: inline-block">This is just a test, put your cursor here</h1>
-    </tool-tip>
-  </div>
-</template>
-
-<script>
-  import { ToolTip } from '../components'
-	export default {
-		name: '',
-		data() {
-			return {
-        show: true,
-        showText: '你好啊，23'
-      }
-		},
-    methods: {
-		  boom() {
-		    this.showText += '3'
-      }
-    },
-    components: {
-		  ToolTip
-    }
-	}
-</script>