超出部分使用浮框的指令
el-menu 超出部分，鼠标浮入之后，小黑浮框展示菜单名的全部内容
# 1、代码如下
<!-- 加上v-tip 指令 -->
<span class="ml10 title_tip" slot="title" v-tip :data-txt="item.title">{{item.title}}</span>
1
2
2
<!-- css样式 -->
.site-tips{
position: absolute;
text-align: center;
max-width:400px;
max-height: 400px;
overflow: auto;
background: rgba(0, 0 , 0, .6);
color:#fff;
border-radius:5px;
padding:10px;
display:inline-block;
font-size:12px;
z-index:19999
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
directives:{
'tip':{
inserted(el, binding) {
let $div;
el.addEventListener('mouseover', e => {
const curStyle = window.getComputedStyle(el, ''); // 获取当前元素的style
const textSpan = document.createElement('span'); // 创建一个容器来记录文字的width
// 设置新容器的字体样式，确保与当前需要隐藏的样式相同
textSpan.style.fontSize = curStyle.fontSize;
textSpan.style.fontWeight = curStyle.fontWeight;
textSpan.style.fontFamily = curStyle.fontFamily;
// 将容器插入body，如果不插入，offsetWidth为0
document.body.appendChild(textSpan);
// 设置新容器的文字
textSpan.innerHTML = el.innerText;
//el 需指定宽度
if (textSpan.offsetWidth >= el.offsetWidth) {
let text = e.target.getAttribute('data-txt') || el.innerText,
top = e.clientY - 40,
left = e.target.offsetWidth/3;
$div = document.createElement('div');
$div.setAttribute('class', 'site-tips');
$div.setAttribute('style', 'top:' + top + 'px;left:' + left + 'px');
$div.innerHTML = text;
document.body.appendChild($div);
}
// 移除刚刚创建的记录文字的容器
document.body.removeChild(textSpan);
})
el.addEventListener('mouseout', e => {
if($div) {
try {
document.body.removeChild($div);
} catch(e) {
}
}
})
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
全局指令使用
Vue.directive('tip', {
inserted(el, binding) {
//将上面inserted的内容挪到下面来
}
}
1
2
3
4
5
2
3
4
5
上次更新: 2021/07/22, 09:07:42