针对前端部分,有一个div的列表,想通过按住Ctrl键后点击div实现多选的功能

大体思路如下
1 通过拦截控制ctrl的键盘code值,
2 在div上添加一个点击事件,将div设置成一个选中的样式,当然,在点击事件里面得判断一下,判断键盘是不是被按下了,没有按下的话,不做任何处理

具体代码如下:
1 首先先定义变量

data() {
     return {
  		data:[], //数据源列表
        isCtrl: false,   // 快捷键 ctrl 是否被按下
        selectedData: [],  
	}
}

2 绑定键盘监听事件

  // 监听键盘 
      keyDown() {
        // 键盘按下事件
        document.onkeydown = (e) => {
          // 取消默认事件
          e.preventDefault();   
          //事件对象兼容
          let e1 = e || event || window.event || arguments.callee.caller.arguments[0]
          //  ctrl:17  
          switch (e1.keyCode) {
            case 17:
              this.isCtrl= true;  // 如果ctrl按下就让他按下的标识符变为true
              break;
          }
        }
        // 键盘抬起事件
        document.onkeyup = (e) => {
          // 取消默认事件
          e.preventDefault();
          //事件对象兼容
          let e1 = e || event || window.event || arguments.callee.caller.arguments[0]
          switch (e.keyCode) {
            case 17: 
              this.isCtrl = false;  // 如果ctrl抬起下就让他按下的标识符变为false
              break;
          }
        }
      },

3 在页面初始化完成后进行触发该事件

created() {
	this.keyDown()
}

4 触发点击事件

selectImage(item, index) {
        if (this.isCtrl) {  // 如果按下的是ctrl
          		let str = item.id // 这行代码没必要,但是案例是根据我项目改的,就懒得删了
          		let i = this.selectedState.indexOf(str)  // 判断选中列表中是否包含这个点击的div
		          if (i < 0) {
		           	 	this.selectedState.push(str)   // 不包含就加进去
		          } else {
		            	this.selectedState.splice(i, 1);  // 包含就删,
		          }
	        }
      },
Logo

前往低代码交流专区

更多推荐