Vue自定义Tag标签

1、需求：项目中有好几处用到标签组，有单行、多行、单行显示不下省略（鼠标放上去提示）等等需求，为了方便使用提取为组件。

2、在项目的components文件下新建文件夹TagList，文件下三个文件(index.vue、tag-atom.less、TagEllipsis.vue)。

①index.vue对应的代码：

②tag-atom.less对应的代码：

@space: 6px;

.tag-space {
  margin: 0 @space @space 0;
}
.tag-space-no-wrap {
  margin-right: @space;
}

// 省略号
.text-ellipsis {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

// # 单个标签
.tag-ellipsis {
  display: inline-block;
  height: 22px;
  padding: 0 8px;
  border-radius: 2px;
  line-height: 22px;
  background: rgba(19, 19, 20, 0.6);
  color: #6b779e;
  cursor: pointer;
  &--num {
    font-weight: 700;
  }
}

// # 标签列表
.tag-list.row-main {
  position: relative;
  min-height: 24px;
  margin-right: 12px;
  width: 100%;
  // height: 100%;
  
  // 多行
  .tag-ellipsis {
    .tag-space();
  }
  
  // 不换行
  &.no-wrap {
    min-height: 32px;
    .tag-ellipsis {
      .tag-space-no-wrap();
    }
  }
}

 ③TagEllipsis.vue对应的代码：

3、在vue文件中适用：

import TagList from "@/components/TagList"