前言
uni-tag是uni-app框架提供的一个标签组件，用于展示标签或者标记某个元素。它可以在视图中用来显示一组标签，并且支持自定义样式和事件。
提示：以下是本篇文章正文内容，下面案例可供参考
uni-notice-bar组件具有以下特点：：
1、灵活性：uni-tag组件支持自定义样式，可以根据需求设置不同的标签样式，比如背景色、边框样式等。并且可以根据标签的个数自动调整宽度，适应不同的屏幕尺寸。
2、可交互性：uni-tag组件可以添加点击事件和其他的交互行为，让用户能够与标签进行交互。比如点击某个标签可以触发某个事件，或者标签的选中状态可以通过点击来切换。
3、多样性：uni-tag组件支持多种类型的标签显示，比如文字标签、图标标签等。可以根据需要选择不同的标签类型，增加页面的多样性。
4、参数配置：uni-tag组件提供了一系列的参数配置，可以通过修改参数来实现不同的效果。比如可以设置标签的形状、大小、颜色等。
如下图所示，本篇文章展示了非常多的用法和示例代码
<template>
<view class="container">
<uni-card is-full>
<text class="uni-h6">标签组件多用于商品分类、重点内容显示等场景。</text>
</uni-card>
<uni-section title="实心标签" type="line" padding>
<view class="example-body">
<view class="tag-view">
<uni-tag text="标签" type="primary" />
</view>
<view class="tag-view">
<uni-tag text="标签" type="success" />
</view>
<view class="tag-view">
<uni-tag text="标签" type="warning" />
</view>
<view class="tag-view">
<uni-tag text="标签" type="error" />
</view>
<view class="tag-view">
<uni-tag text="标签" />
</view>
</view>
</uni-section>
<uni-section title="空心标签" subTitle="使用 inverted 属性显示空心表签" type="line" padding>
<view class="example-body">
<view class="tag-view">
<uni-tag :inverted="true" text="标签" type="primary" />
</view>
<view class="tag-view">
<uni-tag :inverted="true" text="标签" type="success" />
</view>
<view class="tag-view">
<uni-tag :inverted="true" text="标签" type="warning" />
</view>
<view class="tag-view">
<uni-tag :inverted="true" text="标签" type="error" />
</view>
<view class="tag-view">
<uni-tag :inverted="true" text="标签" />
</view>
</view>
</uni-section>
<uni-section title="标签尺寸" subTitle="使用 size 属性控制标签大小" type="line" padding>
<view class="example-body">
<view class="tag-view">
<uni-tag text="标签" type="primary" size="normal" />
</view>
<view class="tag-view">
<uni-tag text="标签" type="primary" size="small" />
</view>
<view class="tag-view">
<uni-tag text="标签" type="primary" size="mini" />
</view>
</view>
</uni-section>
<uni-section title="圆角样式" subTitle="使用 circle 属性控制标签圆角" type="line" padding>
<view class="example-body">
<view class="tag-view">
<uni-tag :circle="true" text="标签" type="primary" />
</view>
<view class="tag-view">
<uni-tag :circle="true" text="标签" type="primary" size="small" />
</view>
<view class="tag-view">
<uni-tag :circle="true" text="标签" type="primary" size="mini" />
</view>
</view>
</uni-section>
<uni-section title="标记样式" subTitle="使用 mark 属性显示标记样式" type="line" padding>
<view class="example-body">
<view class="tag-view">
<uni-tag :mark="true" text="标签" type="primary" size="default" />
</view>
<view class="tag-view">
<uni-tag :mark="true" text="标签" type="primary" size="small" />
</view>
<view class="tag-view">
<uni-tag :mark="true" text="标签" type="primary" size="mini" />
</view>
</view>
</uni-section>
<uni-section title="不可点击状态" subTitle="使用 disabled 属性 显示禁用样式" type="line" padding>
<view class="example-body">
<view class="tag-view">
<uni-tag disabled text="标签" type="primary" />
</view>
</view>
</uni-section>
<uni-section title="自定义样式" subTitle="使用 custom-style 属性自定义样式" type="line" padding>
<view class="example-body">
<view class="tag-view">
<uni-tag text="自定义标签样式"
custom-style="background-color: #4335d6; border-color: #4335d6; color: #fff;">
</uni-tag>
</view>
</view>
</uni-section>
<uni-section title="点击事件" type="line" padding>
<view class="example-body">
<view class="tag-view">
<uni-tag :type="type" text="标签" @click="setType" />
</view>
<view class="tag-view">
<uni-tag :circle="true" :inverted="inverted" text="标签" type="primary" @click="setInverted" />
</view>
</view>
</uni-section>
</view>
</template>
<script>
export default {
components: {},
data() {
return {
type: "default",
inverted: false,
};
},
methods: {
setType() {
let types = ["default", "primary", "success", "warning", "error"];
let index = types.indexOf(this.type);
types.splice(index, 1);
let randomIndex = Math.floor(Math.random() * 4);
this.type = types[randomIndex];
},
setInverted() {
this.inverted = !this.inverted;
},
},
};
</script>
API
总结来说，uni-tag是uni-app框架中一个功能强大且灵活的标签组件，可以用于展示、标记和交互，为开发者提供了很多方便和自定义的选项。
