mui popoverポップアップメニュー
プロジェクトではドロップダウンリストの条件フィルタリングが必要になり、通知弾窓が必要になる場合があります.この場合、Popoverコンポーネントによく使用されますが、表示時に必要な位置に自動的に位置決めできず、リストの内容が一定の高さに達して自分でスクロールできない場合があります.ユーザーが「OK」または他のボタンをクリックした場合にのみ閉じる必要があります.マスク層をクリックしては閉じることができません.次に、私がどのように解決したのかを紹介します.
muiのpopoverポップアップメニューを使用する表示内容は限定されないが、1つに包まなければならない.mui-popoverクラスのdivで
現在の要素への自動配置の解決
リストの内容がオーバーしたらスクロール
マスクレイヤをクリックしてpopoverを閉じるのを無効にします
今のところ私はこれらの問題にしか遭遇していないので、私の解決方法を記録してください.
muiのpopoverポップアップメニューを使用する表示内容は限定されないが、1つに包まなければならない.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)
今のところ私はこれらの問題にしか遭遇していないので、私の解決方法を記録してください.