51 lines
1.0 KiB
Vue
51 lines
1.0 KiB
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; isNextActiveSection: boolean }>()
|
|
|
|
const sectionRef = useTemplateRef('section')
|
|
|
|
// плавная прокрутка при активации секции
|
|
watch(
|
|
() => sectionRef.value && props.isNextActiveSection,
|
|
(isNextActiveSection) => {
|
|
if (isNextActiveSection) {
|
|
const input = sectionRef.value?.querySelector('input[type="text"]')
|
|
if (input instanceof HTMLInputElement) {
|
|
input.focus()
|
|
}
|
|
|
|
sectionRef.value?.scrollIntoView({ behavior: 'smooth' })
|
|
}
|
|
},
|
|
{ immediate: true },
|
|
)
|
|
</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>
|