Щелчок по событию не работает при навигации в vueJS - PullRequest
Новая
       45

Щелчок по событию не работает при навигации в vueJS

0 голосов
/ 28 января 2020

У меня есть меню, оно расширяется, когда вы нажимаете на стрелку, а если вы нажимаете еще раз, это сокращается. Я разрабатываю эту опцию, добавляя класс css (.show) к div. Проблема возникает, когда я перехожу на другую страницу, и я пытаюсь показать / скрыть меню, щелкающее стрелкой, в этот момент ничего не происходит ... Почему исчезает событие клика? @ click мог потерял функциональность, если вы измените представление маршрутизатора? 

function showNav () {
  if (this.$store.getters.showSidebar) {
    this.$store.commit(SET_SHOW_LINK, false)
    setTimeout(() => {
      this.$store.commit(SET_SHOW_SIDEBAR, false)
    }, 500)
  } else {
    this.$store.commit(SET_SHOW_SIDEBAR, true)
    setTimeout(() => {
      this.$store.commit(SET_SHOW_LINK, true)
    }, 500)
  }
}
.container-menu {
  position: absolute;
  top: 65px;
  right: 0;
  width: 50px;
  min-height: calc(100vh - 20px);
  height: 100%;
  background-color: #072146;
  border: solid #fff;
  border-width: 0 0 0 1px;
  z-index: 999;
  transition: all .5s ease-in-out;

  .control {
    display: flex;
    justify-content: center;
    align-items: center;
    //width: 50px;
    margin-bottom: 10px;
    color: #fff;
    i {
      font-size: 2rem;
      cursor: pointer;
      transition: all .5s ease-in-out;
    }
  }

  &.show {
    width: 160px;
    .control > i {
      color: #fff;
      transform: rotateZ(-180deg);
    }
  }

  .navigation-icons-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 50px;
    float: right;
    i {
      color: #fff;
      font-size: 2rem;
      padding: 10px 0;
      cursor: pointer;
      transition: all .5s ease-in-out;
      &:hover {
        color: #fff;
      }
    }
  }
  .navigation-links-menu {
    //padding:14px;
    float: right;
    color: #fff;
    div {
      font-size: 1.35rem;
      padding: 10px;
      cursor: pointer;
    }
  }
}
<div class="navigation__menu">
	<div
	  class="container-menu"
	  :class="{'show': this.$store.getters.showSidebar}">
	  <div
		class="control"
		@click="showNav">
		<i
		  class="fas fa-angle-double-left" />
	  </div>
	  <div class="navigation-links-menu">
		<transition-group name="fade">
		  <div
			v-show="this.$store.getters.showLink"
			key="1">Home</div>
		  <div
			v-show="this.$store.getters.showLink"
			key="2">FIG</div>
		  <div
			v-show="this.$store.getters.showLink"
			key="3">Validation</div>
		  <div
			v-show="this.$store.getters.showLink"
			key="4">Authorization</div>
		</transition-group>
	  </div>
	  <div class="navigation-icons-menu">
		<router-link :to="`/`"><i class="fas fa-home" /></router-link>
		<router-link :to="`/console`"><i class="fas fa-clipboard-list" /></router-link>
		<i class="fas fa-check" />
		<i class="fas fa-check-double" />
	  </div>
	</div>
 </div>

1 Ответ

1 голос
/ 29 января 2020

Решением может быть изменение вашей мутации для переключения состояния showSidebar вместо его установки. Это позволит вам удалить ваши потоки if / else и не беспокоиться о текущем состоянии. 

function showNav () {
    this.$store.commit(TOGGLE_SHOW_LINK)
    setTimeout((vue) => {
      vue.$store.commit(TOGGLE_SHOW_SIDEBAR)
    }, 500, this)
}

// mutations.js

mutations: {
    TOGGLE_SHOW_SIDEBAR (state) {
        state.showSidebar = !state.showSidebar
    },
    TOGGLE_SHOW_LINK (state) {
        state.showLink = !state.showLink
    }
}

Когда вы проверяете состояние с помощью геттера, как показано ниже, вы, вероятно, ожидаете, что ваш this.$store.getters.showSidebar стать истинным, когда оно ложно, но вы пропускаете этот 500-миллиметровый эталон между щелчками. 

  if (this.$store.getters.showSidebar) {
    this.$store.commit(SET_SHOW_LINK, false)
    setTimeout(() => {
      this.$store.commit(SET_SHOW_SIDEBAR, false)
    }, 500)
  } else {
    this.$store.commit(SET_SHOW_SIDEBAR, true)
    setTimeout(() => {
      this.$store.commit(SET_SHOW_LINK, true)
    }, 500)
  }

Еще одно решение, которое я рекомендую, - отключение элемента, вызывающего showNav, до истечения времени ожидания, но первого решения может быть достаточно .

...