LINUX.ORG.RU

История изменений

Исправление rtxtxtrx, (текущая версия) :

У меня в профиле сайт. App.vue там выглядит так (как раз части сайта как компоненты, они там вытянуты просто на всю высоту рабочей области экрана):

<template>
  <v-app>
    <NavBar :menu-items="menuSections" :current-id="currentId" />
    <v-main>
      <Home id="home" />
      <AboutUs id="aboutus" />
      <Services id="services" />
      <Portfolio id="portfolio" />
      <Contacts id="contacts" />
    </v-main>
  </v-app>
</template>

<script setup>
import NavBar from '@/components/NavBar.vue'
import { onBeforeUnmount, onMounted, ref } from 'vue'
import config from './config'
import eventBus from './event-bus'
import Contacts from './sections/Contacts.vue'
import Home from './sections/Home.vue'
import Portfolio from './sections/Portfolio.vue'
//import Partners from './sections/Partners.vue'
import AboutUs from './sections/AboutUs.vue'
import Services from './sections/Services.vue'

// если переменная передается в компонет, то ее тоже нужно объявить как ref
const menuSections = ref([
  { id: 'home', title: 'Главная' },
  { id: 'aboutus', title: 'О нас' },
  { id: 'services', title: 'Услуги и цены' },
  { id: 'portfolio', title: 'Примеры работ' },
  { id: 'contacts', title: 'Контакты' }
])

const currentId = ref(null)
const observer = ref(null)

onMounted(async () => {
  scrollToSection(location.hash.slice(1) || 'home')
  initObserver()
  eventBus.on('scrollToSection', scrollToSection)
})

onBeforeUnmount(() => {
  observer.value.disconnect()
  eventBus.off('scrollToSection')
})

const activateSection = (sectionId) => {
  const section = menuSections.value.find((x) => x.id === sectionId)
  if (section) {
    currentId.value = sectionId
    history.pushState(null, '', `#${sectionId}`)
    document.title = `${section.title} | ${config.siteName}`
  }
}

const scrollToSection = (sectionId) => {
  document.getElementById(sectionId)?.scrollIntoView({ behavior: 'smooth' })
}

const initObserver = () => {
  observer.value = new IntersectionObserver(
    (entries) => {
      const entry = entries.findLast(({ isIntersecting }) => isIntersecting)
      if (entry) {
        activateSection(entry.target.id)
      }
    },
    { threshold: 0.5 }
  )
  menuSections.value.forEach(({ id }) => {
    const element = document.getElementById(id)
    if (element) {
      observer.value.observe(element)
    } else {
      console.warn(`element not found: #${id}`)
    }
  })
}
</script>

<iframe> никто сейчас не использует ну кроме как для извращений каких-то, когда тебе нужно сайт на Wordpress подружить с API и тп, те для обмена данными через Window.postMessage.

Исходная версия rtxtxtrx, :

У меня в профиле сайт. App.vue там выглядит так:

<template>
  <v-app>
    <NavBar :menu-items="menuSections" :current-id="currentId" />
    <v-main>
      <Home id="home" />
      <AboutUs id="aboutus" />
      <Services id="services" />
      <Portfolio id="portfolio" />
      <Contacts id="contacts" />
    </v-main>
  </v-app>
</template>

<script setup>
import NavBar from '@/components/NavBar.vue'
import { onBeforeUnmount, onMounted, ref } from 'vue'
import config from './config'
import eventBus from './event-bus'
import Contacts from './sections/Contacts.vue'
import Home from './sections/Home.vue'
import Portfolio from './sections/Portfolio.vue'
//import Partners from './sections/Partners.vue'
import AboutUs from './sections/AboutUs.vue'
import Services from './sections/Services.vue'

// если переменная передается в компонет, то ее тоже нужно объявить как ref
const menuSections = ref([
  { id: 'home', title: 'Главная' },
  { id: 'aboutus', title: 'О нас' },
  { id: 'services', title: 'Услуги и цены' },
  { id: 'portfolio', title: 'Примеры работ' },
  { id: 'contacts', title: 'Контакты' }
])

const currentId = ref(null)
const observer = ref(null)

onMounted(async () => {
  scrollToSection(location.hash.slice(1) || 'home')
  initObserver()
  eventBus.on('scrollToSection', scrollToSection)
})

onBeforeUnmount(() => {
  observer.value.disconnect()
  eventBus.off('scrollToSection')
})

const activateSection = (sectionId) => {
  const section = menuSections.value.find((x) => x.id === sectionId)
  if (section) {
    currentId.value = sectionId
    history.pushState(null, '', `#${sectionId}`)
    document.title = `${section.title} | ${config.siteName}`
  }
}

const scrollToSection = (sectionId) => {
  document.getElementById(sectionId)?.scrollIntoView({ behavior: 'smooth' })
}

const initObserver = () => {
  observer.value = new IntersectionObserver(
    (entries) => {
      const entry = entries.findLast(({ isIntersecting }) => isIntersecting)
      if (entry) {
        activateSection(entry.target.id)
      }
    },
    { threshold: 0.5 }
  )
  menuSections.value.forEach(({ id }) => {
    const element = document.getElementById(id)
    if (element) {
      observer.value.observe(element)
    } else {
      console.warn(`element not found: #${id}`)
    }
  })
}
</script>

<iframe> никто сейчас не использует ну кроме как для извращений каких-то, когда тебе нужно сайт на Wordpress подружить с API и тп, те для обмена данными через Window.postMessage.