mui popover弹出菜单

      在项目中有时需要实现下拉列表的条件筛选，与一些通知弹窗，这时就会经常使用到Popover组件，但是使用的时候就会发现有很多问题，如  显示时不能自动定位到需要的位置，列表内容到达一定高度不能自己滚动，有时候制作一些弹出窗时，需要只有用户点击了“确定”或者其他按钮时才会关闭，点击遮罩层 是不能关闭的等等，下面我就介绍下我是怎么解决的。

   使用mui的popover 弹出菜单显示内容不限，但必须包裹在一个含.mui-popover 类的div中

  //自己想展示的内容

mui('.mui-popover').popover('show');//显示
mui('.mui-popover').popover('hide');//隐藏
mui('.mui-popover').popover('toggle');//自动识别处理显示隐藏状态

解决自动定位到当前元素的位置

var current=document.querySelector(当前点击显示下拉列表的元素);
//getBoundingClientRect用于获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置。 
var top=current.getBoundingClientRect().top; 
var left=current.getBoundingClientRect().left; 
var right=current.getBoundingClientRect().right;

//获取点击元素的高度
var currentHeight=current.clientHeight||current.offsetHeight;
//设定当前要实现的popover的位置
var popover=document.getElementById('popover');
popover.style.top=top+currentHeight;
//设置遮罩层位置
document.querySelector('mui-backdrop').style.top=''//根据自己所需设定
//显示popover
mui("#popover").popover('show');

//通过动态获取当前元素的位置 然后设定popover左,上,右和下就能动态实现popover位置显示了

列表内容超出后滚动

	

		

					
		
		
	


mui('.mui-scroll-wrapper1').scroll();//设置滚动 这里用mui-scroll-wrapper如果页面有别的滚动容器 
 可能会与别的滚动产生冲突 所以自定义的class 样式基本与mui-scroll-wrapper相同 根据需求自行调整

禁用点击遮罩层关闭popover

//用到stopPropagation() 停止给遮罩层派发事件 这样点击遮罩层就不会执行任何事件了，就能通过自己设定的关闭入口 去关闭弹出窗了
window.addEventListener('tap', function(e) {
    e.target.className == 'mui-backdrop mui-active' && e.stopPropagation();
},true)	

目前我只遇到这些问题，所以记录一下我的解决办法