@retailwe/ui-tag NPM

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`	-