wxc-tag

Weex 通用标签组件，支持实心标签、空心标签、特殊标签、图片标签

Demo

wxc-tag 标签 - 图1 wxc-tag 标签 - 图2

使用方法

  1. <template>
    2.   <div class="wrapper">
    3.    <wxc-tag type="solid"
    4.             tag-color="#ff5000"
    5.             font-color="#ffffff"
    6.             value="实心标签"></wxc-tag>
    7.   </div>
    8. </template>
    9. <script>
    10.   import { WxcTag } from 'weex-ui';
    11.   export default {
    12.     components: { WxcTag }
    13.   };
    14. </script>Click to copy
  • 更多数据格式可以参考 demo/data.js
  • 更多详细情况可以参考 demo

可配置参数

Prop Type Required Default Description
type String N solid 标签的类型(注1)
value String Y - 文字标签的文案
tag-color String N #ff5000 标签颜色
font-color String N #ffffff 文字颜色
special-icon String N - 特殊标签的小icon(注2)
img String N - 图片类型tag的图片地址(注3)
* 注1: type的类型有如下四种solid、hollow、special、image，默认是solid(实心)
* 注2: specialIcon本应该为iconfont的，但是考虑的Weex,直接使用png会更方便
* 注3: type为image时，img字段为必传

Please feel free to use and contribute to the development.

原文: https://alibaba.github.io/weex-ui/#/cn/packages/wxc-tag/