tag 标签

引入

全局引入，在miniprogram根目录下的app.json中配置，局部引入，在需要引入的页面或组件的index.json中配置。

// app.json 或 index.json
"usingComponents": {
  "wr-tag": "@retailwe/ui-tag/index"
}

代码演示

基础用法

<wr-tag>default</wr-tag>
<wr-tag type="primary">primary</wr-tag>
<wr-tag type="success">success</wr-tag>
<wr-tag type="danger">danger</wr-tag>
<wr-tag type="warning">warning</wr-tag>

镂空样式

<wr-tag plain>default</wr-tag>

圆角样式

<wr-tag round>default</wr-tag>

标记样式(半边圆角)

<wr-tag mark>default</wr-tag>

自定义颜色

<wr-tag color="#f2826a">default</wr-tag>

标签大小

<wr-tag type="success">success</wr-tag>
<wr-tag type="success" size="medium">标签</wr-tag>
<wr-tag type="success" size="large">标签</wr-tag>

可关闭标签

<wr-tag closeable bind:close="onClose" data-id="{{item.id}}">success</wr-tag>

API

icon Props

| 参数 | 说明 | 类型 | 默认值 | 版本 | |-----------|-----------|-----------|-------------|-------------| | type | 类型，可选值为primary success danger warning | string | - | - | | size | 大小, 可选值为large medium | string | - | - | | color | 标签颜色 | string | - | - | | plain | 是否为空心样式 | boolean | false | - | | round | 是否为圆角样式 | boolean | false | - | | mark | 是否为标记样式 | boolean | false | - | | text-color | 文本颜色，优先级高于color属性 | string | white | - | | closeable | 是否显示关闭按钮，点击该按钮会触发close事件 | boolean | false | - |

icon Event

| 事件名 | 说明 | 参数 | |------|------|------| | close | 点击tag关闭标志时触发 | - |

Slot

| 名称 | 说明 | |-----------|-----------| | - | Tag 显示内容 |

icon 外部样式类

| 类名 | 说明 | |-----------|-----------| | wr-class | 根节点外部样式类 |