ElementUI 2.x 自定义指令：鼠标滚轮

最新推荐文章于 2023-03-02 17:02:01 发布

「已注销」

最新推荐文章于 2023-03-02 17:02:01 发布

阅读量414

点赞数

分类专栏： Element Vue 文章标签： elementui javascript

本文链接：https://blog.csdn.net/weixin_45895753/article/details/124932056

版权

Vue 同时被 2 个专栏收录

17 篇文章 1 订阅

订阅专栏

Element

1 篇文章 0 订阅

订阅专栏

src/directives/mousewheel.js文件声明了鼠标滚轮自定义指令。

在模版中通过v-mousewheel=“handleMousewheel”，可以绑定发生鼠标滚轮事件时的回调函数。

一代码

// 依赖第三方库
import normalizeWheel from 'normalize-wheel';

// 是否是Firefox浏览器
const isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;

/**
 * 给元素绑定鼠标滚轮事件
 */
const mousewheel = function(element, callback) {
  if (element && element.addEventListener) {
    // 兼容处理：Firefox使用DOMMouseScroll事件，其它使用mousewheel事件
    element.addEventListener(isFirefox ? 'DOMMouseScroll' : 'mousewheel', function(event) {
      // 标准化鼠标滚轮事件对象。例如， {spinX: -0, spinY: -1, pixelX: -0, pixelY: -4.000244140625}
      const normalized = normalizeWheel(event);
      // 执行回调函数
      callback && callback.apply(this, [event, normalized]);
    });
  }
};

// 鼠标滚轮自定义指令
export default {
  // 指令第一次绑定到元素时调用：只调用一次
  bind(el, binding) {
    mousewheel(el, binding.value);
  }
};