更新记录

1.0.2（2024-12-23） 下载此版本

新增按钮内部点击事件抛出，完善使用说明文档，优化代码，删减无用文件

1.0.1（2024-12-23） 下载此版本

新增theme主题配置属性、新增按钮背景颜色属性、扩展菜单配置项属性

1.0.0（2024-12-19） 下载此版本

这个是一个模拟uni-app小程序样式的胶囊按钮菜单组件初版

平台兼容性

这个是一个模拟uni-app小程序样式的胶囊按钮菜单组件、主要用于uni-app小程序需要自定义胶囊按钮菜单场景使用。

插件地址[https://ext.dcloud.net.cn/plugin?id=21497]

组件名称：capsule-button、本组件依赖uView ui组件库，运行前请 npm install 安装依赖

完整使用示例

<template>
    <view class="content">
        <u-navbar title="个人中心" :autoBack="true" :fixed='false'>
            <view slot='right'>
                <capsule-button capsuleShow />
            </view>
        </u-navbar>
        <view style="height: 10px;"></view>
        <u-navbar title="个人中心" :autoBack="true" :fixed='false' bgColor='#0064FF' leftIconColor='#fff'
            :titleStyle="{'color':'#fff'}">
            <view slot='right'>
                <capsule-button capsuleShow iconTheme='white' bgColor='#0064FF' />
            </view>
        </u-navbar>
        <view style="height: 10px;"></view>
        <u-navbar title="个人中心" :autoBack="true" :fixed='false' bgColor='#000' leftIconColor='#fff'
            :titleStyle="{'color':'#fff'}">
            <view slot='right'>
                <capsule-button capsuleShow iconTheme='white' bgColor='#000' />
            </view>
        </u-navbar>
    </view>
</template>

<script>
    import capsuleButton from '@/components/capsule-button/capsule-button.vue'
    export default {
        components: {
            capsuleButton
        },
        data() {
            return {}
        },
        methods: {}
    }
</script>

<style>
    .content {
        background: #eee;
        min-height: 100vh;
    }
</style>

属性

事件