mui 之 操作表

说明

actionsheet一般从底部弹出，显示一系列可供用户选择的操作按钮； actionsheet是从popover控件基础上演变而来，实际上就是一个固定从底部弹出的popover。

代码块：mactionsheet

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

锚点弹出

<!-- 锚点弹出 -->
<a href="#sheet" id="openSheet" class="mui-btn mui-btn-primary mui-btn-block">打开操作表</a>

<!-- 操作表 -->
<div id="sheet" class="mui-popover mui-popover-bottom mui-popover-action ">
    <!-- 可选择菜单 -->
    <ul class="mui-table-view">
      <li class="mui-table-view-cell">
        <a href="#">菜单1</a>
      </li>
      <li class="mui-table-view-cell">
        <a href="#">菜单2</a>
      </li>
    </ul>
    <!-- 取消菜单 -->
    <ul class="mui-table-view">
      <li class="mui-table-view-cell">
        <a href="#sheet"><b>取消</b></a>
      </li>
    </ul>
</div>

使用 Js 弹出

<!-- 按钮弹出 -->
<a  id="openSheet" class="mui-btn mui-btn-primary mui-btn-block">打开操作表</a>

<!-- 操作表 -->
<div id="sheet" class="mui-popover mui-popover-bottom mui-popover-action ">
    <!-- 可选择菜单 -->
    <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>
    </ul>
    <!-- 取消菜单 -->
    <ul class="mui-table-view">
      <li class="mui-table-view-cell">
        <a href="#sheet"><b>取消</b></a>
      </li>
    </ul>
</div>

<script type="text/javascript">
    // 添加按钮弹出事件
    document.getElementById("openSheet").addEventListener("tap",function(){
        mui("#sheet").popover("toggle")
    })
</script>

点击取消隐藏

<script>
    // 点击取消 隐藏
    document.getElementById("hide-sheet").addEventListener("tap",function(){
        mui("#sheet").popover("hide")
    })
</script>