45 lines
796 B
Vue
45 lines
796 B
Vue
|
<template>
|
||
|
|
<section :class="{ 'active-section': isActive }" ref="section">
|
||
|
|
<slot />
|
||
|
|
</section>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { watch, useTemplateRef } from 'vue'
|
||
|
|
|
||
|
|
const props = defineProps<{ isActive: boolean }>()
|
||
|
|
|
||
|
|
const sectionRef = useTemplateRef('section')
|
||
|
|
|
||
|
|
// плавная прокрутка при активации секции
|
||
|
|
watch(
|
||
|
|
() => props.isActive,
|
||
|
|
(isActive) => {
|
||
|
|
if (isActive) {
|
||
|
|
sectionRef.value?.scrollIntoView({ behavior: 'smooth' })
|
||
|
|
}
|
||
|
|
},
|
||
|
|
)
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
section {
|
||
|
|
opacity: 0.1;
|
||
|
|
transition: opacity 0.5s;
|
||
|
|
pointer-events: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
section {
|
||
|
|
border-top: 1px solid silver;
|
||
|
|
padding-top: 1em;
|
||
|
|
}
|
||
|
|
section:first-of-type {
|
||
|
|
border-top: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
section.active-section {
|
||
|
|
opacity: 1;
|
||
|
|
pointer-events: all;
|
||
|
|
}
|
||
|
|
</style>
|