vue之自定义指令

2018-04-04  本文已影响0人  林帅进来了

尽管Vue推崇数据驱动视图的理念,然而有的情况,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。

1、 钩子函数
一个指令定义对象可以提供如下几个钩子函数 (均为可选):

//mousewheel.js
//normalize-wheel是由facebook针对滚轮事件在不同浏览器在兼容性、滚动距离和滚动速度做的优化代码
import normalizeWheel from 'normalize-wheel';
const isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;

const mousewheel = function(element, callback) {
  if (element && element.addEventListener) {
    element.addEventListener(isFirefox ? 'DOMMouseScroll' : 'mousewheel', function(event) {
      const normalized = normalizeWheel(event);
      callback && callback.apply(this, [event, normalized]);
    });
  }
};
//模块暴露一个对象
export default {
  bind(el, binding) {
   //通过table.vue可看出binding.value是一个function,执行mousewheel 方法将结果回调回调用方。
    mousewheel(el, binding.value);
  }
};
//packages/table.vue
    <div
      v-if="showHeader"
      v-mousewheel="handleHeaderFooterMousewheel"
      class="el-table__header-wrapper"
      ref="headerWrapper">
      <table-header
        ref="tableHeader"
        :store="store"
        :border="border"
        :default-sort="defaultSort"
        :style="{
          width: layout.bodyWidth ? layout.bodyWidth + 'px' : ''
        }">
      </table-header>
    </div>
    ...
  handleHeaderFooterMousewheel(event, data) {
        const { pixelX, pixelY } = data;
        if (Math.abs(pixelX) >= Math.abs(pixelY)) {
          event.preventDefault();
          this.bodyWrapper.scrollLeft += data.pixelX / 5;
        }
      },
...
  import Mousewheel from 'element-ui/src/directives/mousewheel';
  ...
//组件内局部注册
  directives: {
      Mousewheel
    },
上一篇 下一篇

猜你喜欢

热点阅读