PIUI 高质量开源组件库

# Tag 标签

tag 组件一般用于标记和选择，我们提供了更加丰富的表现形式，能够较全面的涵盖您的使用场景

# 平台差异说明

App H5 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ 小程序
√ √ √ √ √ √ √

# 示例

# 基本用法

  • 通过type参数设置主题类型，默认为primary
  • 属性text设置标签内容
<pi-tag type="warning" text="爱听粤语歌" />
1

# 自定义主题

  • 通过type参数设置主题类型，默认为primary，可选值为primary、success、info、warning、danger
<pi-tag text="ACG爱好者" custom-class="pi-mg-right-20" />
<pi-tag text="游戏宅" type="warning" custom-class="pi-mg-right-20" />
<pi-tag text="三坑少女" type="success" custom-class="pi-mg-right-20" />
<pi-tag text="中二病少年" type="error" custom-class="pi-mg-right-20 pi-mg-top-20" />
<pi-tag text="古典乐爱好者" type="info" custom-class="pi-mg-top-20" />
1
2
3
4
5

# 圆角标签

  • 通过shape参数设置标签形状，默认为square，可选值为circle（两边半圆形）, square（方形，带圆角）
<pi-tag text="观影爱好者" plain shape="circle" custom-class="pi-mg-right-20" />
<pi-tag text="美剧十级学者" shape="circle" />
1
2

# 镂空标签

  • 添加plain属性镂空
<pi-tag text="吉他新手" plain custom-class="pi-mg-right-20" />
<pi-tag text="峡谷小学生" type="warning" plain custom-class="pi-mg-right-20" />
<pi-tag text="快乐追星人" type="success" plain custom-class="pi-mg-right-20" />
<pi-tag text="漫威粉" type="error" plain custom-class="pi-mg-right-20 pi-mg-top-20" />
<pi-tag text="古典乐爱好者" type="info" plain custom-class="pi-mg-top-20" />
1
2
3
4
5

# 镂空带背景色

  • 添加plainFill属性镂空带背景色
<pi-tag text="古风" plain plain-fill custom-class="pi-mg-right-20" />
<pi-tag text="手风琴" type="warning" plain plain-fill custom-class="pi-mg-right-20" />
<pi-tag text="旋律控" type="success" plain plain-fill custom-class="pi-mg-right-20" />
<pi-tag text="轻音乐" type="error" plain plain-fill custom-class="pi-mg-right-20 pi-mg-top-20" />
<pi-tag text="古典乐爱好者" type="info" plain plain-fill custom-class="pi-mg-top-20" />
1
2
3
4
5

# 自定义尺寸

  • 通过size参数设置标签尺寸，默认为medium，可选值为large、medium、mini
<view class="pi-flex-column">
  <view>
    <pi-tag text="一万次悲伤" plain size="mini" custom-class="pi-mg-right-20" />
    <pi-tag text="一万次悲伤" plain size="medium" custom-class="pi-mg-right-20" />
    <pi-tag text="一万次悲伤" plain size="large" />
  </view>
  <view class="pi-mg-top-20">
    <pi-tag text="抑郁不是症" size="mini" custom-class="pi-mg-right-20" />
    <pi-tag text="抑郁不是症" size="medium" custom-class="pi-mg-right-20" />
    <pi-tag text="抑郁不是症" size="large" />
  </view>
</view>
1
2
3
4
5
6
7
8
9
10
11
12

# 可关闭标签

  • 通过closable属性设置可关闭，show属性控制标签显示与否
<template>
  <view class="pi-align-center">
    <view v-if="close1" class="pi-mg-right-40">
      <pi-tag text="粤语" size="mini" closable :show="close1" @close="close1 = false" />
    </view>
    <view v-if="close2" class="pi-mg-right-40">
      <pi-tag text="国语" type="warning" closable :show="close2" @close="close2 = false" />
    </view>
    <pi-tag
      text="外语"
      type="error"
      size="large"
      plain
      closable
      :show="close3"
      @close="close3 = false"
    />
  </view>
</template>
<script>
export default {
  data () {
    return {
      close1: true,
      close2: true,
      close3: true
    }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

# 带图片和图标

<view class="pi-align-center">
  <pi-tag text="点赞" plain size="mini" icon="praise" custom-class="pi-mg-right-20" />
  <pi-tag
    text="为你点赞"
    type="warning"
    icon="praise-fill"
    custom-class="pi-mg-right-20"
  />
  <pi-tag
    text="自定义图片"
    plain
    size="large"
    icon="https://piui.sadais.com/piui-awesome/static/tabbar/manage_fill.png"
  />
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 单选标签和多选标签

  • 通过color属性设置标签的文本颜色
  • 通过bgColor属性设置标签的背景颜色
  • 通过borderColor属性设置标签的边框颜色
  • 通过tagWrapperClass属性设置标签容器的样式类
  • 通过tagWrapperStyle属性设置标签容器的样式
<template>
  <pi-divider content-position="left" :custom-style="{ marginBottom: '48rpx' }">
    单选标签
  </pi-divider>
  <view class="pi-flex-wrap demo-tags">
    <pi-tag
      v-for="(item, index) in singleOptions"
      :key="index"
      :text="item.name"
      :name="item.code"
      :color="tagColor(item.code)"
      :bg-color="tagBgColor(item.code)"
      :border-color="tagBorderColor(item.code)"
      :custom-style="{ padding: '0 12rpx' }"
      tag-wrapper-class="col-4 pi-mg-right-20 pi-mg-bottom-20"
      @click="handleSelectSingle"
    />
  </view>
  <pi-divider content-position="left" :custom-style="{ margin: '48rpx 0' }">
    多选标签
  </pi-divider>
  <view class="pi-flex-wrap demo-tags">
    <pi-tag
      v-for="(item, index) in multipleOptions"
      :key="index"
      :text="item.name"
      :name="item.code"
      :color="tagColor(item.code)"
      :bg-color="tagBgColor(item.code)"
      :border-color="tagBorderColor(item.code)"
      :custom-style="{ padding: '0 12rpx' }"
      tag-wrapper-class="col-4 pi-mg-right-20 pi-mg-bottom-20"
      @click="handleSelectMutiple"
    />
  </view>
</template>
<script>
export default {
  name: 'Tag',
  data() {
    return {
      // 单选标签选项
      singleOptions: [
        {
          name: '5星好评',
          code: 5555
        },
        {
          name: '4星以上',
          code: 4444
        },
        {
          name: '点评高分',
          code: 3333
        }
      ],
      // 多选标签选项
      multipleOptions: [
        {
          name: '津贴优惠',
          code: 1
        },
        {
          name: '会员商家',
          code: 2
        },
        {
          name: '优惠商家',
          code: 3
        },
        {
          name: '满减优惠',
          code: 4
        },
        {
          name: '进店领券',
          code: 5
        },
        {
          name: '折扣商品',
          code: 6
        },
        {
          name: '首单立减',
          code: 7
        },
        {
          name: '满赠活动',
          code: 8
        }
      ],
      singleCode: '', // 单选标签选中的code
      multipleCode: [] // 多选标签选中的code
    }
  },
  computed: {
    // 单选标签选中
    isActive() {
      return code => {
        return this.singleCode === code || this.multipleCode.includes(code)
      }
    },
    // 标签文本颜色
    tagColor() {
      return code => {
        return this.isActive(code) ? '#ff9900' : '#333333'
      }
    },
    // 标签边框颜色
    tagBorderColor() {
      return code => {
        return this.isActive(code) ? '#ff9900' : '#f2f2f2'
      }
    },
    // 动态设置标签背景色
    tagBgColor() {
      return code => {
        return this.isActive(code) ? '#fdf6ec' : '#f2f2f2'
      }
    }
  },
  methods: {
    // 单选标签选择回调
    handleSelectSingle(code, name) {
      console.log(`选中了:code:${code},name:'${name}'`)
      this.singleCode = code
    },
    // 多选标签选择回调
    handleSelectMutiple(code) {
      if (this.multipleCode.includes(code)) {
        this.multipleCode.splice(this.multipleCode.indexOf(code), 1)
      } else {
        this.multipleCode.push(code)
      }
      console.log('选中了:' + JSON.stringify(this.multipleCode))
    }
  }
}
</script>
<style lang="scss" scoped>
.demo-tags {
  margin-right: -20rpx;
  .col-4 {
    width: calc(25% - 20rpx);
  }
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147

# 自定义样式

可通过custom-class, custom-style 设置标签样式

<pi-tag text="爱听粤语歌" custom-class="pi-mg-20" :custom-style="{ padding: '0 100rpx' }" />
1

# API

# Props

名称 描述 类型 必选 默认值
type 主题类型 'info' 'primary' 'success' 'warning' 'error' false primary
disabled 不可用 Boolean/String false false
size 标签大小 'large' 'medium' 'mini' false medium
shape 标签形状 'circle' 'square' false square
text 标签的文字内容 String/Number false -
bgColor 背景颜色，默认为空字符串，即不处理 String false #C6C7CB
color 标签字体颜色，默认为空字符串，即不处理 String false -
borderColor 标签的边框颜色 String false -
closeColor 关闭按钮图标的颜色 String/Number false -
name 点击时返回的索引值，用于区分例遍的数组哪个元素被点击了 String false -
plainFill 镂空时是否填充背景色 Boolean false false
plain 是否镂空 Boolean false false
closable 是否可关闭，设置为true，文字右边会出现一个关闭图标 Boolean false false
show 标签显示与否 Boolean false false
icon 内置图标，或绝对路径的图片 String false -
customStyle 自定义标签样式，对象形式 Object false {}
customClass 自定义标签样式类，字符串形式 String false ''
tagWrapperStyle 自定义标签容器样式，对象形式 Object false {}
tagWrapperClass 自定义标签容器样式类，字符串形式 String false ''

# Events

方法名称 说明 参数
click 点击标签触发 index: 传递的 index 参数值,text: 标签的文本
close closable为true时，点击标签关闭按钮触发 index: 传递的 index 参数值,text: 标签的文本
Last updated: 2022/7/4 上午9:03:00

← Collapse 折叠面板 →

10:44