vue 实现【监听键盘按下事件】校验以下 “ 自定义键盘数字 ”，并且（按顺序按下键盘改变样式），否则给出提示

最新推荐文章于 2024-06-26 23:17:59 发布

禾小毅

最新推荐文章于 2024-06-26 23:17:59 发布

阅读量1.2k

点赞数

分类专栏： VUE+ElmentUI 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_50450473/article/details/122110444

版权

VUE+ElmentUI 专栏收录该内容

35 篇文章 2 订阅

订阅专栏

思路：将页面对应的键盘用v-for渲染出来，其中数组中有包含某个键盘对应的 keyCode 值例如：回车 => 13；监听键盘事件；判断按下的键盘keyCode值是否与数组中的codeId相等，并且找到当前选中的那个值的codeId

一、渲染要校验的键盘字符

<template>
  <div class="equip_key">
    <div class="equip_key_item" v-for="(k,kIndex) in list" :key="kIndex">{{k.codeName}}</div>
  </div>
</template>
<script>
export default {
    data(){
        return{
          list:[
               {codeId: 70,codeName: 'F',isChoose:false},
               {codeId: 74,codeName: 'J',isChoose:false},
               {codeId: 38,codeName: '↑',isChoose:false},
               {codeId: 40,codeName: '↓',isChoose:false},
               {codeId: 37,codeName: '←',isChoose:false},
               {codeId: 39,codeName: '→',isChoose:false},
               {codeId: 32,codeName: '空格',isChoose:false}
          ]
        }
    }
}
</script>
<style lang="scss" scoped>
.equip_key{
   display: flex;
   flex-wrap: wrap;
   .equip_key_item{
      width: 90px;
      height: 90px;
      line-height: 90px;
      text-align: center;
      font-size: 40px;
      font-weight: bold;
      color: #333;
      border: 1px solid #999;
      margin-right: 30px;
  }
}
</style>

二、监听键盘事件

<script>
export default {
    created(){
        // 监听键盘事件
        var _this=this
        document.onkeydown = function(e) {
           // 将 keyCode 传给函数
           _this.keyClick(e.keyCode)
        }
    }
}

三、判断键盘keyCode值===数组中codeId，= 给样式，!= 给提示

实现方法：

1、通过初始化 isChoose:false ，判断 !isChoose，也就是为真时

2、通过 findIndex 找到当前下标currentIndex

3、以此找到当前的codeId，判断 keyCode === codeId

4、= 给样式，!= 给提示，再将 isChoose = true，循环查找下一个

<script>
export default {
    methods:{
        keyClick(keyCode){
            const currentIndex = this.list.findIndex(e=>!e.isChoose);
            let current = this.list[currentIndex];
            const {codeId} = current;
            if(keyCode !== codeId)
                return  this.$message({
                    message: '请按如下顺序点击键盘按键输入',
                    type: 'warning'
                })

            document.getElementsByClassName('equip_key_item')[currentIndex].classList.add('ac_color')
            current.isChoose = true
        }
    }
}
</script>
<style lang="scss" scoped>
.ac_color{
    color: #2470F2 !important;
    border: 2px solid #2470F2 !important;
}
</style>

希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~