更新记录

1.0.0（2024-05-24）

1.0.0（2024-05-24）

ProTag 标签组件

注：该版本是基于vue2开发的，所以只支持vue2，后续会升级vue3版本

功能

1. 支持标签的展示
2. 支持自定义标签的颜色，字体大小，行高，是否显示背景颜色， 空心标签，标签的圆角

平台兼容性

uni-app

uni-app x

1.0.0（2024-05-24）

ProTag 标签组件

注：该版本是基于vue2开发的，所以只支持vue2，后续会升级vue3版本

功能

1. 支持标签的展示
2. 支持自定义标签的颜色，字体大小，行高，是否显示背景颜色， 空心标签，标签的圆角

代码示例

<template>
    <view class="content">
         <view class="ui-title">tag使用示例--不同颜色</view>
     <pro-tag color="red" dot>标记</pro-tag>
     <pro-tag color="pink" dot>标记</pro-tag>
     <pro-tag color="blue" dot>标记</pro-tag>
     <pro-tag color="orange" dot>标记</pro-tag>
     <pro-tag color="green" dot>标记</pro-tag>
     <pro-tag color="cyan" dot>标记</pro-tag>
     <pro-tag color="purple" dot>标记</pro-tag>
     <pro-tag color="yellow" dot>标记</pro-tag>
     <pro-tag color="#3975c6" dot>标记</pro-tag>

     <view class="ui-title">tag使用示例--不同尺寸</view>
      <!-- mini small default medium large -->
     <pro-tag color="red" size="mini" dot>标记</pro-tag>
     <pro-tag color="red" size="small" dot>标记</pro-tag>
     <pro-tag color="red" size="default" dot>标记</pro-tag>
     <pro-tag color="red" size="medium" dot>标记</pro-tag>
     <pro-tag color="red" size="large" dot>标记</pro-tag>
     <view class="ui-title">tag使用示例--不同字体大小</view>
     <!-- fontSize -->
     <pro-tag color="red" :fontSize="14" dot>标记</pro-tag>
     <pro-tag color="red" :fontSize="16" dot>标记</pro-tag>
     <pro-tag color="red" :fontSize="18" dot>标记</pro-tag>
     <view class="ui-title">tag使用示例--不同行高</view>
     <!-- height -->
     <pro-tag color="red" :fontSize="14" :height="26" dot>标记</pro-tag>
     <pro-tag color="red" :fontSize="14" :height="32" dot>标记</pro-tag>
     <view class="ui-title">tag使用示例--是否展示背景色</view>
     <!-- plain 镂空展示 -->
     <pro-tag color="red" :fontSize="14" plain dot>标记</pro-tag>
    </view>
</template>

<script>
    export default {
        data() {
            return {

            }
        },
        onLoad() {

        },
        methods: {

        }
    }
</script>

<style>
    .content {
    height:100vh;
    padding: 20rpx;
        background-color: #f8f8f8;
    }
  .ui-title{
    margin-bottom: 20rpx;
    font-size: 28rpx;
    color: #979a9e;
  }

</style>

API

ProTag props