diff --git a/packages/vuetify/src/components/VSnackbar/VSnackbar.tsx b/packages/vuetify/src/components/VSnackbar/VSnackbar.tsx index df16e6fda2d..8192bf0e2e3 100644 --- a/packages/vuetify/src/components/VSnackbar/VSnackbar.tsx +++ b/packages/vuetify/src/components/VSnackbar/VSnackbar.tsx @@ -107,6 +107,7 @@ export const VSnackbar = genericComponent()({ const overlay = ref() const timerRef = ref() const isHovering = shallowRef(false) + const startY = shallowRef(0) watch(isActive, startTimeout) watch(() => props.timeout, startTimeout) @@ -147,6 +148,16 @@ export const VSnackbar = genericComponent()({ startTimeout() } + function onTouchstart (event: TouchEvent) { + startY.value = event.touches[0].clientY + } + + function onTouchend (event: TouchEvent) { + if (Math.abs(startY.value - event.changedTouches[0].clientY) > 50) { + isActive.value = false + } + } + const locationClasses = computed(() => { return props.location.split(' ').reduce((acc, loc) => { acc[`v-snackbar--${loc}`] = true @@ -199,6 +210,8 @@ export const VSnackbar = genericComponent()({ scrim={ false } scrollStrategy="none" _disableGlobalStack + onTouchstart={ onTouchstart } + onTouchend={ onTouchend } { ...scopeId } v-slots={{ activator: slots.activator }} >