Как вызвать событие нажатия клавиши Enter при изменении хеша URL? - PullRequest
Новая
       7

Как вызвать событие нажатия клавиши Enter при изменении хеша URL?

0 голосов
/ 27 марта 2019

Песочница здесь.

У меня есть ссылки, организованные внутри <li> элементов.При событии щелчка я изменяю URL-адрес страницы на соответствующий элемент <div> id на странице.

Теперь, поэтому я ищу способ вызвать событие ввода нажатия в makeIt(), поэтомучто я получаю свиток к связанному элементу <div>.

Вот мой код: 

<template>
<div>
  <div style="margin-top: 50px;"></div>
  <div style="margin-bottom: 50px;">
    <ul>
      <li
        v-for="i in 3"
        :key="i"
        @click="makeIt(i)"
      >
        Link{{ i }}
      </li>
    </ul>
  </div>
  <div
    v-for="i in 3"
    :id="i"
    :class="`div${i}`"
    >
    Div {{ i }}
  </div>
</div>
</template>

<script>

export default {
  methods: {
    makeIt(hashbang) {
      this.$router.push(`#${hashbang}`)
    }
  }
}
</script>

<style>
.div1 {
    background-color: red;
    height: 600px;
}

.div2 {
    background-color: blue;
    height: 500px;
}

.div3 {
    background-color: yellow;
    height: 500px;
}
</style>

Как достичь этой цели?

Ответы [ 2 ]

0 голосов
/ 27 марта 2019

Я не совсем уверен, что нажатие клавиши Enter - это то, что нужно для прокрутки вниз до нужного раздела.

Вы можете рассмотреть возможность прокрутки с помощью VueScrollTo (вы можете найти его здесь ). Тогда это будет так же просто, как вызов VueScrollTo.scrollTo() из метода makeIt. 

makeIt(hashbang) {
  this.$router.push(`#${hashbang}`);
  VueScrollTo.scrollTo(`.section-${hashbang}`, 500);
}

Вот рабочий пример того, как я бы это сделал: jsfiddle .

Тогда вам все же может потребоваться отправить индекс на маршрут, чтобы перейти к выбранному разделу при просмотре точного URL.

Редактирование моего ответа, чтобы предложить другой подход:

Поскольку вы используете VueRouter, вы можете воспользоваться преимуществом свойства hash маршрутов и метода scrollBehavior() при определении параметров маршрутизатора. Таким образом, вы можете получить что-то вроде этого: 

<router-link tag="li" v-for="i in 3" :key="i" :to="{ name: 'theRouteName', hash: '#section-' + i }">Link {{i}}</router-link>

Это делает ненужными часть $router.push() и весь метод makeIt().

Кроме того, вы должны добавить поведение прокрутки к конфигурации маршрутизатора: 

const router = new VueRouter({
  routes,
  mode: "history",
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {˙
      return savedPosition;
    }
    if (to.hash) {
      return { selector: to.hash };
    }
    return { x: 0, y: 0 };
  }
});

Я сохранил версию этого решения на jsfiddle , вы можете попробовать ее в своей песочнице или в локальной версии приложения.

0 голосов
/ 27 марта 2019

Вы можете передать $event объект из вашего шаблона и изменить свою makeIt функцию как;

HTML : 

@click="makeIt(i, $event)"

JS : 

makeIt(hashbang, event) {
if (event.keyCode === 13) {
//do something
}
      this.$router.push(`#${hashbang}`)
    }
...