mirror of
https://github.com/DavidHDev/vue-bits.git
synced 2026-03-07 06:29:30 -07:00
70 lines
1.7 KiB
Vue
70 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>
|