如何使自定义vue指令中的逻辑仅在单击该元素时运行？

问题描述

现在，页面加载时将执行我连接到任何元素的指令。 这不是我想要的东西。我希望指令在单击该元素时运行。 我该怎么办？

  directives: {
            'new-dir': {
                bind(el,binding,vnode) {
                    el.style.cursor = "pointer";
                    console.log(vnode);
                    if(vnode.tag == 'div'){
                                ...something       }
                    else if(vnode.tag == 'a') {
                      console.log("its a link and clicked");
                      if(vnode.data.attrs.target == "_blank"){
                        console.log("external link");
                      } else{
                        console.log("internal link");
                      }
                    } else if(vnode.tag == 'input') {
                       console.log("its an input ");
                       console.log("type = " + vnode.data.attrs.type)
                       console.log("placeholder = " + vnode.data.attrs.placeholder);
                    }
                }
            },}

解决方法

指令必须绑定到一个元素，并且指令代码在那时运行。

如果您想在点击处理程序中运行特定的逻辑，则需要注册一个

directives: {
  "new-dir": {
    bind: el => {
      el.style.cursor = "pointer"
    },inserted: (el,binding,vnode) => {
      // store a reference to the click handler on the element
      // this is primarily so you can remove it later
      el.newDirClickHandler = e => {
        console.log(vnode);
        if (vnode.tag == 'div') {
          // something
        }
        if (vnode.tag == 'a') {
          console.log("its a link and clicked");
          if (vnode.data.attrs.target == "_blank") {
            console.log("external link");
          } else {
            console.log("internal link");
          }
        }
        if (vnode.tag == 'input') {
          console.log("its an input ");
          console.log("type = " + vnode.data.attrs.type)
          console.log("placeholder = " + vnode.data.attrs.placeholder);
        }
      }

      // register the click handler
      el.addEventListener("click",el.newDirClickHandler)
    },unbind: el => {
      // unregister the click handler
      el.removeEventListener("click",el.newDirClickHandler)
    }
  }
}