Tag 标签

结构化展示精简信息的一种方式。

适用：

• 标记事务的属性、维度、状态
  
• 将事务分类
  
• 过滤同属性内容
  
• 展示差异化信息，辅助区分标记主体

通用原则

• 标签应与所标记的内容有明确而有用的关系
  
• 标签具有体积小，信息紧凑的特质，不建议标签内使用大段文本

类型

无操作标签

• 仅文本：静态文本标记对象特征或属性
  
• 带图标：常用于对于标签状态的表达，比如延期，截止时间等
  

可操作标签

提供：选中、删除、跳转等能力。

构成

1. 容器
   
2. 内容
   1. 图形（可选）
      
   2. 文本
      1. 通常为短语或词语
         
      2. 不允许折行，不允许省略
         
3. 操作（可选）
   

行为

四大状态

删除

标签可被移除：点击删除icon可移除指定标签，常用于表格、输入框内

点击跳转

标签本身带链接：点击后跳转至标签内容所属页面（注：标签内字段为目的地描述字段，动作描述建议使用按钮）

选中

标签可选中：同类条目里选择单/多项，多配合表格、表单使用（注：至少有两个标签）

开发自定义Tag组件

用于自定义tag 数组

何时使用

• 自定义数组tag 展示

代码演示

基本

<template>
 <y-link-tag :data="dataArr" v-model="linkTagValue" :selectType="1" />
</template>
<script>
  export default {
  data() {
    return {
      dataArr: [
        {
          label: 'CNware',
          value: '1',
        },
        {
          label: 'CNwareKV',
          value: '2',
        },
        {
          label: 'PowerVC',
          value: '3',
        },
        {
          label: '标签4',
          value: '4',
        },
        {
          label: '标签5',
          value: '5',
        },
      ],
      linkTagValue: '3,5',
    };
}
</script>

API