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

passerby
  • 46

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();
    },

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

回复
阅读 404
1 个回答
pandashuai
  • 79
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 });
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏