vue el-tabs 鼠标滚轮滚动切换

把el-tabs  el-tab-pane的name拿来做一个数组

activeName: 'first',

arrtab: ['first', 'third', 'fourth', 'second', 'dongtai', 'dianping', 'xiangce'],

//鼠标滚动事件
            handleScroll(e) {
                console.log("arrtab",this.arrtab.length)

                
                //let name = this.activeName;

                let direction = e.deltaY > 0 ? 'down' : 'up';  //deltaY为正则滚轮向下，为负滚轮向上
                if (direction == 'down' && e.deltaY >= 100) { 

                    let index = this.arrtab.indexOf(this.activeName);

                    if (index < this.arrtab.length-1) {
                        index++;
                        console.log(index)

                        this.activeName = this.arrtab[index]
                    }

                    console.log("下");
                }
                if (direction == 'up' && e.deltaY <= -100) {

                    let index = this.arrtab.indexOf(this.activeName);
                    if (index >= 1) {
                        index--;
                        console.log(index)

                        this.activeName = this.arrtab[index]
                    }

                    console.log("上");
                }
                console.log(this.activeName);

            },
            debounce(func, wait = 100, immediate = true)
            {
                let timer
                return (...args) => {
                    let context = this
                    if (timer) clearTimeout(timer)
                    if (immediate) {
                        let callNow = !timer
                        timer = setTimeout(() => {
                            timer = null
                        }, wait)
                        if (callNow) func.apply(context, args)
                    } else {
                        timer = setTimeout(() => {
                            func.apply(context, args)
                        }, wait)
                    }
                }
            }

mounted() {
            //监听鼠标滚动事件
            window.addEventListener('mousewheel', this.debounce(this.handleScroll),false);
        }