Создание компонента управления клавиатурой списка с Vue.js и Scoped Slots

Автор оригинала: Thomas Findlay.

Есть отличные пакеты, которые позволяют создать раскрывающийся список и использовать клавиатуру для его управления. Но что, если вы не можете использовать какой-либо пакет для этого и надо реализовать пользовательский компонент с такими функциональными функциями с нуля? К счастью, с Vue очень легко реализовать, что и в этом руководстве мы будем использовать функцию Scoped Plot Plot.

Сначала давайте получим простую настройку проекта. Мы будем использовать Vue-CLI 3, что теперь имеет стабильную версию. Вы можете найти больше информации об этом в https://cli.vuejs.org/guide/creating-a-project.html#vue-create. Откройте терминал и установите VUE-CLI 3, если у вас его еще нет:

npm install -g @vue/cli

or

yarn global add @vue/cli

После установки создайте новый проект, запустив эту команду в терминале

vue create vue-list-keyboard-control

Вы можете использовать настройку по умолчанию или выбрать любые дополнительные функции вручную, если хотите, но нам не понадобится. После того, как проект был создан, перейдите в каталог проекта и запустите сервер:

cd vue-list-keyboard-control && npm run serve

Теперь измените файл app.vue, чтобы он выглядел так:

Мы хотим иметь четкий шаблон без какого-либо начального добавления. Теперь, конечно, нам нужно иметь список, который мы будем контролировать с клавиатурой. Добавьте созданный крюк в файле App.Vue и создайте новый список там. Кроме того, нам нужно отобразить список, и мы также добавим немного укладки. Вот как ваш файл должен выглядеть

Если вы сохраните файл app.vue, вы должны увидеть такой экран:

Таким образом, у нас есть список на месте, но теперь мы должны добавить функциональность для контроля его клавиатурой. Создайте новый файл в папке «Компоненты», называемой «сжатой доскиControl.Vue». Нам нужно будет использовать здесь данные, рендер, методы, созданные и уничтоженные свойства экземпляра Vue. Мы будем использовать «созданный» крючок для создания слушателей событий и «разрушенный» крюк для удаления всех слушателей событий. Тем не менее, давайте просто добавим свойство «ВыбратьИндекс» в «данные», а также функцию рендеринга, которая окажет наш список, а принцип «ListLength», поскольку нам понадобится позже в обработчиках.

Теперь импортируйте и зарегистрируйте этот компонент в файле app.vue. Мы также будем обернуть наш список в компоненте «с клавиатурой» и с помощью «<Шаблон> », нам также нужно пройти длину нашего списка на компонент <с клавиатурой> Control>.

Если вы сохраните и обновите страницу, вы должны увидеть, что ничего не изменилось. Тем не менее, теперь наш список имеет доступ к компоненту «SelectionIndex» из компонента «с клавиатурой». Поскольку у нас есть только одно свойство, которое мы хотим пройти, мы можем использовать разрушительную настройку «Выбрать инжекс» напрямую.

Before:

Еще одна вещь, которую мы должны сделать в приложении .Vue – это добавить «выбранный» класс для Div, который будет выбран.

   
{{item}}

Если вы сохраните сейчас и измените файл «ВыбратьИндекс» в файле «FusekeyboardControl.vue», вы должны увидеть, что второй элемент в списке теперь будет иметь цвет фона. Давайте вернемся к файлу «с KeyboyboardControl.vue» и добавьте слушателей событий. Создайте методы «addkeyHandler» и «ReviekeyHandler». В одном из них мы добавим слушатель события, а в другом удалите его.

methods: {
    addKeyHandler(e) {
      window.addEventListener("keydown", this.keyHandler);
    },

    removeKeyHandler() {
      window.removeEventListener("keydown", this.keyHandler);
    }
  },

Как вы можете видеть, когда кто-то нажмет ключ вниз, будет вызываться метод «KeyHandler». Мы также должны создать его, так и методы для обработки клавиш «UP», «Down» и «Ввод». В KeyHandler мы будем инициализировать соответствующий обработчик в зависимости от того, какой ключ был нажат. Мы можем получить код ключа из события, который передается как первый аргумент к ключевому обработчику. Кроме того, для обработки «вверх», «вниз» и «Enter», мы также будем обрабатывать «вкладку». Если пользователь нажимает на вкладку, только он будет уволить обработчик «вниз», и если пользователь будет удерживать «Shift», а также будет вызываться обработчик «UP».

keyHandler(e) {
      /**
        38 - up
        40 - down
        9 - tab
        13 - enter
       */

      const key = e.which || e.keyCode;

      if (key === 38 || (e.shiftKey && key === 9)) {
        this.handleKeyUp(e);
      } else if (key === 40 || key === 9) {
        this.handleKeyDown(e);
      } else if (key === 13) {
        this.handleEnter(e);
      }
    },
    handleKeyUp() {},
    handleKeyDown() {},
    handleEnter() {},

Нам также необходимо инициатировать слушателя и удалить его, когда компонент разрушен.

  created() {
    this.addKeyHandler()
  },
  destroyed() {
    this.removeKeyHandler()
  }

Если вы добавите Console.log () к ключамхену и начать нажимать клавиши, вы увидите, что обработчик уволен правильно. Однако у нас нет ничего в наших ключевых обработчиках, поэтому давайте что-то добавим в них.

    handleEnter(e) {
      e.preventDefault();
      this.$emit("selected", this.selectedIndex);
    },
    handleKeyUp(e) {
      e.preventDefault();
      if (this.selectedIndex <= 0) {
        // If index is less than or equal to zero then set it to the last item index
        this.selectedIndex = this.listLength - 1;
      } else if (
        this.selectedIndex > 0 &&
        this.selectedIndex <= this.listLength - 1
      ) {
        // If index is larger than zero and smaller or equal to last index then decrement
        this.selectedIndex--;
      }
    },

    handleKeyDown(e) {
      e.preventDefault();
      // Check if index is below 0
      // This means that we did not start yet
      if (
        this.selectedIndex < 0 ||
        this.selectedIndex === this.listLength - 1
      ) {
        // Set the index to the first item
        this.selectedIndex = 0;
      } else if (
        this.selectedIndex >= 0 &&
        this.selectedIndex < this.listLength - 1
      ) {
        this.selectedIndex++;
      }
    },

После сохранения файла вы можете перейти в браузер и использовать клавиатуру. Теперь вы должны увидеть, что при нажатии клавиши «вверх», «вниз» или «вкладка» или «цвет фона переместится к следующему или предыдущему элементу. Чтобы увидеть, что «Enter» также работают, перейдите в файл app.vue и добавьте слушатель событий на компонент , и способ отображения предупреждения.

...content


methods: {
    selectedHandler(selectedIndex) {
      alert(
        `The item '${
          this.$options.list[selectedIndex]
        }' with index ${selectedIndex} has been selected!`
      );
    }
  },

Теперь, если вы нажмете ввод, вы должны увидеть предупреждение с информацией о том, какой элемент был выбран.

Это это для этого учебника. Вы можете найти исходный код в https://github.com/deraies/vue-list-keyboard-control. Scoped-Slots – чрезвычайно мощная функция, и даже если это может быть немного трудно, чтобы понять свою голову в начале, это, безусловно, стоит участвовать и использовать его в ваших проектах.

Другие показания:

Быстрый введение в новую API-контекст RACT API и почему он не заменит государственные библиотеки управления

Современные функции JavaScript, которые вы должны использовать каждый день для лучшего развития и какие проблемы они решают.

Как создать шатунную анимацию для страстического списка в Vue.js