78 lines
1.7 KiB
JavaScript
78 lines
1.7 KiB
JavaScript
import { createVNode, render } from 'vue'
|
|
import ImageMarkTooltip from './ImageMarkTooltip.vue'
|
|
|
|
class ImageMarkTooltipUI {
|
|
constructor() {
|
|
this.instance = null
|
|
this.container = null
|
|
this.entity = null
|
|
this.root = null
|
|
}
|
|
|
|
// 显示 tooltip
|
|
show(options = {}) {
|
|
// 销毁之前的实例
|
|
this.close()
|
|
|
|
// 创建容器
|
|
this.container = document.createElement('div')
|
|
this.container.className = 'tooltip-service-container'
|
|
this.root = document.querySelector('.cockpit-main')
|
|
this.root.appendChild(this.container)
|
|
|
|
this.entity = options.entity
|
|
|
|
// 创建 VNode
|
|
const vnode = createVNode(ImageMarkTooltip, {
|
|
visible: true,
|
|
position: options.position || { x: 0, y: 0 },
|
|
data: options.data || {},
|
|
loading: options.loading || false,
|
|
error: options.error || '',
|
|
onClose: () => {
|
|
this.close()
|
|
}
|
|
})
|
|
|
|
// 渲染到容器
|
|
render(vnode, this.container)
|
|
this.instance = vnode.component
|
|
return this.instance
|
|
}
|
|
|
|
updatePosition(position) {
|
|
if (this.instance) {
|
|
this.instance.props.position = position
|
|
this.instance.update()
|
|
}
|
|
}
|
|
|
|
// 更新 tooltip 内容
|
|
update(options) {
|
|
if (this.instance) {
|
|
this.instance.props = {
|
|
...this.instance.props,
|
|
...options
|
|
}
|
|
}
|
|
}
|
|
|
|
// 关闭 tooltip
|
|
close() {
|
|
if (this.container) {
|
|
render(null, this.container)
|
|
this.root.removeChild(this.container)
|
|
this.container = null
|
|
this.instance = null
|
|
}
|
|
}
|
|
}
|
|
|
|
// 创建单例实例
|
|
const instance = new ImageMarkTooltipUI()
|
|
|
|
export const CommonTooltip = instance
|
|
|
|
export const newImageMarkTooltip = () => {
|
|
return new ImageMarkTooltipUI()
|
|
} |