当前位置：首页 > news >正文

根据现有html里的元素上面动态创建el-tooltip组件并显示的几种方式

news 2025/6/28 23:35:55

1、在这个示例中，我们创建了一个 ref 引用来指向我们想要附加 Tooltip 的 DOM 元素。然后在 onMounted 生命周期钩子中，我们创建了 Tooltip 组件的实例，并将其挂载到一个新创建的 DOM 元素上。我们还在触发元素上添加了 mouseenter 和 mouseleave 事件监听器来控制 Tooltip 的显示和隐藏。

<template><div class="tooltip-trigger" ref="triggerEl">Hover me</div>
</template><script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { ElTooltip } from 'element-plus';const triggerEl = ref(null);
let tooltipInstance = null;onMounted(() => {if (triggerEl.value) {// 创建 tooltip 组件实例tooltipInstance = defineComponent({template: `<div><el-tooltip :content="content" placement="top"><span ref="tooltipTrigger"></span></el-tooltip></div>`,components: { ElTooltip },data() {return {content: 'This is a tooltip'};},mounted() {// 将 tooltip 的触发元素设置为动态创建的 spanthis.$refs.tooltipTrigger.appendChild(triggerEl.value);}});// 挂载到触发元素上const mountNode = document.createElement('div');triggerEl.value.appendChild(mountNode);tooltipInstance = createApp(tooltipInstance).mount(mountNode);// 监听鼠标事件来控制显示和隐藏triggerEl.value.addEventListener('mouseenter', () => {tooltipInstance.component.proxy.$refs.tooltip.content = 'Updated content';});triggerEl.value.addEventListener('mouseleave', () => {// 隐藏 tooltiptooltipInstance.component.proxy.$refs.tooltip.doDestroy();});}
});onBeforeUnmount(() => {if (tooltipInstance) {// 销毁 tooltip 实例tooltipInstance.unmount();}
});
</script><style>
.tooltip-trigger {cursor: pointer;
}
</style>

2、下面通过找到一个容器来进行动态创建虚拟节点的方式

 // 假设属性值存储在变量中nextTick(() => {const attributeValue = element.id;// 构建CSS选择器字符串const selector = `[data-element-id="${attributeValue}"]`;const container = document.querySelector(selector);console.log("container=",container)// 创建一个不可见的触发元素const trigger = document.createElement('div');trigger.style.display = 'none';container.appendChild(trigger);// 创建一个el-tooltip的虚拟节点const tooltipVNode = createVNode(ElTooltip, {content: nodeHtml.value,placement: 'top',offset: 100, // 可以根据需要调整偏移量//reference: trigger, // 使用触发元素的引用visible: true, // 设置为可见});// 使用render函数将虚拟节点渲染到容器元素上render(tooltipVNode, container);     })

查看全文

http://www.lryc.cn/news/447382.html