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

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

包括了 指令类容更新

1import Vue from 'vue'
2
3	Vue.directive('mouse', {
4		// 初始化
5		bind: function(el, binding, vnode) {
6			
7		},
8		// 被插入
9		inserted:function(el, binding, vnode){
10			mousEnter(el,binding)
11		},
12		// 更新值
13		update:function(el, binding, vnode){
14			if(binding.value != binding.oldValue) {
15				mousEnter(el,binding)
16			}
17		},
18		unbind:function(el, binding, vnode) {
19			console.log('指令与元素解绑时调用')
20			el.removeEventListener('mouseenter',mousEnter)
21			el.removeEventListener('mouseout',mousEnter)
22		}
23	})
24// 添加鼠标事件
25function mousEnter(el,binding) {
26	// 划入
27	el.addEventListener('mouseenter',viewEnter,false)
28	// 离开
29	el.addEventListener('mouseout',viewLeve,false)
30	// 获取 当前节点 距离屏幕顶部距离
31	let bottom = el.getBoundingClientRect().bottom
32	
33	let span = document.getElementsByClassName('mose-view')[0]
34
35	
36	if(!span){
37		span = document.createElement('span')
38		span.style.visibility = 'hidden'
39		span.setAttribute('class','mose-view')
40		document.body.appendChild(span)
41	}
42	function viewEnter(e) {
43		span.innerHTML = binding.value
44		let x = e.offsetX
45		let y = e.offsetY
46		
47		span.style.top = bottom + 2 + 'px'
48		span.style.left = x + 'px'
49		span.style.visibility = 'visible'
50		span.style.opacity = '1'
51		
52	}
53	
54	function viewLeve() {
55		span.style.visibility = 'hidden'
56		span.style.opacity = '0'
57	}
58}
59
60
61

效果如下