Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commite1f39f9

Browse files
committed
feat(CPopover, CTooltip): add the delay property to enable the delay for the hide and show animations
1 parentecbd65e commite1f39f9

File tree

2 files changed

+60
-14
lines changed

2 files changed

+60
-14
lines changed

‎packages/coreui-vue/src/components/popover/CPopover.ts‎

Lines changed: 30 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,15 @@ const CPopover = defineComponent({
2121
* Content for your component. If you want to pass non-string value please use dedicated slot `<template #content>...</template>`
2222
*/
2323
content:String,
24+
/**
25+
* The delay for displaying and hiding the popover (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: `{ 'show': 500, 'hide': 100 }`.
26+
*
27+
*@since 4.9.0-beta.2
28+
*/
29+
delay:{
30+
type:[Number,Object]asPropType<number|{show:number;hide:number}>,
31+
default:0,
32+
},
2433
/**
2534
* Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference.
2635
*
@@ -98,6 +107,8 @@ const CPopover = defineComponent({
98107
constpopoverRef=ref()
99108
constpopper=ref()
100109
constvisible=ref(props.visible)
110+
constdelay=
111+
typeofprops.delay==='number' ?{show:props.delay,hide:props.delay} :props.delay
101112

102113
consthandleEnter=(el:RendererElement,done:()=>void)=>{
103114
emit('show')
@@ -115,9 +126,18 @@ const CPopover = defineComponent({
115126
},elasHTMLElement)
116127
}
117128

118-
consthandleToggle=(event:Event)=>{
129+
consttoggleVisible=(event:Event,_visible:boolean)=>{
119130
togglerRef.value=event.target
120-
visible.value=!visible.value
131+
if(_visible){
132+
setTimeout(()=>{
133+
visible.value=true
134+
},delay.show)
135+
return
136+
}
137+
138+
setTimeout(()=>{
139+
visible.value=false
140+
},delay.hide)
121141
}
122142

123143
constinitPopper=()=>{
@@ -208,11 +228,14 @@ const CPopover = defineComponent({
208228
slots.toggler&&
209229
slots.toggler({
210230
on:{
211-
click:(event:Event)=>props.trigger.includes('click')&&handleToggle(event),
212-
blur:(event:Event)=>props.trigger.includes('focus')&&handleToggle(event),
213-
focus:(event:Event)=>props.trigger.includes('focus')&&handleToggle(event),
214-
mouseenter:(event:Event)=>props.trigger.includes('hover')&&handleToggle(event),
215-
mouseleave:(event:Event)=>props.trigger.includes('hover')&&handleToggle(event),
231+
click:(event:Event)=>
232+
props.trigger.includes('click')&&toggleVisible(event,!visible.value),
233+
blur:(event:Event)=>props.trigger.includes('focus')&&toggleVisible(event,false),
234+
focus:(event:Event)=>props.trigger.includes('focus')&&toggleVisible(event,true),
235+
mouseenter:(event:Event)=>
236+
props.trigger.includes('hover')&&toggleVisible(event,true),
237+
mouseleave:(event:Event)=>
238+
props.trigger.includes('hover')&&toggleVisible(event,false),
216239
},
217240
}),
218241
]

‎packages/coreui-vue/src/components/tooltip/CTooltip.ts‎

Lines changed: 30 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,15 @@ const CTooltip = defineComponent({
2121
* Content for your component. If you want to pass non-string value please use dedicated slot `<template #content>...</template>`
2222
*/
2323
content:String,
24+
/**
25+
* The delay for displaying and hiding the popover (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: `{ 'show': 500, 'hide': 100 }`.
26+
*
27+
*@since 4.9.0-beta.2
28+
*/
29+
delay:{
30+
type:[Number,Object]asPropType<number|{show:number;hide:number}>,
31+
default:0,
32+
},
2433
/**
2534
* Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference.
2635
*
@@ -94,6 +103,8 @@ const CTooltip = defineComponent({
94103
consttooltipRef=ref()
95104
constpopper=ref()
96105
constvisible=ref(props.visible)
106+
constdelay=
107+
typeofprops.delay==='number' ?{show:props.delay,hide:props.delay} :props.delay
97108

98109
consthandleEnter=(el:RendererElement,done:()=>void)=>{
99110
emit('show')
@@ -111,9 +122,18 @@ const CTooltip = defineComponent({
111122
},elasHTMLElement)
112123
}
113124

114-
consthandleToggle=(event:Event)=>{
125+
consttoggleVisible=(event:Event,_visible:boolean)=>{
115126
togglerRef.value=event.target
116-
visible.value=!visible.value
127+
if(_visible){
128+
setTimeout(()=>{
129+
visible.value=true
130+
},delay.show)
131+
return
132+
}
133+
134+
setTimeout(()=>{
135+
visible.value=false
136+
},delay.hide)
117137
}
118138

119139
constinitPopper=()=>{
@@ -196,11 +216,14 @@ const CTooltip = defineComponent({
196216
slots.toggler&&
197217
slots.toggler({
198218
on:{
199-
click:(event:Event)=>props.trigger.includes('click')&&handleToggle(event),
200-
blur:(event:Event)=>props.trigger.includes('focus')&&handleToggle(event),
201-
focus:(event:Event)=>props.trigger.includes('focus')&&handleToggle(event),
202-
mouseenter:(event:Event)=>props.trigger.includes('hover')&&handleToggle(event),
203-
mouseleave:(event:Event)=>props.trigger.includes('hover')&&handleToggle(event),
219+
click:(event:Event)=>
220+
props.trigger.includes('click')&&toggleVisible(event,!visible.value),
221+
blur:(event:Event)=>props.trigger.includes('focus')&&toggleVisible(event,false),
222+
focus:(event:Event)=>props.trigger.includes('focus')&&toggleVisible(event,true),
223+
mouseenter:(event:Event)=>
224+
props.trigger.includes('hover')&&toggleVisible(event,true),
225+
mouseleave:(event:Event)=>
226+
props.trigger.includes('hover')&&toggleVisible(event,false),
204227
},
205228
}),
206229
]

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp