Tag 标签

使用指南

在 page.json 中引入组件

  1. "usingComponents": {
  2.   "w-tag": "wuss-weapp/w-tag/index",
  3. }

图片演示

Tag 标签 - 图1

代码演示

  1. <w-pane title="Tag" desc="标签" />
  2. <view class="tag-container">
  4. <w-tag bindclick="tagClick">VIP</w-tag>
  5. <w-tag color="magenta">VIP</w-tag>
  6. <w-tag color="red">VIP</w-tag>
  7. <w-tag color="volcano">VIP</w-tag>
  8. <w-tag color="orange">VIP</w-tag>
  9. <w-tag color="gold">VIP</w-tag>
  10. <w-tag color="lime">VIP</w-tag>
  11. <w-tag color="green">VIP</w-tag>
  12. <w-tag color="cyan">VIP</w-tag>
  13. <w-tag color="blue">VIP</w-tag>
  14. <w-tag color="geekblue">VIP</w-tag>
  15. <w-tag color="purple">VIP</w-tag>
  16. <w-tag closeable bindafterClose="afterClose" bindclose="close" visible="{{ visible }}">点击关闭</w-tag>
  17. <w-tag tagStyle="color:#fff;background-color:green;border-color:green;">green</w-tag>
  18. <w-tag tagStyle="color:pink;border-color:pink;">pink</w-tag>
  20. <w-button type="info" bindclick="toggleTag">toggleTag</w-button>
  21. </view>

API

Attribute 属性

属性说明类型默认值
visible控制是否可见booleanfalse
closeable是否可以关闭booleanfalse
color字体颜色string-
tagStyletag 的 style 样式string-

Event 事件

事件名说明参数
closecloseable 为 true 时 关闭触发——
afterClosecloseable 为 true 时 关闭动画完成后触发——

Slot 插槽

名称说明
-自定义文本内容

Class 自定义类名

类名说明
wuss-class根节点样式类