vue3 项目 + element plus 实现 tips 点击后不显示。鼠标移入延迟显示（自定义时间）

需求：
结合element plus 中tooltip 实现 tips。
鼠标移入 1.5秒后显示，鼠标移出不显示，鼠标点击不显示

代码：

<el-tooltip
      content="消息通知"
      :virtual-ref="filledRef"
      v-model:visible="visible"
      virtual-triggering
     >
 </el-tooltip>
         //virtual-triggering	用来标识虚拟触发是否被启用
         //virtual-ref	表明 tooltip 绑定到哪个 html 元素
<div @mouseenter="vMouseenter()" @mouseleave="vMouseleave()" ref="filledRef" @click="visibleClick()">
     点击展示
</div>
import tipsUtils from '@/utils/toolTips'
import { defineComponent, Ref, ref } from 'vue';

export default defineComponent({
	setup(){
		const filledRef = ref(null)
    	const visible = ref(false) //默认设置不显示
    	const { vMouseenter, vMouseleave, visibleClick } = tipsUtils(visible)
    	//调用封装的事件
    	return {
      		filledRef,
      		visible,
      		vMouseenter,
      		vMouseleave,
      		visibleClick
    	};
	}
})

封装的事件
‘@/utils/toolTips’

import { Ref } from 'vue';
export default function tipsUtils(visible: Ref<boolean>) {
  let conSetTimeout: NodeJS.Timer | null = null;
  //鼠标移入
  const vMouseenter = () => {
    conSetTimeout && clearTimeout(conSetTimeout);
    conSetTimeout = setTimeout(function () {
      visible.value = true
      //通过改变 visible 去控制显示或者隐藏
    }, 1500);//通过延时器控制多久后显示
  }
  //鼠标移出
  const vMouseleave = () => {
    conSetTimeout && clearTimeout(conSetTimeout);
    //清除延时器
    clearTimeout(Number(conSetTimeout));
    visible.value = false
  }
  //鼠标点击
  const visibleClick = () => {
    conSetTimeout && clearTimeout(conSetTimeout);
    visible.value = false
  }
  return {
    vMouseenter,
    vMouseleave,
    visibleClick
  }
}