diff --git a/docs/content/2.components/notification.md b/docs/content/2.components/notification.md index c21c6c8a..e7569967 100644 --- a/docs/content/2.components/notification.md +++ b/docs/content/2.components/notification.md @@ -137,9 +137,9 @@ excludedProps: ### Timeout -Use the `timeout` prop to configure how long the Notification will remain. The default value is `5000`, set it to `0` to disable the timeout. +Use the `timeout` prop to configure how long the Notification will remain. The default value is `5000`, set it to `0` to disable the timeout. The `pauseTimeoutOnHover` prop (`true` by default) controls whether hovering the notification should pause the timeout. -You will see a progress bar at the bottom of the Notification which will indicate the remaining time. When hovering the Notification, the progress bar will be paused. +You will see a progress bar at the bottom of the Notification which will indicate the remaining time. When hovering the Notification, the progress bar will be paused if `pauseTimeoutOnHover` is enabled; otherwise, it won't stop. ::component-card --- @@ -149,6 +149,7 @@ baseProps: description: 'This is a notification.' props: timeout: 60000 + pauseTimeoutOnHover: true --- :: diff --git a/src/runtime/components/overlays/Notification.vue b/src/runtime/components/overlays/Notification.vue index d974101c..9b026d29 100644 --- a/src/runtime/components/overlays/Notification.vue +++ b/src/runtime/components/overlays/Notification.vue @@ -117,6 +117,10 @@ export default defineComponent({ ui: { type: Object as PropType & { strategy?: Strategy }>, default: () => ({}) + }, + pauseTimeoutOnHover: { + type: Boolean, + default: true } }, emits: ['close'], @@ -157,13 +161,13 @@ export default defineComponent({ }) function onMouseover() { - if (timer) { + if (props.pauseTimeoutOnHover && timer) { timer.pause() } } function onMouseleave() { - if (timer) { + if (props.pauseTimeoutOnHover && timer) { timer.resume() } }