《Vue.j实战》一书 p126 页练习 1 & 2 & 3 试做

练、习2 ：扩展clickoutside. ， 实现在点击按钮显示下拉菜单后，通过按下键盘的ESC 键也可
以关闭下拉菜单。
练习3 ：将练习2 的ESC 按键关闭功能作为可选项。提示，可以用修饰符，比如v-clickoutside . esc 。

Demo在线效果浏览

解答：

修改template，在指令后添加.esc修饰符

    <div class="main" v-clickoutside.esc="handleClose" data-id="0" data-first>
      <button @click="show=!show">点击显示下拉菜单</button>
      <div class="dropdown" v-show="show">
        <p>下拉框的内容，点击外面区域可以关闭</p>
      </div>
    </div>

 

在自定义指令的 bind 钩子中，新增 一 handler，用于处理当指令附带了 esc 修饰符时的情形。检测event对象的keyCode是否为27，如是，则表明点击了esc按键，就调用相应函数。

        function handleEsc(e){
            if(e.keyCode===27){
                binding.value(e);
            }

并绑定至 document 上。

        el.__vueEscOutside__=handleEsc;
        document.addEventListener('keyup',handleEsc);

在unbind钩子中添加如下代码：

        document.removeEventListener('keyup',el.__vueEscOutside__);
        delete el.__vueEscOutside__;

 

来源：https://www.cnblogs.com/sx00xs/p/11349464.html