更新记录

1.0.0（2023-02-21）

1. 添加打开关闭动画;
2. 添加底部安全区域高度(未测试);

0.0.0（2021-06-28）

操作菜单组件

平台兼容性

基本用法

<template>
    <view>
        <button class="button" @tap="open">打开操作菜单</button>

        <ch-action-menu v-model="show" :list="list" :cancleText="cancleText" :tips="tips" :tipsStyle="tipsStyle"
            :itemStyle="itemStyle" :cancleStyle="cancleStyle" :maskCloseAble="maskCloseAble">
        </ch-action-menu>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                show: false,
                maskCloseAble: true,
                cancleText: '自定义取消按钮文字',
                tips: '这里是顶部提示，可以为空',
                // 自定义顶部提示的样式
                tipsStyle: {
                    // backgroundColor: '#f1f1f1'
                },
                // 自定义菜单项的样式
                itemStyle: {
                    // fontSize: '60rpx',
                    // color: '#55007f'
                },
                // 自定义取消按钮的样式
                cancleStyle: {
                    // backgroundColor: '#e1e0ff'
                },
                list: [{
                        text: '菜单1'
                    },
                    {
                        text: '菜单2',
                        subText: '描述'
                    },
                    {
                        text: '菜单3'
                    },
                    {
                        text: '菜单4'
                    }
                ]
            }
        },
        methods: {
            open() {
                this.show = true
            }
        }
    }
</script>

<style lang="scss">
</style>

启动方式

1. 属性show被赋值为true

属性

事件