<div class="sel-blank" @click="hiddenBox"> <span class="sel-blank-title">{{session.title}}：</span> <div class="sel-blank-cont" v-clickoutside="handleClose"> <input type="text" class="sel-blank-ipt" v-model="selBlankValue" @click.stop="showHiddenBox(number)" readonly> <div class="object-cont" v-show="showBox && selectedQuestionIndex === number"> <div class="search-ipt"> <input type="text" class="sel-blank-ipt" ref="textBlur" @blur="blurText" v-model="selValue"> <img src="../../../../static/imgs/survey-search.png" alt="" @click.stop="showHiddenBox"> </div> <div class="object-cont-details wrappers" ref="wrappers" @touchstart.stop="getStopScroll"> <div> <div class="object-cont-box" v-for="(item,index) in searchData" :key="index" v-if="item.optionVoList.length > 0"> <span class="object-cont-box-tip">{{item.letter}}</span> <div class="object-cont-box-detail"> <span class="object-cont-box-detail-text" :class="{'selectetVal':beSelectedVal == items.id}" v-for="(items,ind) in item.optionVoList" :key="ind" @click="selFullBlank(items)">{{items.sentence}}</span> </div> </div> <div class="empty-nnotice" v-if="showEmptyNotice"> 暂无此数据 </div> </div> </div> </div> </div> <span class="sel-blank-required" v-if="session.essential == 1">*</span> </div> methods：{
handleClose(){
this.showBox = false;
},
}， directives:{
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_;
}
}
},
//绿色的背景的代码 是用于 点击除绑定事件以外的其他地方 可以关闭下面的拉下框。
来源：博客园
作者：anabing
链接：https://www.cnblogs.com/nanabing/p/11555117.html