前人铺路系列组件hevue-img-preview 2.5更新，增加键盘控制，节流，图片加载等待等，来看看有没有你可以借鉴的思路或功能

hello啊，every body ，大家好，之前我们（其实只有我自己啦，为什么用我们呢？可能是为了装作我有一个团队吧，也可能只是为了顺口🌝 ）发布了 hevue-img-preview 2.0 版本，增加了多图预览的功能，收到了广大用户的好评(其实并没有用户)，我们的产品经理（其实就是我）又贴心的增加了部分功能，推出了2.5版本，下面大家来跟我一起看看都有哪些新功能以及如何实现的吧 O(∩_∩)O

本次更新内容

• 版本号：2.5.2
• 增加键盘控制功能，控制退出预览，翻页、旋转缩放等
• 增加图片加载中，加载失败的显示效果
• 顺便修复了z-index显示层级不够高的问题
• 未安装的同学直接安装就好，已安装的同学可以带上版本号更新 npm i hevue-img-preview@2.5.2 --save
• 详细介绍文章：https://juejin.im/post/5ee6377b51882542ea2b50ec
• GitHub地址：https://github.com/heyongsheng/hevue-img-preview

增加键盘事件

需求及理由

由于本款组件是面向pc端的一款图片预览组件，所以我们的用户自然都是pc用户，那么其中必然有一部分用户是用的笔记本，那么这一部分中的一部分人可能习惯用触控板加键盘的方式进行操作，通常pc的屏幕都是比较大的，所以让用户用手指在触控板上移动好几下从上一张的按钮移动到下一张的按钮，在移动到关闭的按钮上是很费劲的（就算用鼠标也有那么一丢丢不方便），所以我们贴心的推出了键盘控制功能，左手键盘点点，就能实现组件的几乎所有功能，真香！下面就来看看我们伟大的工程师（还是我）是如何实现的吧

代码实现

提示：如果不关心代码的同学只看思路就行了，忽略掉代码部分，纵使你可能不需要此组件，也对功能不感兴趣，我也希望你能耐心往下看看，也许你能从中学到部分思路呢

注意

本文所有的代码修改都是在2.0版本的代码基础之上进行修改，如果有同学感兴趣的话可以到我的GitHub上下载历史版本源码进行对照阅读

让用户选择是否使用键盘事件

首先呢，我们要足够的为用户考虑，就算我们加了这个功能，也要看用户需不需要，再加上我们这里是添加的键盘事件，有可能会覆盖掉用户的默认键盘事件或者导致重复触发，所以我们必须让用户选择是否启用此功能，我们可以把这个开关作为一个配置项，让用户调用的时候传入进来。

props: {
   
  ...
  keyboard: {
    // 是否启用键盘事件
    type: Boolean
    default: false // 默认不启用
  }
}

// 然后在组件被触发的时候判断是否启用
if (this.keyboard) {
   
  document.addEventListener('keydown', fn) // fn为键盘事件名
}

// 注意如果我们启用了键盘事件要在关闭组件时注销掉

if (this.keyboard) {
   
  document.removeEventListener('keydown', fn) // fn为键盘事件名
}

做一个简易的防抖函数

注意，由于作者才疏学浅，编写代码时候还不知道节流，只知道防抖，所以不知道以下所属情况其实符合节流的场景，但是实在懒得改了，这一段内容大家参考参考就好，等我悟透了防抖和节流再专门写一篇文章讲讲。

大家看到了我们上面添加的是 keydown 事件，也就是如果用户不松手是可以一直触发这个事件的，由于我们给图片的缩放和旋转都添加了动画效果，执行时间为0.3s，所以当键盘事件连续两次触发间隔小于0.3s时，画面就会出现抖动现象，所以我们这里要制作一个简易的防抖

/*
* 此段代码为下面的示例，请先阅读下文
* fn [function] 需要防抖的函数
* delay [number] 毫秒，防抖期限值
*/
function debounce