@anton_trofimov95

Почему исчезает плавный скролл, если добавить закрытие меню?

<div class="header-flex__item" @click="menuShow=!menuShow">Меню</div>
<transition name="fade">
        <div class="header-menu" v-if="menuShow">
          <nav>
            <ul>
              <li v-for="menuLink in menuLinks" :key="menuLink.name">
                <a :href="menuLink.link" @click="menuShow=!menuShow,goToBlock">{{menuLink.name}}</a>
              </li>
            </ul>
          </nav>
        </div>
      </transition>

data() {
    return {
      menuShow: false,
      menuLinks: [
        {
          name: "Особенности",
          link: "#features",
        },
        {
          name: "О компании",
          link: "#about",
        },
        {
          name: "Сравнение",
          link: "#comparison",
        },
        {
          name: "Каталог",
          link: "#catalog",
        },
        {
          name: "Галерея",
          link: "#gallery",
        },
        {
          name: "Бани внутри",
          link: "#inside",
        },
        {
          name: "Этапы",
          link: "#stages",
        },
        {
          name: "Контакты",
          link: "#contacts",
        },
      ],
    };
  },
  methods: {
    goToBlock: function (event) {
      event.preventDefault();
      const link = event.target.getAttribute("href");
      document
        .querySelector(link)
        .scrollIntoView({ behavior: "smooth", block: "start" });
    },
  },


Я на ссылки навесил и закрытие меню, чтобы при скролле закрывалось. Но он теперь скроллит не плавно, а резко, как изменить?
  • Вопрос задан
  • 46 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
@click="menuShow=!menuShow,goToBlock"

Добавив переключение menuShow, вы превратили значение v-on из имени метода в inline-выражение. Так что goToBlock теперь не вызывается. Вызовем: @click="menuShow = !menuShow, goToBlock($event)". Ну а лучше бы конечно сделать новый метод (если goToBlock действительно нужен как отдельный метод, в противном случае достаточно унести в него переключение menuShow), как-то так:

methods: {
  goToBlock(selector) {
    document.querySelector(selector).scrollIntoView({
      behavior: 'smooth',
    });
  },
  onMenuItemClick(e) {
    this.menuShow = false;
    this.goToBlock(e.target.getAttribute('href'));
  },
},

@click.prevent="onMenuItemClick"
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
23 сент. 2020, в 20:17
100000 руб./за проект
23 сент. 2020, в 20:15
12000 руб./за проект
23 сент. 2020, в 20:14
1000 руб./за проект