HTML頁(yè)<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style type="text/css">? ? ? ?[v-cloak]{? ? ? ? display: none;? ? ? ?}</style></head><body><div id="app" v-cloak>? ? ? ?<div class="main" v-clickoutside="handleClose">? ? ? ? ? ? ? ? ? <button @click="show =!show">點(diǎn)擊顯示下拉菜單</button>? ? ? ? ? ? ? ? ? <div class="dropdown" v-show="show">? ? ? ? ? ? ? ? ? ? ? ? ? ?<p>下拉框內(nèi)容點(diǎn)擊外側(cè)區(qū)域可關(guān)閉</p>? ? ? ? ? ? ? ? ?</div>? ? ? </div>??</div><script type="text/javascript" src="./vue.js"></script><script type="text/javascript" src="./index.js"></script><script type="text/javascript" src="chickoutside.js"></script></body></html>index頁(yè)var app =new Vue({? ? ? ? ?el:'#app',? ? ? ? ?data:? {? ? ? ? ? ? ? ?show:false? ? ? ?},? ? ? ?methods:{? ? ? ? ? ? ? ?handleClose:function(){? ? ? ? ? ? ? ? ? ? ? ?this.show=false;? ? ? ?}? }});clickoutside頁(yè)Vue.directive('clickoutside',{? ? ? ? ? bind:function(el,binding,vnode){? ? ? ? ? ? ? ? ?function documentHandler (e){? ? ? ? ? ? ? ? ? ? ? ? if (el.contains(e.target)) {? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?return false;? ? ? ? ? ? ? ? ? ? ? ? ?}? ? ? ? ? ? ? ? ? ? ? ? ?if (binding.expression) {? ? ? ? ? ? ? ? ? ? ? ? ? ? ? binding.value(e);? ? ? ? ? ? ? ? ? ? ? ? }? ? ?}? ? ? ? ? el._vueClickOutside_=documentHandler;? ? ? ? ?document.addEventListener('click',documentHandler); },? ? ? ? ?unbind:function(el,binding){? ? ? ? ? ? ? ? ? ? ? ? ? ? document.removeEventListener('click',el._vueClickOutside_);? ? ? ? ? ? ? ? ? ? ? ? ? ? ?delete el._vueClickOutside_;? ? ? ? ?}});
寫(xiě)引用了為什么提示指令未解決？
生物怪獸
2018-08-13 14:02:15
