uniapp组件-uni-tag标签
官方示例:https://ext.dcloud.net.cn/plugin?id=35Tag 组件,用于展示1个或多个文字标签,可点击切换选中、不选中的状态一、实心标签<template><view><uni-tag text="标签" style="width: 61px;text-align: center;" /><uni-tag text="标签"
·
Tag 组件,用于展示1个或多个文字标签,可点击切换选中、不选中的状态
一、实心标签
<template>
<view>
<uni-tag text="标签" style="width: 61px;text-align: center;" />
<uni-tag text="标签" type="primary" style="width: 61px;text-align: center;" />
<uni-tag text="标签" type="success" style="width: 61px;text-align: center;" />
<uni-tag text="标签" type="warning" style="width: 61px;text-align: center;" />
<uni-tag text="标签" type="error" style="width: 61px;text-align: center;" />
</view>
</template>
二、空心标签
<template>
<view>
<uni-tag :inverted="true" text="标签" style="width: 61px;text-align: center;" />
<uni-tag :inverted="true" text="标签" type="primary" style="width: 61px;text-align: center;" />
<uni-tag :inverted="true" text="标签" type="success" style="width: 61px;text-align: center;" />
<uni-tag :inverted="true" text="标签" type="warning" style="width: 61px;text-align: center;" />
<uni-tag :inverted="true" text="标签" type="error" style="width: 61px;text-align: center;" />
</view>
</template>
三、圆角样式
<template>
<view>
<uni-tag :circle="true" text="标签" type="primary" size="small" style="width: 61px;text-align: center;" />
<uni-tag :circle="true" text="标签" type="success" size="small" :inverted="true" style="width: 61px;text-align: center;" />
<uni-tag :circle="true" text="标签" type="warning" style="width: 61px;text-align: center;" />
<uni-tag :circle="true" text="标签" type="error" :inverted="true" style="width: 61px;text-align: center;" />
</view>
</template>
四、标记样式
<template>
<view>
<uni-tag :mark="true" text="标签" type="primary" size="small" style="width: 61px;text-align: center;" />
<uni-tag :mark="true" text="标签" type="success" size="small" :inverted="true" style="width: 61px;text-align: center;" />
<uni-tag :mark="true" text="标签" type="warning" style="width: 61px;text-align: center;" />
<uni-tag :mark="true" text="标签" type="error" :inverted="true" style="width: 61px;text-align: center;" />
</view>
</template>
五、点击事件
<template>
<view>
<uni-tag :circle="true" :inverted="inverted" text="标签" type="primary" @click="setInverted" style="width: 61px;text-align: center;" />
</view>
</template>
<script>
export default {
components: {},
data() {
return {
inverted: false
};
},
methods: {
setInverted() {
this.inverted = !this.inverted;
}
}
};
</script>
六、小标签
<template>
<view>
<uni-tag text="标签" size="small" style="width: 61px;text-align: center;" />
<uni-tag text="标签" type="primary" size="small" style="width: 61px;text-align: center;" />
<uni-tag text="标签" type="success" size="small" style="width: 61px;text-align: center;" />
<uni-tag text="标签" type="warning" size="small" :inverted="true" :mark="true" style="width: 61px;text-align: center;" />
<uni-tag text="标签" type="error" size="small" :inverted="true" :circle="true" style="width: 61px;text-align: center;" />
</view>
</template>
七、不可点击状态
<template>
<view>
<uni-tag :disabled="true" text="标签" style="width: 61px;text-align: center;" />
<uni-tag :disabled="true" text="标签" type="primary" style="width: 61px;text-align: center;" />
<uni-tag :disabled="true" text="标签" type="error" size="small" :inverted="true" style="width: 61px;text-align: center;" />
</view>
</template>
更多推荐
已为社区贡献31条内容
所有评论(0)