vue 创建标签实现增删改查、点击改变字体颜色

2020年4月3日，新增搜索文字高亮

9月26日，更新了收藏和取消收藏功能

这个demo涉及的知识点挺多的，有需要的同学自己拷贝代码研究一下，代码里面基本都有注释了，注意这里使用了element ui，要记得下载一下这个插件。
实现效果图如下，增删改查基本都实现了，而且做了一些简单的条件限制，有需要的同学可以来拿玩一下。

<template>
  <div class="list">
    <ul>
      <el-input
        class="inline-input2"
        placeholder="请输入要新增的标签"
        v-model="newTag"
        size="mini"
      ></el-input>
      <button @click="add()">确定</button>
      <el-input
        class="inline-input"
        placeholder="请输入要查找的标签"
        suffix-icon="el-icon-search"
        v-model="tag"
        size="mini"
      ></el-input>
      <li v-for="(item, index) in filterData" :key="index" class="tag-list">
        <el-row>
          <el-col :span="12">
            <span
              class="tag-item"
              :class="{ active_tag: active === index }"
              :title="item.label"
              v-show="flag !== index"
              @click="changeColor(index)"
              v-html="item.label"
              ></span
            >
            <input
              ref="input"
              v-model="editName"
              @blur="updateName(item, index)"
              v-show="flag === index"
              class="tag-item"
            />
          </el-col>
          <el-col :span="12" class="tag-edit">
            <a href="#" @click="editor(item, index)">修改</a>
            <a href="#" @click="del(index)">删除</a>
            <a href="#" @click="moveUp(index)">上移</a>
            <a href="#" @click="moveDown(index)">下移</a>
            <a href="#" @click="collection(item, index)" v-if="!item.active"
              >收藏</a
            >
            <a
              href="#"
              @click="Cancelcollection(item, index)"
              v-if="item.active"
              >取消收藏</a
            >
          </el-col>
        </el-row>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'three',
  components: {},
  data () {
    return {
      tagList: [
        { label: '标签一' },
        { label: '标签二' },
        { label: '标签三' },
        { label: '标签四' }
      ],
      flag: -1,
      active: -1,
      editName: '',
      tag: '',
      newTag: '',
      successCollect: -1
    }
  },
  computed: {
    replaceArr () {
      const tagList = JSON.parse(JSON.stringify(this.tagList))
      const tag = this.tag
      // 匹配关键字正则
      const replaceReg = new RegExp(tag, 'g')
      // 高亮替换v-html值
      const replaceString = `<font color='#F14F4A'>${tag}</font>`
      for (let i = 0; i < tagList.length; i++) {
        // 开始替换
        tagList[i].label = tagList[i].label.replace(replaceReg, replaceString)
      }
      return tagList
    },
    /* 模糊搜索 */
    filterData () {
      const tag = this.tag
      if (tag) {
        return this.replaceArr.filter(data => {
          return Object.keys(data).some(key => {
            return (
              String(data[key])
                .toLowerCase()
                .indexOf(tag) > -1
            )
          })
        })
      }
      return this.replaceArr
    }
  },
  mounted () {
    this.addActive()
  },
  methods: {
    editor (item, index) {
      /* 给input框赋值 */
      this.editName = item.label
      this.flag = index
      /* this.$refs使其进入focus状态 */
      this.$nextTick(() => {
        this.$refs.input[index].focus()
      })
    },
    updateName (item, index) {
      /*  如果输入的标签名称为空 */
      if (!this.editName) {
        this.editName = item.label
        this.flag = -1
        return this.$message.warning('修改的标签名称不能为空')
      }
      /*  如果输入的标签名称已存在 */
      for (let i = 0; i < this.tagList.length; i++) {
        if (this.tagList[i].label === this.editName) {
          /* 判断修改的名字是否是它本身 */
          if (this.editName !== item.label) {
            this.$message.warning('修改的标签名称已存在')
            this.flag = -1
            return
          }
        }
      }
      /* 如果修改的标签名称正确 */
      this.$set(this.tagList[index], 'label', this.editName)
      this.flag = -1
    },
    /* 增加新标签 */
    add () {
      if (!this.newTag) {
        return this.$message.warning('请输入要新增的标签！')
      }
      for (let i = 0; i < this.tagList.length; i++) {
        if (this.tagList[i].label === this.newTag) {
          this.$message.warning('标签名称已存在')
          return
        }
      }
      this.tagList.push({ label: this.newTag })
    },
    /* 删除标签 */
    del (index) {
      this.tagList.splice(index, 1)
    },
    /* 上移标签 */
    moveUp (index) {
      if (index === 0) {
        return
      }
      /* 上移 */
      this.tagList.splice(index - 1, 0, this.tagList[index])
      /* 把残留的那一项删除 */
      this.tagList.splice(index + 1, 1)
    },
    /* 下移标签 */
    moveDown (index) {
      if (index === this.tagList.length - 1) {
        return
      }
      /* 在下一项插入该项 */
      this.tagList.splice(index + 2, 0, this.tagList[index])
      /* 把残留的那一项删除 */
      this.tagList.splice(index, 1)
    },
    /* 点击改变颜色 */
    changeColor (index) {
      this.active = index
    },
    /* 给tagList添加一个属性,用于判断是否收藏了某个标签 */
    addActive () {
      this.tagList.forEach(item => {
        this.$set(item, 'active', false)
      })
    },
    /* 收藏 */
    collection (item) {
      this.$confirm('是否确定收藏此标签', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      })
        .then(() => {
          item.active = !item.active
          this.$message({
            type: 'success',
            message: '收藏成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消收藏'
          })
        })
    },
    /* 取消收藏 */
    Cancelcollection (item) {
      this.$confirm('是否确定取消收藏此标签', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      })
        .then(() => {
          item.active = !item.active
          this.$message({
            type: 'success',
            message: '取消收藏成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          })
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.list {
  width: 550px;
  .inline-input {
    position: relative;
    right: -4%;
    width: 181px;
    padding: 10px 0;
  }
  .inline-input2 {
    width: 181px;
    padding: 10px 0;
  }
  .tag-list {
    list-style: none;
    height: 35px;
    padding: 0 10px;
    .active_tag {
      background: #2989dd;
      color: #ffffff !important;
    }
    .tag-item {
      display: inline-block;
      width: 75px;
      height: 20px;
      line-height: 20px;
      border: 1px solid #2b85e4;
      color: #2b85e4;
      text-align: center;
      border-radius: 50px;
      outline: none;
      cursor: pointer;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    &:nth-child(odd) {
      background: #f5fcfc;
    }
    .tag-edit {
      a {
        color: #2989dd;
        text-decoration: none;
        padding: 0 5px;
      }
    }
  }
}
</style>