Skip to content

Commit f9c2069

Browse files
asdlml6asdlml6
committed
fix: 修复子元素溢出隐藏问题、完成tooltip所有功能、去掉分号
1 parent 1070a8d commit f9c2069

File tree

4 files changed

+132
-103
lines changed

4 files changed

+132
-103
lines changed

‎devui/tooltip/src/tooltip.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
.d-tooltip {
22
box-sizing: border-box;
3-
position: relative;
3+
// position: relative;
44
.tooltip {
55
box-sizing: border-box;
66
position: absolute;

‎devui/tooltip/src/tooltip.tsx‎

Lines changed: 73 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import './tooltip.scss'
2-
32
import { defineComponent, reactive, ref, watch, onMounted, getCurrentInstance, onBeforeUnmount, renderSlot, useSlots} from 'vue'
43
import { tooltipProps } from './tooltip-types'
54
import EventListener from '../utils/EventListener'
@@ -16,133 +15,138 @@ export default defineComponent({
1615
let position = reactive({
1716
left: 0,
1817
top: 0
19-
});
20-
let show = ref(false);
18+
})
19+
let show = ref(false)
2120

2221
// slotElement元素的ref
23-
let slotElement = ref(null);
22+
let slotElement = ref(null)
2423
// tooltip元素的引用
25-
let tooltip = ref(null);
24+
let tooltip = ref(null)
2625
// arrow元素的引用
27-
let arrow = ref(null);
26+
let arrow = ref(null)
2827
// tooltipcontent的引用
29-
let tooltipcontent = ref(null);
28+
let tooltipcontent = ref(null)
3029

31-
let enterEvent;
32-
let leaveEvent;
30+
let enterEvent
31+
let leaveEvent
3332

3433
const arrowStyle = (attr, value)=>{
35-
arrow.value.style[attr] = value;
36-
};
34+
arrow.value.style[attr] = value
35+
}
3736

3837
// 延迟显示
39-
const delayShowTrue = function (fn, delay){
40-
let start;
38+
const delayShowTrue = function (fn, delay=props.mouseEnterDelay){
39+
let start
4140
if (parseInt(delay)>=0){
4241
return function (){
4342
if (start){
44-
clearTimeout(start);
43+
clearTimeout(start)
4544
}
46-
start = setTimeout(fn, parseInt(delay));
47-
};
45+
start = setTimeout(fn, parseInt(delay))
46+
}
4847
} else{
49-
console.error('the value of delay is bigger than 0 and the type of delay must be string!');
48+
console.error('the value of delay is bigger than 0 and the type of delay must be string!')
5049
return
5150
}
52-
};
51+
}
5352
// 延迟消失
54-
const delayShowFalse = function (fn, delay){
53+
const delayShowFalse = function (fn, delay=props.mouseLeaveDelay){
5554
if (show.value && parseInt(delay) >= 0){
56-
setTimeout(fn, parseInt(delay));
55+
setTimeout(fn, parseInt(delay))
5756
}
58-
};
57+
}
5958

6059
onMounted(()=>{
6160
// 组件初始化不渲染tooltip
6261
if (!show.value){
63-
tooltip.value.style.opacity = '0';
64-
};
62+
tooltip.value.style.opacity = '0'
63+
}
6564

6665
// 注册鼠标引入事件
67-
enterEvent = EventListener.listen(slotElement.value.children[0], 'mouseenter', function (){
68-
show.value = true;
69-
});
66+
/*enterEvent = EventListener.listen(slotElement.value.children[0], 'mouseenter', function (){
67+
show.value = true
68+
})*/
69+
enterEvent = EventListener.listen(slotElement.value.children[0], 'mouseenter', delayShowTrue(function (){
70+
show.value = true
71+
}, props.mouseEnterDelay))
7072

7173
// 注册鼠标移除事件
7274
leaveEvent = EventListener.listen(slotElement.value.children[0], 'mouseleave', function (){
73-
show.value = false;
74-
});
75-
});
75+
// show.value = false
76+
setTimeout(function (){
77+
show.value = false;
78+
}, props.mouseLeaveDelay)
79+
})
80+
})
7681

7782
watch(show, function (newValue, oldValue){
7883
if (newValue){
7984
// 鼠标悬浮为true，显示提示框
80-
tooltip.value.style.opacity = '1';
81-
tooltip.value.style.zIndex = '500';
82-
arrow.value.style.border = '10px solid transparent';
85+
tooltip.value.style.opacity = '1'
86+
tooltip.value.style.zIndex = '999'
87+
arrow.value.style.border = '10px solid transparent'
8388
// 具体的判定规则
8489
switch (props.position){
8590
case 'top':
8691
// 设置 tooltip 内容的样式
87-
position.left = slotElement.value.children[0].offsetLeft - tooltip.value.offsetWidth / 2 + slotElement.value.children[0].offsetWidth / 2;
88-
position.top = slotElement.value.children[0].offsetTop - 10 - tooltipcontent.value.offsetHeight;
92+
position.left = slotElement.value.children[0].offsetLeft - tooltip.value.offsetWidth / 2 + slotElement.value.children[0].offsetWidth / 2
93+
position.top = slotElement.value.children[0].offsetTop - 10 - tooltipcontent.value.offsetHeight
8994
// 设置箭头的样式
90-
arrowStyle('borderTop', '10px solid cornflowerblue');
91-
arrow.value.style.top = `${tooltipcontent.value.offsetHeight}px`;
92-
arrow.value.style.left = `${tooltipcontent.value.offsetWidth/2 - 5}px`;
93-
break;
95+
arrowStyle('borderTop', '10px solid cornflowerblue')
96+
arrow.value.style.top = `${tooltipcontent.value.offsetHeight}px`
97+
arrow.value.style.left = `${tooltipcontent.value.offsetWidth/2 - 5}px`
98+
break
9499

95100
case 'right':
96101
// 设置tooltip 内容的样式
97-
position.left = slotElement.value.children[0].offsetLeft + slotElement.value.children[0].offsetWidth;
98-
position.top = slotElement.value.children[0].offsetTop + slotElement.value.children[0].offsetHeight/2 - tooltipcontent.value.offsetHeight/2;
102+
position.left = slotElement.value.children[0].offsetLeft + slotElement.value.children[0].offsetWidth
103+
position.top = slotElement.value.children[0].offsetTop + slotElement.value.children[0].offsetHeight/2 - tooltipcontent.value.offsetHeight/2
99104
// 设置箭头的样式
100-
arrowStyle('borderRight', '10px solid cornflowerblue');
101-
arrow.value.style.top = `${tooltipcontent.value.offsetHeight/2 - 10}px`;
102-
arrow.value.style.left = '-10px';
103-
break;
105+
arrowStyle('borderRight', '10px solid cornflowerblue')
106+
arrow.value.style.top = `${tooltipcontent.value.offsetHeight/2 - 10}px`
107+
arrow.value.style.left = '-10px'
108+
break
104109

105110
case 'bottom':
106111
// 设置tooltip的样式
107-
position.top = slotElement.value.children[0].offsetHeight + slotElement.value.children[0].offsetTop + 10;
108-
position.left = slotElement.value.children[0].offsetLeft + slotElement.value.children[0].offsetWidth/2 - tooltipcontent.value.offsetWidth/2;
112+
position.top = slotElement.value.children[0].offsetHeight + slotElement.value.children[0].offsetTop + 10
113+
position.left = slotElement.value.children[0].offsetLeft + slotElement.value.children[0].offsetWidth/2 - tooltipcontent.value.offsetWidth/2
109114
// 设置arrow.value的样式
110115
arrowStyle('borderBottom', '10px solid cornflowerblue')
111-
arrow.value.style.top = '-20px';
112-
arrow.value.style.left = `${tooltipcontent.value.offsetWidth/2 - 10}px`;
113-
break;
116+
arrow.value.style.top = '-20px'
117+
arrow.value.style.left = `${tooltipcontent.value.offsetWidth/2 - 10}px`
118+
break
114119

115120
case 'left':
116-
position.top = slotElement.value.children[0].offsetTop + slotElement.value.children[0].offsetHeight/2 - tooltipcontent.value.offsetHeight/2;
117-
position.left = slotElement.value.children[0].offsetLeft - 20 - tooltipcontent.value.offsetWidth;
121+
position.top = slotElement.value.children[0].offsetTop + slotElement.value.children[0].offsetHeight/2 - tooltipcontent.value.offsetHeight/2
122+
position.left = slotElement.value.children[0].offsetLeft - 20 - tooltipcontent.value.offsetWidth
118123
// 设置arrow.value的样式
119-
arrowStyle('borderLeft', '10px solid cornflowerblue');
124+
arrowStyle('borderLeft', '10px solid cornflowerblue')
120125
arrow.value.style.left = `${tooltipcontent.value.offsetWidth + 10}px`
121-
arrow.value.style.top = `${tooltipcontent.value.offsetHeight/2 - 10}px`;
122-
break;
126+
arrow.value.style.top = `${tooltipcontent.value.offsetHeight/2 - 10}px`
127+
break
123128

124129
default:
125-
console.error('The attribute position value is wrong, the value is one of top、right、left、bottom');
126-
break;
127-
};
128-
129-
tooltip.value.style.top = position.top + 'px';
130-
tooltip.value.style.left = position.left + 'px';
130+
console.error('The attribute position value is wrong, the value is one of top、right、left、bottom')
131+
break
132+
}
133+
tooltip.value.style.top = position.top + 'px'
134+
tooltip.value.style.left = position.left + 'px'
131135
} else {
132-
position.top = 0;
133-
position.left = 0;
136+
position.top = 0
137+
position.left = 0
134138
// 鼠标移走为false，隐藏提示框
135-
tooltip.value.style.opacity = '0';
139+
tooltip.value.style.opacity = '0'
136140
}
137-
});
141+
})
138142

139143
onBeforeUnmount (()=>{
140-
enterEvent.remove();
141-
leaveEvent.remove();
142-
});
144+
enterEvent.remove()
145+
leaveEvent.remove()
146+
})
143147

144148
return ()=>{
145-
const defaultSlot = renderSlot(useSlots(), 'default');
149+
const defaultSlot = renderSlot(useSlots(), 'default')
146150
return (
147151
<div class="d-tooltip">
148152
<div class='slotElement' ref={slotElement}>
@@ -158,4 +162,4 @@ export default defineComponent({
158162
)
159163
}
160164
}
161-
});
165+
})

‎devui/tooltip/utils/EventListener.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
const EventListener = {
22
listen: function (target, eventType, callback) {
3-
console.log('target:', target);
4-
console.log('eventType:', eventType);
53
if (target.addEventListener){
64
target.addEventListener(eventType, callback, false);
75
return {

‎sites/components/tooltip/index.md‎

Lines changed: 58 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@
88

99
### 基本用法
1010

11+
:::demo我们可以通过控制属性`position`来控制tooltip的显示位置，`position`取值有4个，分别是`top`、`right`、`bottom`、`left`。通过属性`content`控制tooltip提示框的内容。
12+
1113
<d-tooltip position='top' content='I am a HTML Element!'><button style="height: 50px; width: 60px; background: cornflowerblue; margin-top: 30px;">上面</button></d-tooltip>
1214

1315
<d-tooltip position='right' content='I am a HTML Element!'><button style="height: 50px; width: 60px; background: cornflowerblue; margin-top: 30px;">右面</button></d-tooltip>
@@ -16,48 +18,73 @@
1618

1719
<d-tooltip position='left' content='I am a HTML Element!'><button style="height: 50px; width: 60px; background: cornflowerblue; margin-top: 30px;">左面</button></d-tooltip>
1820

19-
```html
20-
<section>
21-
<d-tooltip position='top' content='I am a HTML Element!'>
22-
<button>上面</button>
21+
```vue
22+
<template>
23+
<d-tooltip position='top' content='I am a HTML Element!'>
24+
<div class='example'>上面</div>
2325
</d-tooltip>
2426
<d-tooltip position='bottom' content='I am a HTML Element!'>
25-
<button>下面</button>
27+
<div class='example'>下面</div>
2628
</d-tooltip>
2729
<d-tooltip position='left' content='I am a HTML Element!'>
28-
<button>左面</button>
30+
<div class='example'>左面</div>
2931
</d-tooltip>
3032
<d-tooltip position='right' content='I am a HTML Element!'>
31-
<button>右面</button>
33+
<div class='example'>右面</div>
3234
</d-tooltip>
33-
</section>
35+
</template>
3436
```
3537

36-
```scss
37-
.d-tooltip {
38-
box-sizing: border-box;
39-
position: relative;
40-
.tooltip {
41-
box-sizing: border-box;
42-
position: absolute;
43-
width: fit-content;
44-
transition: all 0.5s;
45-
.arrow {
46-
width: 0;
47-
height: 0;
48-
position: absolute;
49-
}
50-
.tooltipcontent {
51-
box-sizing: border-box;
52-
padding: 10px;
53-
margin-left: 10px;
54-
width: fit-content;
55-
background-color: rgb(51, 51, 51);
56-
color: #fff;
57-
}
58-
}
38+
```css
39+
.example {
40+
height: 50px;
41+
width: 60px;
42+
background: cornflowerblue;
43+
margin-top: 30px;
5944
}
6045
```
46+
:::
6147

6248
### 延时触发
6349

50+
鼠标移入的时长超过 [mouseEnterDelay] 毫秒之后才会触发，以防止用户无意划过导致的闪现，默认值是150毫秒；鼠标移出之后，再经过[mouseLeaveDelay]毫秒后，toolTip组件才会隐藏，默认值是100毫秒。
51+
52+
:::demo 通过`mouseEnterDelay`属性来控制tooltip提示框的`延迟显示`（默认是100ms），`mouseLeaveDelay`属性来控制tooltip提示框的`延迟消失`（默认是150ms）
53+
<d-tooltip position='top' content=' Mouse enter 500ms later.' mouseEnterDelay='500'><div style='width: fit-content; height: 30px; background: cornflowerblue;padding: 10px;display:flex; justify-content: center; align-items: center;color: #fff;border-radius: 3px;'>MouseEnter delay 500ms</div></d-tooltip>
54+
55+
<d-tooltip position='top' content=' Mouse leave 1000ms later.' mouseLeaveDelay='1000'><div style='width: fit-content; height: 30px; padding: 10px; display: flex; justify-content: center; align-items: center; color: #252b3a; background: #fff;border-radius: 5px;border: 1px solid rgb(173, 176, 184); margin-top: 30px;'>MouseLeave delay 1000ms</div></d-tooltip>
56+
```vue
57+
<template>
58+
<d-tooltip position='top' content='Mouse enter 500ms later.' mouseEnterDelay='500'>
59+
<div class='customCss'>MouseEnter delay 500ms</div>
60+
</d-tooltip>
61+
<br>
62+
<d-tooltip position='top' content='Mouse leave 1000ms later.' mouseLeaveDelay='1000'>
63+
<div class='customCss-leave'>MouseLeave delay 1000ms</div>
64+
</d-tooltip>
65+
</template>
66+
```
67+
68+
```css
69+
.customCss {
70+
width: fit-content;
71+
height: 30px;
72+
padding: 10px;
73+
display: flex;
74+
justify-content: center;
75+
align-items: center;
76+
color: #fff;
77+
background: cornflowerblue;
78+
}
79+
.customCss-leave {
80+
width: fit-content;
81+
height: 30px;
82+
padding: 10px;
83+
display: flex;
84+
justify-content: center;
85+
align-items: center;
86+
color: #252b3a;
87+
background: #fff;
88+
}
89+
```
90+
:::

0 commit comments

Comments
 (0)