更新记录

1.0.0（2025-03-21） 下载此版本

发布初版

平台兼容性

Tag 标签

组件名: xt-tag

适配情况需自行尝试,开发时只测试了 H5、APP、微信小程序

安装方式

本组件符合 easycom 规范，HBuilderX 3.1.0 起，只需将本组件导入项目，在页面 template 中即可直接使用，无需在页面中 import 和注册 components

注意事项

如何阻止事件冒泡

vue2：在组件上直接使用@click.native.stop，如：<xt-icon @click.native.stop='click'></xt-icon>;

vue3：由于 vue3 没有native修饰符,所以不能直接在组件上使用.stop修饰符,只能嵌套一层view标签,在外层view上添加@click.stop阻止冒泡

基本用法

<template>
    <view class="xt">
        <view>
            <view>基础使用</view>
            <view style="display: flex; gap: 20rpx; margin-top: 10rpx">
                <xt-tag @click="log" name="1">标签1</xt-tag>
                <xt-tag bgColor="#67C23A">标签2</xt-tag>
                <xt-tag bgColor="#909399">标签3</xt-tag>
                <xt-tag bgColor="#E6A23C">标签4</xt-tag>
                <xt-tag bgColor="#F56C6C">标签5</xt-tag>
            </view>
        </view>
        <view>
            <view>可关闭</view>
            <view style="display: flex; gap: 20rpx; margin-top: 10rpx">
                <xt-tag @close="close" name="1" closable>标签1</xt-tag>
                <xt-tag closable bgColor="#67C23A">标签2</xt-tag>
                <xt-tag closable bgColor="#909399">标签3</xt-tag>
                <xt-tag closable bgColor="#E6A23C">标签4</xt-tag>
                <xt-tag closable bgColor="#F56C6C">标签5</xt-tag>
            </view>
        </view>
        <view>
            <view>镂空</view>
            <view style="display: flex; gap: 20rpx; margin-top: 10rpx">
                <xt-tag plain>标签1</xt-tag>
                <xt-tag plain bgColor="#67C23A">标签2</xt-tag>
                <xt-tag plain bgColor="#909399">标签3</xt-tag>
                <xt-tag plain bgColor="#E6A23C">标签4</xt-tag>
                <xt-tag plain bgColor="#F56C6C">标签5</xt-tag>
            </view>
        </view>
        <view>
            <view>镂空并填充背景色</view>
            <view style="display: flex; gap: 20rpx; margin-top: 10rpx">
                <xt-tag plain plainFill>标签1</xt-tag>
                <xt-tag plain plainFill bgColor="#67C23A">标签2</xt-tag>
                <xt-tag plain plainFill bgColor="#909399">标签3</xt-tag>
                <xt-tag plain plainFill bgColor="#E6A23C">标签4</xt-tag>
                <xt-tag plain plainFill bgColor="#F56C6C">标签5</xt-tag>
            </view>
        </view>
        <view>
            <view>前后插槽</view>
            <view style="display: flex; gap: 20rpx; margin-top: 10rpx">
                <xt-tag bgColor="#67C23A">
                    <template #left>
                        <xt-icon size="30rpx" name="xt-icon-shaixuan"></xt-icon>
                    </template>
                    标签1
                </xt-tag>
                <xt-tag bgColor="#909399">
                    <template #left>
                        <xt-icon size="30rpx"></xt-icon>
                    </template>
                    标签2
                    <template #right>
                        <xt-icon size="30rpx" name="xt-icon-aixin1"></xt-icon>
                    </template>
                </xt-tag>
                <xt-tag bgColor="#E6A23C">
                    标签3
                    <template #right>
                        <xt-icon size="30rpx" name="xt-icon-xiaoshi1"></xt-icon>
                    </template>
                </xt-tag>
            </view>
        </view>
        <view>
            <view>自定义大小</view>
            <view style="display: flex; gap: 20rpx; margin-top: 10rpx">
                <xt-tag size="26rpx">标签1</xt-tag>
                <xt-tag bgColor="#67C23A">标签2</xt-tag>
                <xt-tag size="36rpx" bgColor="#909399">标签3</xt-tag>
                <xt-tag size="40rpx" bgColor="#E6A23C">标签4</xt-tag>
                <xt-tag size="50rpx" bgColor="#F56C6C">标签5</xt-tag>
            </view>
        </view>
    </view>
</template>
<script>
export default {
    data() {
        return {};
    },
    mounted() {},
    methods: {
        log(e) {
            console.log(e);
        },
        close(e) {
            console.log(e);
        }
    }
};
</script>
<style scoped>
.xt {
    padding: 20rpx 10rpx;
    display: flex;
    flex-direction: column;
    gap: 20rpx;
}
</style>

API

Events