zoukankan      html  css  js  c++  java
  • 按住CTRL多选,按住shift连选的实现

    <tr class="address" v-for="(counts, index) in counts" :key="index" @click="trSelect(index)" :class="rowsSelect.indexOf(index) != -1 ? 'selectTr' : ''"></tr>
    
    document.onkeydown =  (e) => {
                        if (!this.keyCode) {
                            if (window.event) {
                                this.keyCode = event.keyCode;
                            } else if (e.which) {
                                this.keyCode = e.which;
                            }
    
                        }
                    };
                    document.onkeyup =  () => {
                        if (this.keyCode) {
                            this.keyCode = undefined;
                        }
                    };
    trSelect(index) {
                        switch (this.keyCode) {
                            case 17://ctrl
                                this.isCtrl = true;
                                if (this.rowsSelect.indexOf(index) != -1) {
                                    this.rowsSelect.splice(index, 1);
                                } else {
                                    this.rowsSelect.push(index);
                                }
                                this.startIndex = index;
                                break;
                            case 16://shift
                                if (!this.isCtrl && this.rowsSelect.length == 0) {
                                    this.rowsSelect.push(index);
                                    this.startIndex = index;
                                    return;
                                }
                                let start, end;
                                if (this.startIndex < index) {
                                    start = this. startIndex;
                                    end = index;
                                } else {
                                    start = index;
                                    end = this.startIndex;
                                }
                                this.rowsSelect = [];
    
                                for (let k = start; k <= end; k++) {
                                    this.rowsSelect.push(k);
                                }
                                this.isCtrl = false;
                                break;
                            default:
                                this.rowsSelect = [index];
                                this.isCtrl = false;
                                this.startIndex = index;
                                break;
                        }
    
                    }
    

      

      

  • 相关阅读:
    将博客搬至CSDN
    js进制转换
    js千分位转换
    css让div水平垂直居中
    NPM与调试工具的使用
    Windows下Node.js开发环境搭建-合适的开发环境
    Node.js开发环境介绍-调试工具
    开发环境
    模拟实现call,apply,bind方法,以及三者区别
    观察者模式
  • 原文地址:https://www.cnblogs.com/lrxsblog/p/9923456.html
Copyright © 2011-2022 走看看