实现如下图所示的一个标签选择组件。
图1:标签选中时的效果
图2:标签新建时的效果
实现
tagSelect.vue
<template>
<div class="sys-tag">
<el-popover :visible-arrow="false" :offset="-50" width="600" v-model="tagVisible">
<div style="padding: 10px">
<el-tag
class="select-tag pointer"
:color="tag.color"
effect="dark"
closable
v-for="(tag, index) in selected"
:key="index"
@close="closeLabel(index)"
>{
{
tag.labelName }}</el-tag>
<span style="color: #aaa" v-if="selected">还可以添加{
{
6 - selected.length }}个标签</span>
<div style="padding: 10px 0">
<el-input
v-model="labelName"
clearable
style="width: 300px"
placeholder="添加标签"
@keyup.enter.native="addLabel"
></el-input>
</div>
<div v-show="labelName">
<div style="padding: 10px">选择一个颜色</div>
<div
@click="color = item"
class="color-item pointer"
:style="'background-color:' + item"
v-for="(item, index) in colorList"
:key="index"
>
<i v-if="color == item" class="el-icon-check pos-center"></