mui 之 弹出菜单

说明

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

代码块：mpopover

官方文档：https://dev.dcloud.net.cn/mui/ui/#ui_popover

第一种弹出菜单方法

mui推荐使用锚点方式

<!-- href 加 # 号，锚点 -->
<a href="#popover" id="openPopover" class="mui-btn mui-btn-primary mui-btn-block">打开弹出菜单</a>
<!-- 弹出菜单 -->
<div id="popover" class="mui-popover">
    <ul class="mui-table-view">
        <li class="mui-table-view-cell"><a href="#">个人中心</a></li>
        <li class="mui-table-view-cell"><a href="#">修改密码</a></li>
        <li class="mui-table-view-cell"><a href="#">安全退出</a></li>
    </ul>
</div>

第二种弹出菜单方法

使用Js方法控制，mui('选择器').popover(status[,anchor]);

• status：点击状态，三个可选值。
  • 'show'：显示弹出框
  • 'hide'：隐藏弹出框
  • 'toggle'：自动识别处理显示隐藏状态
• anchor：可选，anchorElement
  锚点元素，定义弹出框在哪个元素下弹出。

<!-- 按钮点击弹出 -->
<a id="openPopover" class="mui-btn mui-btn-primary mui-btn-block">打开弹出菜单</a>
<!-- 弹出菜单 -->
<div id="popover" class="mui-popover">
    <ul class="mui-table-view">
        <li class="mui-table-view-cell"><a href="#">个人中心</a></li>
        <li class="mui-table-view-cell"><a href="#">修改密码</a></li>
        <li class="mui-table-view-cell"><a href="#">安全退出</a></li>
    </ul>
</div>
<script type="text/javascript">
    // 添加点击事件
    document.getElementById("openPopover").addEventListener("tap",function(){
        mui("#popover").popover("toggle")
    })
</script>

mui('.mui-popover').popover('toggle',document.getElementById("openPopover"));