qrcode
扫描二维码查看 H5 演示效果
qrcode
扫描二维码查看演示效果
taro-ui, 非 taro-ui-vue3
wxapp

Tag 标签

用于展示1个或多个文字标签，可点击切换选中、不选中的状态。

使用指南

在 Taro 文件中引入组件

import { AtTag } from 'taro-ui-vue3'

组件依赖的样式文件（仅按需引用时需要）

@import "taro-ui-vue3/dist/style/components/tag.scss";

用法

<template>
 <view>
  <AtTag>空心标签</AtTag>
  <AtTag type='primary'>实心标签</AtTag>
  <AtTag circle>大圆角</AtTag>
  <AtTag disabled>不可点击</AtTag>
  <AtTag size='small'>小标签</AtTag>
 </view>
</template>
<script>
export default {
  name: 'AtTagDemo'
}
</script>

点击事件

<!-- 点击返回当前标签名字和是否选中 -->
```html
<template>
 <view>
  <AtTag
    name='tag-1'
    type='primary'
    circle
    @click="onClick"
  >tag-1</AtTag>
 </view>
</template>
<script>
export default {
  name: 'AtTagDemo'，
  methods: {
    onClick() {
      console.log('点击了')
    }
  }
}
</script>

Tag 参数

参数说明类型可选值默认值
size大小尺寸Stringnormal, smallnormal
type样式类型Stringprimary-
name标签名字String--
circle是否大圆角Boolean-false
active是否为选中态Boolean-false
disabled是否为禁用态Boolean-false

Tag 事件

事件名称说明返回参数
onClick点击标签时触发，返回标签名字和状态name, active