vue 自定义指令-----文字提示气泡

最新推荐文章于 2025-05-29 11:29:12 发布

海龟先生plus

最新推荐文章于 2025-05-29 11:29:12 发布

阅读量1.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： html vue 文章标签： vue vue.js

本文链接：https://blog.youkuaiyun.com/qq_45219069/article/details/108363275

vue 同时被 2 个专栏收录

27 篇文章

订阅专栏

html

7 篇文章

订阅专栏

本文介绍如何在Vue中创建一个自定义指令，实现鼠标悬停时显示提示文字的效果。通过绑定、插入、更新和解绑等生命周期钩子，详细展示了如何监听鼠标事件并动态更新提示信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现一个简单的鼠标滑过出现文字提示。啥也不说上代码

包括了指令类容更新

import Vue from 'vue'

	Vue.directive('mouse', {
		// 初始化
		bind: function(el, binding, vnode) {
			
		},
		// 被插入
		inserted:function(el, binding, vnode){
			mousEnter(el,binding)
		},
		// 更新值
		update:function(el, binding, vnode){
			if(binding.value != binding.oldValue) {
				mousEnter(el,binding)
			}
		},
		unbind:function(el, binding, vnode) {
			console.log('指令与元素解绑时调用')
			el.removeEventListener('mouseenter',mousEnter)
			el.removeEventListener('mouseout',mousEnter)
		}
	})
// 添加鼠标事件
function mousEnter(el,binding) {
	// 划入
	el.addEventListener('mouseenter',viewEnter,false)
	// 离开
	el.addEventListener('mouseout',viewLeve,false)
	// 获取 当前节点 距离屏幕顶部距离
	let bottom = el.getBoundingClientRect().bottom
	
	let span = document.getElementsByClassName('mose-view')[0]

	
	if(!span){
		span = document.createElement('span')
		span.style.visibility = 'hidden'
		span.setAttribute('class','mose-view')
		document.body.appendChild(span)
	}
	function viewEnter(e) {
		span.innerHTML = binding.value
		let x = e.offsetX
		let y = e.offsetY
		
		span.style.top = bottom + 2 + 'px'
		span.style.left = x + 'px'
		span.style.visibility = 'visible'
		span.style.opacity = '1'
		
	}
	
	function viewLeve() {
		span.style.visibility = 'hidden'
		span.style.opacity = '0'
	}
}

效果如下

在这里插入图片描述