更新记录

0.0.1（2026-02-03） 下载此版本

基于业务抽取而来，效果就如截图一样 如有差距，可自行下载源码进行修改

平台兼容性

uni-app(4.87)

uni-app x(4.87)

wm-headertips

// 总条数提示文字
totalTitle: {
    type: String,
    default: '总条数：'
},
// 总条数数量
total: {
    type: Number,
    default: 0
},
// 时间提示文字
timeTitle: {
    type: String,
    default: '更新时间：'
},
// 时间
time: {
    type: String,
    default: '2022-02-02'
},
// 按钮的文本
btnTitle: {
    type: String,
    default: '按钮'
}

<view class="wm-main-box">
    <!-- 方式一 -->
    <wm-headertips totalTitle="默认使用：" total="111"></wm-headertips>
    <!-- 方式二 -->
    <wm-headertips totalTitle="不显示时间：" total="222" @btn="handleBtn" :time="null" />
    <!-- 方式三 -->
    <wm-headertips totalTitle="全部自定义：" total="333" @btn="handleBtn">
        <template>
            <view>左边默认不使用</view>
        </template>
        <template #time>
            <view>123</view>
        </template>
        <template #btn>
            <view class="btn-list" style="display: flex">
                <text class="btn">123</text>
                <text class="btn">456</text>
                <text class="btn">789</text>
            </view>
        </template>
    </wm-headertips>
</view>
export default {
    data() {
        return {

        };
    },
    methods: {
        handleBtn() {
            console.log('点击 .... 按钮');
        }
    },
};
</script>

<style scoped lang="scss">
.btn-list {
    display: flex;
    .btn {
        margin-right: 10rpx;
        padding: 10rpx 20rpx;
        background: pink;
        border-radius: 8rpx;
        color: #fff;
    }
}
</style>