IOS的popover，点击其他地方，关闭失效

最新推荐文章于 2024-07-17 20:50:59 发布

一个小开心呀

最新推荐文章于 2024-07-17 20:50:59 发布

阅读量356

点赞数

文章标签： elementui vue.js typescript

本文链接：https://blog.csdn.net/weixin_52753294/article/details/125778816

版权

本文介绍了在Vue项目中，针对iOS设备上Popover点击其他区域无法关闭的常见问题，提供了一种解决方案。通过在最外层div添加点击事件，并在方法中判断Popover状态来实现关闭。同时，使用`click.stop`防止事件冒泡，确保正常关闭Popover。

摘要由CSDN通过智能技术生成

IOS的popover，点击其他地方，关闭失效
首先，在vue文件的最外层div上添加点击事件

<template>
  <div @click='closePopover'>
  	<!-- 页面 -->
  	<el-popover
       placement="bottom"
       width="350"
       trigger="click">
       <div>
         <p>111</p>
        </div>
        <a slot="reference" @click.stop="flag=true">222</a>
        <!-- stop是为了防止冒泡到最外层 -->
     </el-popover>
  </div>
 </template>
 <script>
 export default {
	 data () {
	 	return {
	 		flag: false,//popover是否打开关闭
	 	}
	 },
	 methods: {
	 	closePopover () {
	 		if(this.flag){//如果popover是打开状态，再走关闭，要不然会重复走
		        document.body.click()
		      }
		}
	}
 }
 </script>