更新记录

1.0.0（2024-06-21）

新增

平台兼容性

hbxw-btn-bar组件

介绍

按钮条组件，通过配置可以生成形形色色的按钮条，可玩性不错，默认的样式也可以直接使用

使用示例

推荐先直接复制示例代码到工程中看效果了解下使用方法再投入项目使用。

<template>
    <view class="container">
        <!-- fixed在顶部按钮 -->
        <hbxw-btn-bar isFixed :btns="listTop" position="top" isPlaceholder @click="topBtnClick" />

        <view class="test-title">通过btns控制按钮渲染</view>
        <hbxw-btn-bar :btns="list0" isPlaceholder @click="midBtnClick" />

        <view class="test-title">通过height设置按钮条的高度</view>
        <hbxw-btn-bar :btns="listTop" height="168rpx" isPlaceholder @click="midBtnClick" />

        <view class="test-title">通过wrapStyle设置主容器样式,如背景为#ff0，去掉阴影，按钮条高度通过height来设置</view>
        <hbxw-btn-bar :btns="listTop" :wrapStyle="{backgroundColor: '#ff0','boxShadow': 'none'}" isPlaceholder @click="midBtnClick" />

        <view class="test-title">通过main具名slot自定义整个按钮区域</view>
        <hbxw-btn-bar isPlaceholder @click="midBtnClick">
            <template #main>
                <view>整个按钮区域都是我的</view>
            </template>
        </hbxw-btn-bar>

        <view class="test-title">通过btn具名slot自定按钮</view>
        <hbxw-btn-bar :btns="listTop" position="bottom" isPlaceholder @click="bottomBtnClick">
            <template #btn={item,index}>
                <button v-if="index == 0" size="mini" open-type="contact">联系客户</button>
                <button size="mini" v-else>{{item.text}}</button>
            </template>
        </hbxw-btn-bar> 

        <view class="test-item">这里占位内容</view>
        <hbxw-btn-bar isFixed :btns="list" position="bottom" isPlaceholder @click="bottomBtnClick" />
    </view>
</template>

<script>
    export default {
        data() {
            return {
                list: [
                    {
                        text: '长条按钮',
                        color: '#287EFF',
                        style: {borderRadius:'50rpx'}
                    }
                ],
                listTop: [
                    {
                        text: '左边按钮',
                        color: '#287EFF',
                    },{
                        text: '中间按钮',
                        color: '#389E0D',
                        style: {borderRadius:'50rpx'}
                    },{
                        text: '右边按钮',
                        color: '#E17D52',
                        plain: true
                    }
                ],
            list0: [
                {
                    text: '左边按钮',
                    color: '#287EFF',
                    style: {borderRadius:'50rpx'}
                },{
                    text: '右边按钮',
                    color: '#E17D52',
                    plain: true
                }
            ],
            }
        },
        methods: {
            topBtnClick(item, index) {
                console.log('---- 顶部按钮被点击  ----:', item, index);
            },
            bottomBtnClick(item, index) {
                console.log('---- 底部按钮被点击  ----:', item, index);
            },
            midBtnClick(item, index) {
                console.log('---- 中间按钮被点击  ----:', item, index);
            }
        }
    }
</script>

<style lang="scss" scoped>
    .container{
        display: flex;
        align-items: stretch;
        flex-direction: column;
    }

</style>

注：wrapStyle可以直接修改按钮父级样式，但是因为高度要考虑到placeholder的情况，所以按钮条高度通过height来配置

API

Props

Events