el-popover使用click触发,但是在中文输入法输入空格会触发click事件,应该如何处理
时间: 2023-12-10 14:42:24 浏览: 59
可以考虑使用`mousedown`事件来触发`el-popover`,这样就能够避免输入空格触发`click`事件的问题。
具体操作如下:
1. 将`el-popover`的`trigger`属性设置为`manual`,表示手动控制弹出框的显示和隐藏。
2. 给触发`el-popover`的元素绑定`mousedown`事件,当事件触发时,手动调用`el-popover`的`show`方法显示弹出框。
3. 给整个页面绑定`mousedown`事件,当事件触发时,手动调用`el-popover`的`hide`方法隐藏弹出框。
示例代码如下:
```html
<el-popover trigger="manual" ref="popover">
<!-- 弹出框内容 -->
</el-popover>
<div @mousedown="showPopover">触发弹出框</div>
<script>
export default {
methods: {
showPopover() {
this.$refs.popover.show();
},
hidePopover() {
this.$refs.popover.hide();
},
},
mounted() {
document.addEventListener('mousedown', this.hidePopover);
},
beforeDestroy() {
document.removeEventListener('mousedown', this.hidePopover);
},
};
</script>
```
这样就能够避免中文输入法输入空格触发`click`事件的问题了。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)