其他元素的点击事件总是优先与blur事件触发
Demo预览：
https://sunzsh.github.io/vue-demos/#/autocomplete-tag-demo
代码：
https://github.com/sunzsh/vue-el-demo/blob/master/src/components/Autocomplete2/index.vue
https://github.com/sunzsh/vue-el-demo/blob/master/src/views/autocomplete-tag-demo.vue
我们来看这个bug哈
这个标签可以自定义
比如输入点东西失去焦点他就上来了
还可以呢在下边选
但是呢注意看如果输入了点东西
并且我在下边选他就不行了
原因是什么呢
就是相比于下面的这个点击事件啊
这个文本框呢
失去焦点事件会优先被触发
所以呢
我们再点下边这个选项的时候啊
他认为是失去焦点了
这种问题呢通常我们有两个思路
第一个呢就是下边这个点击事件啊
我们把click改成mouse down
这样的话呢
mouse down
就会优先于这个blur事件去触发
但是呢由于我们用到的是这个
autocomplate所以它下边的这个弹出层啊
也不是我们自己写的
也是组件内部自带的
所以想把它改成mousedown比较麻烦
第二个思路呢
就是我们不用这个onblur事件了
我们用什么呢
大家记得我之前分享过
ElementUI里边有一个v-clickoutside吗
我们这样 v-clickoutside
然后把这个方法拿过来
但是啊
我们直接把它放在这个组件上用是
不行的原因是什么呢
原因是
虽然这个组件是我们自己封装的
但是他也是直接封装了autocomplate
autocompolate
它本身就有一个click outside
他们俩就冲突了
所以那怎么办呢
也很简单我们把这个click outside
在外边再封装一层
比如我们用span来封装一层
我们写到这里边
然后呢注意这有个v-if
我们也拿到这里边
因为下边有v-else
所以把它到这
放到这里边
同时注意啊
我们这里边一定要有这个
popper-append-to-body
等于false
否则的话呢
它弹出来的这个层它是在body里边
我们在这里边点击选项啊
他也会认为我们点击了
这个Spa标签以外的内容
这样就跟刚才那blur没什么区别了
所以一定要加上这个append-to-body=false
这样的话呢我们再来试一下刷新一下
先选中没问题
自己输入也没问题
然后我们再输入选择！大家看 也可以了
最后更新于