src/components/SearchInput.vue

   1 <template>
   2   <div class="search-bar">
   3     <label for="search" class="search-label"></label>
   4     <input
   5       type="text"
   6       ref="search"
   7       :value="value"
   8       @input="$emit('input', $event.target.value.toLowerCase())"
   9       @keyup.enter.exact="$emit('search:open')"
  10       @keyup.alt.enter="$emit('search:open', '_blank')"
  11     />
  12   </div>
  13 </template>
  14
  15 <script>
  16 export default {
  17   name: "SearchInput",
  18   props: ["value"],
  19   mounted() {
  20     this._keyListener = function (event) {
  21       if (event.key === "/") {
  22         event.preventDefault();
  23         this.$emit("search:focus");
  24         this.$nextTick(() => {
  25           this.$refs.search.focus();
  26         });
  27       }
  28       if (event.key === "Escape") {
  29         this.$refs.search.value = "";
  30         this.$refs.search.blur();
  31         this.$emit("search:cancel");
  32       }
  33     };
  34     document.addEventListener("keydown", this._keyListener.bind(this));
  35   },
  36   beforeDestroy() {
  37     document.removeEventListener("keydown", this._keyListener);
  38   },
  39 };
  40 </script>
  41
  42 <style lang="scss" scoped></style>