舉個例子 :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)) {return false;}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]