fix: [tooltip] mount every time
parent
6c2f36b908
commit
ad756499b3
|
@ -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>
|
|
@ -1,3 +1,4 @@
|
||||||
import ToolTip from './tooltip.vue'
|
import ToolTip from './tooltip.vue'
|
||||||
|
import './style'
|
||||||
export default ToolTip
|
export default ToolTip
|
||||||
|
|
||||||
|
|
|
@ -33,7 +33,6 @@ export default {
|
||||||
visible: false,
|
visible: false,
|
||||||
left: 0,
|
left: 0,
|
||||||
top: 0,
|
top: 0,
|
||||||
domNode: null,
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
@ -44,42 +43,46 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
created() {
|
methods: {
|
||||||
const div = document.createElement('div')
|
mountNode(callback) {
|
||||||
document.body.appendChild(div)
|
if (this.vnode) {
|
||||||
const that = this
|
callback()
|
||||||
const vnode = new Vue({
|
return
|
||||||
data() {
|
}
|
||||||
return {
|
const div = document.createElement('div')
|
||||||
left: 0,
|
document.body.appendChild(div)
|
||||||
top: 0,
|
const that = this
|
||||||
}
|
const vnode = new Vue({
|
||||||
},
|
data() {
|
||||||
render(h) {
|
return {
|
||||||
return (
|
left: 0,
|
||||||
<transition name="zoom-big">
|
top: 0,
|
||||||
<div
|
}
|
||||||
v-show={that.visible}
|
},
|
||||||
class={`ant-tooltip ant-tooltip-placement-${that.placement}`}
|
render(h) {
|
||||||
style={{ left: this.left + 'px', top: this.top + 'px' }}
|
return (
|
||||||
>
|
<transition name="zoom-big">
|
||||||
<div class="ant-tooltip-content">
|
<div
|
||||||
<div class="ant-tooltip-arrow"/>
|
v-show={that.visible}
|
||||||
<div class="ant-tooltip-inner">
|
class={`ant-tooltip ant-tooltip-placement-${that.placement}`}
|
||||||
<span>{that.title}</span>
|
style={{ left: this.left + 'px', top: this.top + 'px' }}
|
||||||
|
>
|
||||||
|
<div class="ant-tooltip-content">
|
||||||
|
<div class="ant-tooltip-arrow"/>
|
||||||
|
<div class="ant-tooltip-inner">
|
||||||
|
<span>{that.title}</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</transition>
|
||||||
</transition>
|
)
|
||||||
)
|
}
|
||||||
}
|
}).$mount(div)
|
||||||
}).$mount(div)
|
this.$nextTick(() => {
|
||||||
this.$nextTick(() => {
|
this.vnode = vnode
|
||||||
this.vnode = vnode
|
callback()
|
||||||
this.domNode = div
|
})
|
||||||
})
|
},
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
onPopupAlign: (placement, domNode, target, align) => {
|
onPopupAlign: (placement, domNode, target, align) => {
|
||||||
if (!placement) {
|
if (!placement) {
|
||||||
return;
|
return;
|
||||||
|
@ -118,10 +121,10 @@ export default {
|
||||||
left += window.scrollX
|
left += window.scrollX
|
||||||
const ret = { left, top }
|
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)) {
|
if (/Left/.test(placement)) {
|
||||||
} else if(/Right/.test(placement)) {
|
} else if(/Right/.test(placement)) {
|
||||||
|
@ -138,41 +141,43 @@ export default {
|
||||||
return ret
|
return ret
|
||||||
},
|
},
|
||||||
showNode() {
|
showNode() {
|
||||||
this.visible = true
|
this.mountNode(() => {
|
||||||
this.$nextTick(() => {
|
this.visible = true
|
||||||
const popup = this.vnode.$el.getBoundingClientRect()
|
this.$nextTick(() => {
|
||||||
const content = this.$el.getBoundingClientRect()
|
const popup = this.vnode.$el.getBoundingClientRect()
|
||||||
const { left, top } = this.computeOffset(popup, content, this.placement)
|
const content = this.$el.getBoundingClientRect()
|
||||||
this.vnode.left = left
|
const { left, top } = this.computeOffset(popup, content, this.placement)
|
||||||
this.vnode.top = top
|
this.vnode.left = left
|
||||||
|
this.vnode.top = top
|
||||||
|
})
|
||||||
|
this.onPopupAlign(this.placement, this.$el, this.vnode.$el, { offset: [0,0] })
|
||||||
})
|
})
|
||||||
this.onPopupAlign(this.placement, this.$el, this.vnode.$el, { offset: [0,0] })
|
|
||||||
},
|
},
|
||||||
hideNode() {
|
hideNode() {
|
||||||
this.visible = false
|
this.visible = false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
render(h) {
|
render(h) {
|
||||||
let node = this.vnode
|
|
||||||
const inner = this.$slots.default[0]
|
const inner = this.$slots.default[0]
|
||||||
inner.data = inner.data || {}
|
inner.data = inner.data || {}
|
||||||
inner.data.on = inner.data.on || {}
|
inner.data.on = inner.data.on || {}
|
||||||
inner.data.on.mouseenter = this.addEventHandle(inner.data.on.mouseenter, this.showNode)
|
inner.data.on.mouseenter = this.addEventHandle(inner.data.on.mouseenter, this.showNode)
|
||||||
inner.data.on.mouseleave = this.addEventHandle(inner.data.on.mouseleave, this.hideNode)
|
inner.data.on.mouseleave = this.addEventHandle(inner.data.on.mouseleave, this.hideNode)
|
||||||
// console.info(inner)
|
|
||||||
return this.$slots.default[0]
|
return this.$slots.default[0]
|
||||||
},
|
},
|
||||||
updated() {
|
updated() {
|
||||||
|
if (!this.vnode) return
|
||||||
const popup = this.vnode.$el.getBoundingClientRect()
|
const popup = this.vnode.$el.getBoundingClientRect()
|
||||||
const content = this.$el.getBoundingClientRect()
|
const content = this.$el.getBoundingClientRect()
|
||||||
const { left, top } = this.computeOffset(popup, content, this.placement)
|
const { left, top } = this.computeOffset(popup, content, this.placement)
|
||||||
this.vnode.left = left
|
this.vnode.left = left
|
||||||
this.vnode.top = top
|
this.vnode.top = top
|
||||||
},
|
},
|
||||||
beforeDestory() {
|
beforeDestroy() {
|
||||||
console.info('没有成功清除实例 ,看vue panel')
|
if (!this.vnode) return
|
||||||
|
this.vnode.$el.remove()
|
||||||
this.vnode.$destroy();
|
this.vnode.$destroy();
|
||||||
this.domNode && this.domNode.remove()
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -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>
|
|
Loading…
Reference in New Issue