mirror of
https://github.com/DavidHDev/vue-bits.git
synced 2026-03-07 06:29:30 -07:00
66 lines
1.7 KiB
Vue
66 lines
1.7 KiB
Vue
<template>
|
|
<Button :style="{
|
|
fontWeight: 500,
|
|
borderRadius: '0.75rem',
|
|
border: '1px solid #142216',
|
|
padding: '1rem',
|
|
position: 'fixed',
|
|
right: '2.3em',
|
|
zIndex: 98,
|
|
boxShadow: '10px 0 25px rgba(0, 0, 0, 0.2)',
|
|
transition: '0.3s ease',
|
|
opacity: visible ? 1 : 0,
|
|
bottom: visible ? '2.5em' : '1em',
|
|
cursor: visible ? 'pointer' : 'default'
|
|
}" class="back-to-top" @click="visible && scrollToTop()">
|
|
<i class="pi pi-arrow-up" style="color: #fff; font-size: 1rem;"></i>
|
|
</Button>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted, onUnmounted } from 'vue'
|
|
import { useToast } from 'primevue/usetoast'
|
|
import Button from 'primevue/button'
|
|
|
|
const toast = useToast()
|
|
const visible = ref(false)
|
|
|
|
const messages = [
|
|
'🐴 Country roads, take me home!',
|
|
'🚀 To infinity and beyond!',
|
|
'🦾 Get to the choppa!',
|
|
'🚕 Grove Street, home...',
|
|
'🐉 Fus Ro Dah!',
|
|
'🍄 The princess is in another castle!',
|
|
'🦸♂️ Avengers, assemble!',
|
|
'🗡️ It\'s dangerous to go alone! Take this.',
|
|
'📜 A wizard is never late.',
|
|
'💍 Foul Tarnished, in search of the Elden Ring!',
|
|
'🐊 See you later, alligator.',
|
|
'🔥 Dracarys!'
|
|
]
|
|
|
|
const getRandomMessage = (messages: string[]) =>
|
|
messages[Math.floor(Math.random() * messages.length)]
|
|
|
|
const scrollToTop = () => {
|
|
window.scrollTo(0, 0)
|
|
toast.add({
|
|
severity: 'secondary',
|
|
summary: getRandomMessage(messages),
|
|
life: 3000
|
|
})
|
|
}
|
|
|
|
const onScroll = () => {
|
|
visible.value = window.scrollY > 500
|
|
}
|
|
|
|
onMounted(() => {
|
|
window.addEventListener('scroll', onScroll)
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
window.removeEventListener('scroll', onScroll)
|
|
})
|
|
</script> |