Tag标签标记

    引入

    在app.json或index.json中引入组件，默认为ES6版本

    1.       "usingComponents": {
    2.    "vtu-tag": "/miniprogram_npm/vtuweapp/tag/vtu-tag"
    3. }
    4.

    代码演示

    实心标签

    1. <vtu-tag>标签</vtu-tag>
    2. <vtu-tag bg-color="red" font-color="#fff">标签</vtu-tag>
    3. <vtu-tag bg-color="orange" font-color="#fff">标签</vtu-tag>
    4. <vtu-tag bg-color="#7e35bd" font-color="#fff" shape="circle">标签</vtu-tag>
    5. <vtu-tag bg-color="#bd255c" font-color="#fff" shape="circle">标签</vtu-tag>
    6. <vtu-tag bg-color="#1abf28" font-color="#fff" shape="circle">标签</vtu-tag>
    7. <vtu-tag bg-color="#1f8fee" font-color="#fff" shape="round">标签</vtu-tag>
    8. <vtu-tag bg-color="#ff7b8d" font-color="#fff" shape="round">标签</vtu-tag>
    9. <vtu-tag bg-color="#fc973d" font-color="#fff" shape="round">标签</vtu-tag>
    10. <vtu-tag bg-color="#f0f9eb" font-color="#67c23a" shape="round">标签</vtu-tag>
    11. <vtu-tag bg-color="#fdf6ec" font-color="#e6a23c" shape="round">标签</vtu-tag>
    12.

    标签尺寸

    1. <vtu-tag>标签</vtu-tag>
    2. <vtu-tag size="mini">标签</vtu-tag>
    3.

    镂空标签

    1. <vtu-tag type="out">标签</vtu-tag>
    2. <vtu-tag type="out" bg-color="red">标签</vtu-tag>
    3. <vtu-tag type="out" bg-color="orange">标签</vtu-tag>
    4. <vtu-tag type="out" bg-color="#7e35bd" shape="circle">标签</vtu-tag>
    5. <vtu-tag type="out" bg-color="#bd255c" shape="circle">标签</vtu-tag>
    6. <vtu-tag type="out" bg-color="#1abf28" shape="circle">标签</vtu-tag>
    7. <vtu-tag type="out" bg-color="#1f8fee" shape="round">标签</vtu-tag>
    8. <vtu-tag type="out" bg-color="#ff7b8d" shape="round">标签</vtu-tag>
    9. <vtu-tag type="out" bg-color="#fc973d" shape="round">标签</vtu-tag>
    10.

    胶囊标签

    1. <vtu-tag type="capsule" icon="iconfont icon-xihuanfill">标签</vtu-tag>
    2. <vtu-tag type="capsule" icon="iconfont icon-xihuanfill" shape="circle" status="warning">标签</vtu-tag>
    3. <vtu-tag type="capsule" icon="iconfont icon-xihuanfill" shape="round" size="mini" bg-color="red">标签</vtu-tag>
    4.

    内置状态

    1. <vtu-tag type="out" status="primary">默认</vtu-tag>
    2. <vtu-tag status="primary">默认</vtu-tag>
    3. <vtu-tag type="out" status="success">成功</vtu-tag>
    4. <vtu-tag status="success">成功</vtu-tag>
    5. <vtu-tag type="out" status="danger">危险</vtu-tag>
    6. <vtu-tag status="danger">危险</vtu-tag>
    7. <vtu-tag type="out" status="warning">警告</vtu-tag>
    8. <vtu-tag status="warning">警告</vtu-tag>
    9.

    可删除

    1. <vtu-tag delete shape="circle" bind:click="click" data-label="上海" data-index="0">上海</vtu-tag>
    2. <vtu-tag type="out" shape="circle" delete data-label="南京" data-index="1" bind:click="click">南京</vtu-tag>
    3. <vtu-tag type="capsule" shape="circle" icon="iconfont icon-xihuanfill" delete data-label="北京" data-index="2" bind:click="click">北京</vtu-tag>
    4. <vtu-tag delete shape="circle" size="mini" data-label="武汉" data-index="3" bind:click="click">武汉</vtu-tag>
    6. Page({
    7.   data: {},
    8.   click: function(e) {
    9.     wx.showToast({
    10.       title: "正在删除[{0}]{1}标签".format(e.currentTarget.dataset.label, e.currentTarget.dataset.index),
    11.       icon: 'none',
    12.       duration: 2000
    13.     });
    14.   }
    15. });
    16.  
    17.

    组件参数

    Props

    参数说明类型默认值必填
    type标签类型，default:实心/out:镂空/capsule:胶囊Stringdefault否
    size大小尺寸，small/miniStringsmall否
    font-color字体颜色String-否
    bg-color标签背景色String-否
    shape标签形状，round/circleStringround否
    status内置状态，primary/danger/warning/successString-否
    icon图标String-否
    delete可删除Booleanfalse否

    Events

    方法名说明参数返回值
    bind:click点击事件-绑定的参数对象

    外部样式类

    外部样式类名说明
    v-class组件外部样式类

    Tag 标签标记 - 图1