uniapp实现展示1个或多个文字标签，可点击切换选中、不选中的状态

前言

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>