mx-action-button

mx-action-button 实现了底部弹出菜单的功能。

属性

属性名称 类型 默认值 必填 说明
title string 弹出菜单标题
items object array 弹出菜单项
cancelText string 取消 取消按钮标题
autoHide boolean true 点击菜单项是否自动隐藏弹出菜单
tapHidden boolean false 点击阴影区域是否自动隐藏弹出菜单
onitemclick eventhandle 点击菜单某项时触发,event.detail = {index}
oncancel eventhandle 取消时触发

示例

<template>
    <view class="page">
        <button class="btn" onclick="btnAction">点我弹出菜单</button>
        <mx-action-button v-if={showMenu} title="分享至" items={items} tapHidden onitemclick="onitemclick" oncancel="oncancel"></mx-action-button>
    </view>
</template>
<script>
import '../../components/mx-action-button/mx-action-button.stml'
export default {
    name: 'example',
    data() {
        return{
            showMenu: false,
            items: [{
                img: '../../image/wx.png',
                text: '微信'
            }, {
                img: '../../image/wx_circle.png',
                text: '朋友圈'
            }, {
                img: '../../image/qq.png',
                text: 'qq'
            }, {
                img: '../../image/qq_zone.png',
                text: 'qq空间'
            }, {
                img: '../../image/weibo.png',
                text: '微博'
            }, {
                img: '../../image/picture.png',
                text: '图片'
            }]
        }
    },
    methods: {
        btnAction(e){
            this.data.showMenu = true;
        },
        oncancel(){
            this.data.showMenu = false;
        },
        onitemclick(e){
            this.data.showMenu = false;
            let text = this.data.items[e.detail.index].text;
            api.toast({
                msg:'分享到' + text
            });
        }
    }
}
</script>
<style>
.page {
    height: 100%;
    background-color: white;
}
.btn {
    margin: 100px 15px;
}
</style>