40 lines
931 B
Vue
40 lines
931 B
Vue
<script setup lang="ts">
|
|
interface Props {
|
|
parentRef: HTMLElement | null
|
|
isShowTopBtn: boolean
|
|
isShowSnsBtn: boolean
|
|
}
|
|
|
|
const { height: viewportH } = useWindowSize()
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
isShowTopBtn: false,
|
|
isShowSnsBtn: false,
|
|
})
|
|
|
|
const parentEl = toRef(props, 'parentRef')
|
|
const { bottom: parentBottom } = useElementBounding(parentEl)
|
|
|
|
const pinToParent = computed(() => {
|
|
if (!parentBottom.value) return false
|
|
return parentBottom.value <= viewportH.value
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div :class="['utile-container', { 'is-fixed': pinToParent }]">
|
|
<AtomsButtonScrollTop v-if="props.isShowTopBtn" />
|
|
<!-- <AtomsButtonSns v-if="props.isShowSnsBtn" /> -->
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.utile-container {
|
|
@apply fixed flex flex-col
|
|
bottom-[12px] right-[12px] gap-2 md:bottom-[40px] md:right-[40px] md:gap-3;
|
|
}
|
|
.utile-container.is-fixed {
|
|
@apply absolute;
|
|
}
|
|
</style>
|