更新记录

1.0.0（2025-07-16） 下载此版本

新增组件

平台兼容性

uni-app(4.06)

hbxw-tag 标签组件

简介

hbxw-tag 是一个轻量级的标签组件，支持多种样式和自定义配置，兼容Vue2和Vue3。

特性

• ✅ 兼容Vue2和Vue3
• ✅ 支持自定义样式
• ✅ 支持点击事件
• ✅ 轻量级，无依赖

使用示例

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

<template>
    <view class="demo-container">
        <!-- 基本用法 -->
        <view class="demo-section">
            <view class="section-title">基本用法</view>
            <view class="demo-row">
                <hbxw-tag></hbxw-tag>
                <hbxw-tag text="已支付"></hbxw-tag>
                <hbxw-tag text="已完成"></hbxw-tag>
                <hbxw-tag text="已取消"></hbxw-tag>
            </view>
        </view>

        <!-- 不同颜色 -->
        <view class="demo-section">
            <view class="section-title">不同颜色</view>
            <view class="demo-row">
                <hbxw-tag text="成功" bd-color="#52c41a" text-color="#52c41a"></hbxw-tag>
                <hbxw-tag text="警告" bd-color="#faad14" text-color="#faad14"></hbxw-tag>
                <hbxw-tag text="错误" bd-color="#f5222d" text-color="#f5222d"></hbxw-tag>
                <hbxw-tag text="信息" bd-color="#1890ff" text-color="#1890ff"></hbxw-tag>
            </view>
        </view>

        <!-- 填充背景色 -->
        <view class="demo-section">
            <view class="section-title">填充背景色</view>
            <view class="demo-row">
                <hbxw-tag text="成功" bd-color="#52c41a" text-color="#fff" bg-color="#52c41a"></hbxw-tag>
                <hbxw-tag text="警告" bd-color="#faad14" text-color="#fff" bg-color="#faad14"></hbxw-tag>
                <hbxw-tag text="错误" bd-color="#f5222d" text-color="#fff" bg-color="#f5222d"></hbxw-tag>
                <hbxw-tag text="信息" bd-color="#1890ff" text-color="#fff" bg-color="#1890ff"></hbxw-tag>
            </view>
        </view>

        <!-- 浅色背景 -->
        <view class="demo-section">
            <view class="section-title">浅色背景</view>
            <view class="demo-row">
                <hbxw-tag text="成功" bd-color="#52c41a" text-color="#52c41a" bg-color="#f6ffed"></hbxw-tag>
                <hbxw-tag text="警告" bd-color="#faad14" text-color="#faad14" bg-color="#fffbe6"></hbxw-tag>
                <hbxw-tag text="错误" bd-color="#f5222d" text-color="#f5222d" bg-color="#fff2f0"></hbxw-tag>
                <hbxw-tag text="信息" bd-color="#1890ff" text-color="#1890ff" bg-color="#f0f8ff"></hbxw-tag>
            </view>
        </view>

        <!-- 自定义样式 -->
        <view class="demo-section">
            <view class="section-title">自定义样式</view>
            <view class="demo-row">
                <hbxw-tag text="大标签" :custom-style="{fontSize: '28rpx', padding: '10rpx 16rpx'}"></hbxw-tag>
                <hbxw-tag text="圆形标签" :custom-style="{borderRadius: '30rpx'}"></hbxw-tag>
                <hbxw-tag text="无边框" :custom-style="{border: 'none'}" bg-color="#f0f0f0"></hbxw-tag>
            </view>
        </view>

        <!-- 点击事件 -->
        <view class="demo-section">
            <view class="section-title">点击事件</view>
            <view class="demo-row">
                <hbxw-tag text="点击我" @click="handleTagClick('标签1')"></hbxw-tag>
                <hbxw-tag text="可点击" @click="handleTagClick('标签2')" bd-color="#1890ff" text-color="#1890ff"></hbxw-tag>
                <hbxw-tag text="删除标签" @click="handleTagClick('删除')" bd-color="#f5222d" text-color="#f5222d"></hbxw-tag>
            </view>
        </view>

        <!-- 点击结果显示 -->
        <view class="demo-section" v-if="clickResult">
            <view class="section-title">点击结果</view>
            <view class="click-result">{{clickResult}}</view>
        </view>
    </view>
</template>

<script>
export default {
    name: 'TagDemo',
    components: {
        HbxwTag
    },
    data() {
        return {
            clickResult: ''
        }
    },
    methods: {
        handleTagClick(tagName) {
            this.clickResult = `点击了：${tagName}`
            console.log('点击了标签：', tagName)
        }
    }
}
</script>

<style lang="scss" scoped>
.demo-container {
    padding: 20rpx;
    background-color: #f5f5f5;
    min-height: 100vh;
}

.demo-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    text-align: center;
    margin-bottom: 40rpx;
    padding: 20rpx;
    background-color: #fff;
    border-radius: 12rpx;
}

.demo-section {
    margin-bottom: 40rpx;
    background-color: #fff;
    border-radius: 12rpx;
    padding: 30rpx;
}

.section-title {
    font-size: 28rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
    padding-bottom: 10rpx;
    border-bottom: 2rpx solid #f0f0f0;
}

.demo-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20rpx;
    align-items: center;
    margin-bottom: 20rpx;
}

.demo-row:last-child {
    margin-bottom: 0;
}

.click-result {
    background-color: #f0f8ff;
    color: #1890ff;
    padding: 16rpx;
    border-radius: 8rpx;
    font-size: 26rpx;
}
</style> 

API

Props

Events

许可证

MIT License

注：包体积显示偏大，是因为有示例动图，真正打包到项目中的是很小的，可放心使用