用vue做下拉框组件,想在点击下拉框的那个div之外隐藏下拉框。
我想在此div中绑定blur事件实现,但是没有用。
网上看到div本身没有blur事件,需要添加属性tabIndex后方可用blur,试了但是依然没有用。请问各位前辈有好的方法吗?
<template>
<div class="dropdown" :tabIndex='1' @blur="alert(1)">
<input class="input-drop" @click="showDropDown" :value="selectedName"
@keydown.down="changeDown"`请输入代码` @keydown.up.prevent="changeUp" placeholder="请选择:" />
<ul class="ul-dropdown" v-show="isShow" >
<li class="li-dropdown" v-for="(item,index) in optObj.dropItems"
@click="chooseItem(index)" :class="{active:nowIndex===index,'nowItemBg':nowIndex===index}" :name="item">{{item}}</li>
</ul>
<div class="nodata" v-show="optObj.dropItems.length==0">暂无数据...</div>
</div>
</template>
拿
a
标签来模拟啊,天然支持
blur
事件,设定
href="javascript:void(0)"
就行了。
这个你应该给body加一个全局点击事件,点击body的时候就通知你这个组件,body被点击了。
然后你隐藏你的下拉框就好了
你貌似tabindex笔误了,中间的i是小写,不是I