14个常用的vue自定义指令提高你的生产力

455 阅读2分钟

站在巨人的肩膀上,提高生产力,今天看下常用的自定义指令有哪些以及他们解决了什么问题和背后的实现思路的简单介绍

1. V-Hotkey: 处理键盘绑定 github

看完可以学到如何导出指令

2. V-Click-Outside : 检测是否点击其他元素而不是元素本身 github

也处理了iframe的情况

3. V-Clipboard : 处理复制粘贴,使用动态创建textarea 并且设置cssText实现 使用contentEditable = true 以及createRange手动设置光标全选 兼容mobile 使用 textarea的select 处理pc端github

4. V-ScrollTo : 处理元素滚动到指定位置 , github

工具函数里面对事件做了简单的封装

  on(element, events, handler, opts = { passive: false }) {
    if (!(events instanceof Array)) {
      events = [events]
    }
    for (let i = 0; i < events.length; i++) {
      element.addEventListener(
        events[i],
        handler,
        supportsPassive ? opts : false
      )
    }
  },
  off(element, events, handler) {
    if (!(events instanceof Array)) {
      events = [events]
    }
    for (let i = 0; i < events.length; i++) {
      element.removeEventListener(events[i], handler)
    }
  }

核心就是自己实现了ScrollTo的方法,可以值得细看 里面区分水平和垂直方向,动态计算top left 并且使用window.requestAnimationFrame 实现动画,提高渲染性能why-is-requestanimationframe-better-than-setinterval-or-settimeout 还有这一篇 小技巧: 使用 offset = options.hasOwnProperty('offset') ? options.offset : defaults.offset 判断是否存在属性 ,当然也可以用 let offset = (options &&options.offset) || defalut.offset 实现

5. Vue-Lazyload 懒加载图片的指令 7.2kstar 值得再细看

render (h) render函数的使用

  • es6类的使用
  • lazy函数使用闭包的技巧
  • 检测是否在屏幕内 ,使用IntersectionObserver 以及getBoundingClientRect的使用 前者性能更好
  • Vue.nextTick的使用
  • once的实现思路,就是调用一次再移除once的实现思路,就是调用一次再移除 off
  • js CustomEvent 的使用

6. V-Tooltip: 每个应用都会需要一个tooltip github

7. V-Scroll-Lock 处理 打开的弹框里面内容可以滚动,但是外部body阻止滚动的情况, 基于 body-scroll-lock

  • 使用ts scss 开发
  • 使用rollup 处理js
  • vue 动画 transition 的使用

8. V-Money 格式化金钱单位显示的场景 github

9. Vue-Infinite-Scroll 触底加载更多的场景 ElemeFE作品

  • 监听scroll 事件 加核心逻辑 shouldTrigger = viewportBottom + distance >= elementBottom;实现的并且做了throttle 但是个人感觉使用IntersectionObserver的方式会性能更好,也不用自己计算offsetHeight之类的

10. Vue-Clampy 指令实现文字超过指定值截断并且尾部添加... 显示

11. Vue-Ripple-Directive 元素点击实现动画效果 github

  • css让父容器脱离文档流
  • js动态获取元素点击位置,动态创建元素,添加
  • css transition 的使用, 允许平滑的改变css的属性值
  • demo的里面使用了一个bulma的css框架 这里可以学习css的架构

12. Vue-Focus 自动聚焦 优化用户体验的时候用 github

代码量也很少,自己实现也很简单

import Vue from 'vue';

export var version = '2.1.0';

var compatible = (/^2\./).test(Vue.version);
if (!compatible) {
  Vue.util.warn('VueFocus ' + version + ' only supports Vue 2.x, and does not support Vue ' + Vue.version);
}

export var focus = {
  inserted: function(el, binding) {
    if (binding.value) el.focus();
    else el.blur();
  },

  componentUpdated: function(el, binding) {
    if (binding.modifiers.lazy) {
      if (Boolean(binding.value) === Boolean(binding.oldValue)) {
        return;
      }
    }

    if (binding.value) el.focus();
    else el.blur();
  },
};

export var mixin = {
  directives: {
    focus: focus,
  },
};

13. V-Blur 通过指令toggle css 样式 filter的效果 github

核心代码就是给元素设置传入样式并且按照vue指令的书写的api的方式实现

el.style.opacity = bindingValue.isBlurred ? opacity : 1
el.style.filter = bindingValue.isBlurred ? filter : 'none'
el.style.transition = transition
el.style.pointerEvents = bindingValue.isBlurred ? 'none' : 'auto';
el.style.userSelect = bindingValue.isBlurred ? 'none' : 'auto' ;

14. Vue-Dummy : 使用lorem ipsum文本或在其中的某个位置添加一定大小的占位符图像 github