Tag 标签

概述

对不同维度进行简单的标记和分类。

使用指南

在 .json 中引入组件

  1. "usingComponents": {
  2.     "i-tag": "../../dist/tag/index"
  3. }

示例

  1. 基本用法
  3. <i-tag>标签一</i-tag>
  5. 设置边框配置
  7. <i-tag 
  8.     class="i-tags"
  9.     name="标签一" 
  10.     type="border" 
  11.     color="red">
  12.     标签一
  13. </i-tag>
  14. <i-tag 
  15.     class="i-tags"
  16.     name="标签一" 
  17.     color="green"
  18.     type="border">
  19.     标签一
  20. </i-tag>
  22. 各种颜色配置
  24. <i-tag 
  25.     class="i-tags"
  26.     name="单个标签">
  27.     标签一
  28. </i-tag>
  29. <i-tag 
  30.     class="i-tags"
  31.     name="单个标签" 
  32.     color="red">
  33.     标签一
  34. </i-tag>
  35. <i-tag 
  36.     class="i-tags" 
  37.     name="标签一" 
  38.     color="green">
  39.     标签一
  40. </i-tag>
  41. <i-tag 
  42.     class="i-tags" 
  43.     name="标签一" 
  44.     color="blue">
  45.     标签一
  46. </i-tag>
  47. <i-tag 
  48.     class="i-tags" 
  49.     name="标签一" 
  50.     color="yellow">
  51.     标签一
  52. </i-tag>
  54. 多个标签
  56. <i-tag 
  57.     wx:for="{{tags}}" 
  58.     wx:key="{{index}}"
  59.     bindchange="onChange" 
  60.     checkable="{{true}}" 
  61.     name="{{index}}" 
  62.     color="{{item.color}}" 
  63.     checked="{{item.checked}}" 
  64.     type="border"
  65.     style="margin-right:5px;">
  66.     {{item.name}}
  67. </i-tag>
  1. Page({
  2.     data : {
  3.         oneChecked : false,
  4.         tags : [
  5.             {
  6.                 name : '标签一',
  7.                 checked : false,
  8.                 color : 'default'
  9.             },
  10.             {
  11.                 name : '标签二',
  12.                 checked : false,
  13.                 color : 'red'
  14.             },
  15.             {
  16.                 name : '标签三',
  17.                 checked : true,
  18.                 color : 'blue'
  19.             },
  20.             {
  21.                 name : '标签4️',
  22.                 checked : true,
  23.                 color : 'green'
  24.             }
  25.         ]
  26.     },
  27.     oneChange(event){
  28.         this.setData({
  29.             'oneChecked' : event.detail.checked
  30.         })
  31.     },
  32.     onChange(event){
  33.         const detail = event.detail;
  34.         this.setData({
  35.             ['tags['+event.detail.name+'].checked'] : detail.checked
  36.         })
  38.     }
  39. });

API

Tag properties

属性说明类型默认值
i-class自定义 class 类名String-
checkable标签是否可以选择Booleanfalse
name当前标签的名称String-
checked标签的选中状态Booleantrue
type标签的样式类型，可选值为 border、dotStringdot
color标签颜色，预设颜色值为 blue、green、red、yellow、default，你也可以自定义颜色值。Stringdefault

Tag events

事件名说明返回值
bind:change状态改变时触发{ name, checked }