design comp

design-overlay.vue

<template>
  <div class="dev-design" v-show="isShown" :style="{ opacity }">
    <img
      v-for="(img, i) in imgsUrl"
      :src="img"
      :key="`img-${i}`"
      v-show="currentImg === i"
    />
  </div>
</template>
<script>
export default {
  name: 'dev-design',
  data() {
    return {
      isShown: false,
      imgsUrl: [
        '/design/1.jpg',
        '/design/2.jpg',
        '/design/3.jpg',
        '/design/4.jpg',
        '/design/5.jpg',
        '/design/6.jpg'
      ],
      currentImg: 0,
      opacity: 0.5
    }
  },
  methods: {},
  mounted() {
    window.addEventListener('keydown', (e) => {
      if (e.key === 'ArrowUp') {
        this.opacity += 0.1
        if (this.opacity > 1) this.opacity = 1
      }
      if (e.key === 'ArrowDown') {
        this.opacity -= 0.1
        if (this.opacity < 0) this.opacity = 0
      }
      if (e.key === 'ArrowRight') {
        this.currentImg++
        if (this.currentImg > this.imgsUrl.length - 1) this.currentImg = 0
      }
      if (e.key === 'ArrowLeft') {
        this.currentImg--
        if (this.currentImg < 0) this.currentImg = this.imgsUrl.length - 1
      }
      if (e.key === 'd') {
        this.isShown = !this.isShown
      }
    })
  }
}
</script>
<style lang="scss">
.dev-design {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  width: 100%;
  z-index: 100;
  img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: block;
  }
}
</style>