站在巨人的肩膀上,提高生产力,今天看下常用的自定义指令有哪些以及他们解决了什么问题和背后的实现思路的简单介绍
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的使用
- off
- js CustomEvent 的使用
6. V-Tooltip: 每个应用都会需要一个tooltip github
- 做了tooltip不在屏幕内,自动调整到屏幕内的处理, 这点就值得再细看如何实现的
- 内部实现了一个popover vue组件 slot 样式绑定 事件处理 computed watch 等基本vue api的使用 使用第三方组件,组件如何注册 ResizeObserver
- Using_the_aria-hidden_attribute
- 按键的手机的业务场景不可避免的会用到这个属性tabindex 全局属性 指示其元素是否可以聚焦,以及它是否/在何处参与顺序键盘导航(通常使用Tab键,因此得名)。
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 指令实现文字超过指定值截断并且尾部添加... 显示
- 基于clampy.js 实现
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' ;