JS跟踪用户keyDown事件，实现点击单选，Ctrl多选效果

最新推荐文章于 2024-02-04 13:58:52 发布

SunFlower914

最新推荐文章于 2024-02-04 13:58:52 发布

阅读量1.9k

点赞数 3

文章标签： javascript vue 前端

本文链接：https://blog.csdn.net/SunFlower914/article/details/124285160

版权

本文介绍了一种使用Vue.js实现的多选高亮标签功能，通过监听键盘事件来判断用户是否按下了Ctrl键，实现单击选中和取消选择。通过修改标签的类型属性来控制选中状态的视觉反馈。代码示例展示了如何在模板中绑定事件和计算属性，以及在组件的生命周期钩子中初始化和处理键盘事件。

摘要由CSDN通过智能技术生成

实现效果：

鼠标点击tag标签后高亮显示，按下Ctrl键单击实现多选，在选中情况下再次单击后取消选择；

步骤：

1.methods中定义keyDown方法用于监听页面中的keydown事件

keydown () {
      // 用户按下ctrl后变量isCtrl为true
      document.onkeydown = e => {
        let el = e || window.event || arguments.callee.caller.arguments[0]
        if (el.keyCode === 17) {
          this.isCtrl = true
        }
      };
      // 用户松开ctrl后变量isCtrl为false
      document.onkeyup = e => {
          let el = e || window.event || arguments.callee.caller.arguments[0]
          if (el.keyCode === 17) {
            this.isCtrl = false
          }
        }
    },

2.Created初始化钩子中调用keyDown方法

created () {
    this.keydown()
  },

3.为tag标签绑定click事件，判断是否为ctrl多选

selectTags (tag) {
      // 按下Ctrl单击选中，单击第二次取消
      if (this.isCtrl) {
        let index = this.selectList.indexOf(tag)
        if (index >= 0) {
          this.selectList.splice(index, 1)
        } else {
          this.selectList.push(tag)
        }
      } else {
        this.selectList = []
        this.selectList.push(tag)
      }
    },

4.定义tag的type，若tag被用户选中，则高亮显示

buttonType (tag) {
      // 若tag被用户选中，则高亮显示
      if (this.selectList.includes(tag)) {
        return 'selected'
      }
    },

完整代码示例：

<template>
  <div>
    <el-input
      class="input-new-tag"
      v-if="inputVisible"
      v-model="inputValue"
      ref="saveTagInput"
      size="small"
      style="width:55px"
      @keyup.enter.native="handleInputConfirm"
      @blur="handleInputConfirm"
    >
    </el-input>
    <el-button
      v-else
      class="button-new-tag"
      type="primary"
      size="mini"
      @click="showInput"
      >新增</el-button
    >
    <el-tag
      :key="tag"
      size="small"
      v-for="tag in dynamicTags"
      :type="buttonType(tag)"
      @click="selectTags(tag)"
    >
      {{ tag }}
    </el-tag>
  </div>
</template>

<script>
export default {
  data () {
    return {
      dynamicTags: ['标签一', '标签二', '标签三'],
      inputVisible: false,
      inputValue: '',
      isCtrl: false,
      selectList: []
    }
  },
  created () {
    this.keydown()
  },

  methods: {
    keydown () {
      // 用户按下ctrl后变量isCtrl为true
      document.onkeydown = e => {
        let el = e || window.event || arguments.callee.caller.arguments[0]
        if (el.keyCode === 17) {
          this.isCtrl = true
        }
      };
      // 用户松开ctrl后变量isCtrl为false
      document.onkeyup = e => {
          let el = e || window.event || arguments.callee.caller.arguments[0]
          if (el.keyCode === 17) {
            this.isCtrl = false
          }
        }
    },
    selectTags (tag) {
      // 按下Ctrl单击选中，单击第二次取消
      if (this.isCtrl) {
        let index = this.selectList.indexOf(tag)
        if (index >= 0) {
          this.selectList.splice(index, 1)
        } else {
          this.selectList.push(tag)
        }
      } else {
        this.selectList = []
        this.selectList.push(tag)
      }
    },
    buttonType (tag) {
      // 若tag被用户选中，则高亮显示
      if (this.selectList.includes(tag)) {
        return 'selected'
      }
    },
    showInput () {
      this.inputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    handleInputConfirm () {
      let inputValue = this.inputValue.trim()
      if (inputValue) {
        this.dynamicTags.push(inputValue)
      }
      this.inputVisible = false
      this.inputValue = ''
    }
  }
}
</script>
<style>
.el-tag {
  cursor: pointer;
  margin-left: 10px;
  color: #606266;
  background: #fff;
  border: 1px solid #ccc;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.red {
  border: 1px solid red;
}
.el-tag--selected {
  color: #409eff;
  border: 1px solid #409eff;
}
</style>