popover菜单

需要先引入相关的CSS和JS文件：

<link rel="stylesheet" type="text/css" href="static/css/aui.min.css"/>

<link rel="stylesheet" type="text/css" href="static/css/aui.popover.css"/>

<script src="static/js/aui.min.js" type="text/javascript" charset="utf-8"></script>

<script src="static/js/aui.popover.js" type="text/javascript" charset="utf-8"></script>

参数介绍

示例代码

<style type="text/css">
    .btn-1 {
        margin-top: 66vh;
    }

    .footer-item {
        width: 60px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-size: 15px;
        color: var(--aui-blue);
        margin: 0;
        position: fixed;
        bottom: 0;
        z-index: 997;
    }

    .footer-item-1 {
        left: 0px;
    }

    .footer-item-2 {
        right: 0px;
    }
</style>
<div class="container">
    <header class="aui-header">
        <a class="aui-header-left" onclick="aui.closeWin()"><i class="iconfont iconreturn"></i></a>
        <div class="aui-header-title">popover菜单</div>
        <a class="aui-header-right"><i class="iconfont iconother"></i></a>
    </header>
    <div class="aui-content" style="padding: 15px 0 0 0;">
        <button class="aui-btn aui-btn-blue btn-0">打开菜单弹窗</button>
    </div>
</div>
<div class="aui-footer">
    <div class="footer-item footer-item-1">菜单</div>
    <div class="footer-item footer-item-2">菜单</div>
</div>
<script type="text/javascript">
    window.addEventListener("load", function(){
        var btns = document.querySelectorAll(".aui-btn");
        for(var i = 0; i < btns.length; i++){
            aui.touchDom(btns[i], "#FFF", "var(--aui-blue)", "1px solid var(--aui-blue)");
        }
        //打开菜单弹窗(右上角——>按钮下方)
        document.querySelector(".aui-header-right").addEventListener("click", function(){
            aui.popover.open({
                warp: '.aui-header-right',
                items: [
                    {name: '微信', img: 'static/img/weixin.png'},
                    {name: '朋友圈', img: 'static/img/pengyouquan.png'},
                    {name: 'QQ', img: 'static/img/QQ.png'},
                    {name: '微博', img: 'static/img/weibo.png'}
                ],
                mask: true,
                location: 'bottom'
            },function(ret){
                console.log(ret);
                aui.toast({msg: ret.el.querySelector("span").innerHTML});
            })
        });
        //打开菜单弹窗(页面靠近顶部位置——>按钮下方)
        document.querySelector(".btn-0").addEventListener("click", function(){
            aui.popover.open({
                warp: '.btn-0',
                items: [
                    {name: '首页'},
                    {name: '消息'},
                    {name: '设置'}
                ],
                mask: true,
                location: 'bottom'
            },function(ret){
                console.log(ret);
                aui.toast({msg: ret.el.querySelector("span").innerHTML});
            })
        });
        //打开菜单弹窗(左下角——>按钮下方)
        document.querySelector(".footer-item-1").addEventListener("click", function(){
            aui.popover.open({
                warp: '.footer-item-1',
                items: [
                    {name: '微信', color: '#1AA034', icon: 'iconweixin', iconColor: '#1AA034'},
                    {name: '朋友圈', icon: 'iconpengyouquan', iconColor: '#EB3C3B'},
                    {name: 'QQ', icon: 'iconqq', iconColor: '#30A5DD'},
                    {name: '微博', icon: 'iconweibo', iconColor: '#FF7C60'}
                ],
                mask: true,
                location: 'top'
            },function(ret){
                console.log(ret);
                aui.toast({msg: ret.el.querySelector("span").innerHTML});
            })
        });
        //打开菜单弹窗(右下角——>按钮下方)
        document.querySelector(".footer-item-2").addEventListener("click", function(){
            aui.popover.open({
                warp: '.footer-item-2',
                items: [
                    {name: '微信', icon: 'iconweixin', iconColor: '#1AA034'},
                    {name: '朋友圈', icon: 'iconpengyouquan', iconColor: '#EB3C3B'},
                    {name: 'QQ', icon: 'iconqq', iconColor: '#30A5DD'},
                    {name: '微博', icon: 'iconweibo', iconColor: '#FF7C60'}
                ],
                mask: true,
                location: 'top'
            },function(ret){
                console.log(ret);
                aui.toast({msg: ret.el.querySelector("span").innerHTML});
            })
        });
    });
</script>