键盘按键+鼠标滚轮的组合事件

Question

vue如何使用键盘按键+鼠标滚轮组合事件
目的是：

<a-slider id="test" style="width:100px" @change="sliderChange" :tip-formatter="formatter" v-model="testSlider"/>

通过键盘按键+鼠标滚轮形成的组合事件来控制滑动条
例如：shift+鼠标滚轮，控制滑动条的改变
这是滑动条的改变事件：

sliderChange(value) {
      this.testSlider = Number(`${value}`)
      const img2 = document.querySelector('#layer-first-layer-image2-wrapper')
      img2.style.opacity = value/100
      const allFeatures = this.gFirstFeatureLayer.getAllFeatures();
      for(var i = 0; i < allFeatures.length; i++){
        this.opacity = value/100
        allFeatures[i].style.globalAlpha = value/100;
      }
      this.gMap.refresh();
    },

有没有什么具体的例子或者写一个方法

Answer 1

const mousewheelEventName = !!window.navigator.userAgent.match(/firefox/i) ? 'DOMMouseScroll' : 'mousewheel';
// 滚轮事件
document.addEventListener(mousewheelEventName, (e) => {
    // 是否按住了shift键
    if (e.shiftKey) {
        e.preventDefault();
        const delta = e.wheelDelta ? e.wheelDelta : -e.detail;
        if (delta > 1) {
          console.log('往前');
          // 以下就是你要写的自定义代码
        }else{
          console.log('往后');
          // 以下就是你要写的自定义代码;
        }
    }
}, { passive: false });