关于vue自己写的下拉框的一些东西。。。

<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_;

                }

            }

        },

//绿色的背景的代码 是用于 点击除绑定事件以外的其他地方 可以关闭下面的拉下框。