首页 / VUE / 如何写一个vue指令directive

如何写一个vue指令directive

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了如何写一个vue指令directive，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1092字，纯文字阅读大概需要2分钟。

内容图文

举个例子 ：clickoutside.js

const clickoutsideContext = ‘@@clickoutsideContext‘;

export default {
  /*
   @param el 指令所绑定的元素
   @param binding {Object} 
   @param vnode vue编译生成的虚拟节点
   */
  bind (el, binding, vnode) {
    const documentHandler = function(e) {
      console.log(el)
      console.log(e.target);
      console.log(vnode);
      console.log(binding);
      
      if(!vnode.context || el.contains(e.target)) {
        returnfalse;
      }
      if (binding.expression) {
        vnode.context[el[clickoutsideContext].methodName](e)
      } else {
        el[clickoutsideContext].bindingFn(e);
      }
    }
    el[clickoutsideContext] = {
      documentHandler,
      methodName: binding.expression,
      bindingFn: binding.value
    }
    setTimeout(() => {
      document.addEventListener(‘click‘, documentHandler);
    }, 0)
  },
  update (el, binding) {
    el[clickoutsideContext].methodName = binding.expression;
    el[clickoutsideContext].bindingFn = binding.value;
  },
  unbind(el) {
    document.removeEventListener(‘click‘, el[clickoutsideContext].documentHandler);
  }
}

 

directive是怎么实现的呢?

1、在binding中写绑定方法

2、方法需要写在一个环境（context）中，放置泄露

如上定义了：el[clickoutsideContext]

原文：http://www.cnblogs.com/heyinwangchuan/p/8052211.html

内容总结

以上是互联网集市为您收集整理的如何写一个vue指令directive全部内容，希望文章能够帮你解决如何写一个vue指令directive所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1255011.html

来源：【匿名】