1.第一版,只有点击打开按钮才能关闭
这个就没什么好说的,点击按钮,做对应操作,贼简单,不过体验也同样贼差。
点开选择框之后只有点击打开选择框的按钮才能关闭。
2.第二版,在选择框后,其他元素之前加上一个蒙版
蒙版加上之后,可以是透明的,也可以是半透明的,不过一个选择框加个半透明的蒙版有点不伦不类。
这样基本的点击其他位置关闭选择框的功能是实现了,但是有个致命的缺点,就是你点击其他地方是没有效果的。
因为你第一次点击的是蒙版,所以其他地方并没有背点击,体验感很差。
3.第三版,加全局点击事件
这个方法基本就可以实现了点击按钮打开选择框,点击其他位置关闭选择框,呃,来看看代码:
this.showList = !this.showList; if(this.showList){ var _this = this; setTimeout(function () { var windowClick = window.onclick; window.onclick = function(e){ _this.showList = false; if(windowClick){ windowClick(e); } window.onclick = windowClick; }; },0); }
在选择框打开的时候顺便给一个一次性的window.click事件下次不管点击哪里都会触发,然后关闭选择框。
但是这样写也会有一些问题,就是在一些阻止冒泡的dom上边触发click事件的时候,并不会关闭选择框。
4.第四版,打开选择框的元素触发blur事件
blur事件是一部分元素的事件,所以需要在点击打开选择框的元素上添加一个属性:tabindex="-1"。
普通元素加上tabindex属性之后就可以拥有focus和blur事件,这样就可以完美实现点击其他位置关闭选择框的目的了。
给值-1是因为防止按tab键选中这个元素,当然也可以给正值,这个属性的值代表的是按tab键选中此元素的顺序,感觉和z-index理解差不多数字越小越靠前选中(0除外,0是最后一个被选中,但是也有focus和blur事件)。
最后附上测试的代码:
<div class="vueApp"> <div tabindex="2" @focus="console(‘div tabindex=“2” focus‘)" @blur="console(‘div tabindex=“2” blur‘)">tabindex="2"</div> <el-input @focus="console(‘input focus‘)" v-model="input"></el-input> <div tabindex="-1" @focus="console(‘div tabindex=“-1” focus‘)" @blur="console(‘div tabindex=“-1” blur‘)">tabindex="-1"</div> <div @focus="console(‘div not tabindex focus‘)" @blur="console(‘div not tabindex blur‘)">not tabindex</div> <div tabindex="1" @focus="console(‘div tabindex=“1” focus‘)" @blur="console(‘div tabindex=“1” blur‘)">tabindex="1"</div> <div tabindex="1" @focus="console(‘div tabindex=“1” focus‘)" @blur="console(‘div tabindex=“1” blur‘)">tabindex="1"</div> <div tabindex="0" @focus="console(‘div tabindex=“0” focus‘)" @blur="console(‘div tabindex=“0” blur‘)">tabindex="0"</div> </div>
new Vue({ el:".vueApp", data:{ input:"13212" }, mounted:function(){}, methods:{ console:function (str) { console.log(str); } } })
原文地址:https://www.cnblogs.com/zchenguang/p/9930077.html
时间: 2024-10-16 08:05:39