关于标题弹出指令

简介

写这个目的是便于自己整理知识点， 首先我本来就对js了解不多，看到这部分让我很难受。 这人一看到从上到下一个都不认识的东西就很不想看这个，虽然教程说五遍大法，但是敲过去都不知道这步是干嘛的，说实话这部分我手看了一波劝退了一波，今天不知道是学习欲望来了还是什么，竟然非常有耐心的看下去了。废话就不多少了，写这部分就是想吐槽下(难受这竟然才是基础教程！！！！)

开始对于代码刨析

首先我先贴一个完整的代码（看看就行别被劝退！）

/* jshint esversion: 6 */
// 在 el 元素的上方显示或隐藏一个内容为 title 的提示框
function showTitle(el, title) {
    const popover = getPopover();
    const popoverStyle = popover.style;


    if (title === undefined) {
        popoverStyle.display = 'none';
    } else {
        const elRect = el.getBoundingClientRect();
        const elComputedStyle = window.getComputedStyle(el, null);
        const rightOffset = parseInt(elComputedStyle.getPropertyValue('padding-right')) || 0;
        const topOffset = parseInt(elComputedStyle.getPropertyValue('padding-top')) || 0;

        popoverStyle.visibility = 'hidden';
        popoverStyle.display = 'block';
        popover.querySelector('.popover-content').textContent = title;
        popoverStyle.left = elRect.left - popover.offsetWidth / 2 + (el.offsetWidth - rightOffset) / 2 + 'px';
        popoverStyle.top = elRect.top - popover.offsetHeight + topOffset + 'px';
        popoverStyle.display = 'block';
        popoverStyle.visibility = 'visible';
    }
}
// 创建或者返回一个提示框
function getPopover() {
    let popover = document.querySelector('.title-popover');

    if (!popover) {
        const tpl = `
      <div class="popover title-popover top fade in" style="position:fixed;">
        <div class="arrow"></div>
        <div class="popover-content"></div>
      </div>
    `;
        const fragment = document.createRange().createContextualFragment(tpl);
        document.body.appendChild(fragment);
        popover = document.querySelector('.title-popover');
    }

    return popover;
}

export default {
    bind(el, binding, vnode) {
        // 使用 const 声明一个只读的常量，其值是需要监听的事件类型列表
        const events = ['mouseenter', 'mouseleave', 'click'];
        // 声明一个处理器，以根据不同的事件类型传不同的参数
        const handler = (event) => {
            if (event.type === 'mouseenter') {
                // 显示一个提示框
                showTitle(el, binding.value);
            } else {
                // 隐藏一个提示框
                showTitle();
            }
        }
        // 在 el 元素上添加事件监听
        events.forEach((event) => {
            el.addEventListener(event, handler, false);
        })
        // 在 el 元素上添加一个属性，以在其他钩子进行访问
        el.destroy = () => {
            // 移除 el 元素上的事件监听
            events.forEach((event) => {
                el.removeEventListener(event, handler, false);
            })
            // 移除 el 元素上的 destroy
            el.destroy = null;
        }
    },
    unbind(el) {
        // 移除事件监听和数据绑定
        el.destroy();
    }
}

看到这里先不要慌（反正我是从上到下除了汉字其他都不认识）

看到这里首先要理解一下观看顺序（为了方便理解，我对下面代码做了一点简略处理）

export default {
    bind(el, binding, vnode) {
    // bind：只调用一次，指令第一次绑定到元素时调用，在这里可以进行一次性的初始化设置
    //先忽略部分具体逻辑
}
  },
  unbind(el){
        el.destroy();//下面详细介绍
  }
};

destroy方法

首先我要说下destroy()方法 这个是自己定义的
引用大佬原话

el是啥，又不是vnode，怎么会有 destroy这个方法 el只是一个dom，dom不是vue组件，它是原生的dom节点
—pigzzz

具体逻辑如下

el.destroy = () => {
    // 移除 el 元素上的事件监听
      events.forEach((event) => {
        el.removeEventListener(event, handler, false)
    })
    // 移除 el 元素上的 destroy  
    el.destroy = null

forEach()这里就不用在讲解了这只是一个简单的数据遍历中的数组event

 // 使用 const 声明一个只读的常量，其值是需要监听的事件类型列表
        const events = ['mouseenter', 'mouseleave', 'click']
        //事件类型分别是 
        //mouseenter：当鼠标指针进入（穿过）元素时触发
        //mouseleave ： 鼠标指针离开时触发
        //click : 点击时触发

[removeEventListener() 不知道这个方法的戳一下！！！！

本作品采用《CC 协议》，转载必须注明作者和本文链接