动态删减标签

<template>
  <div class="ele-body">
    <el-card shadow="never">
      <el-tag
        :key="tag.id"
        v-for="tag in dynamicTags"
        closable
        :disable-transitions="false"
        @close="handleClose(tag)"
      >
        {{ tag.tag_name }}
      </el-tag>
      <el-input
        class="input-new-tag"
        v-if="inputVisible"
        v-model="tag_name"
        ref="saveTagInput"
        size="small"
        @keyup.enter.native="handleInputConfirm"
        @blur="handleInputConfirm"
      >
      </el-input>
      <el-button
        v-else
        class="button-new-tag"
        size="small"
        @click="showInput"
        plain
        icon="el-icon-plus"
        >增加标签</el-button
      >
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dynamicTags: [],
      inputVisible: false,
      tag_name: ""
    };
  },
  created() {
    this.queryinfo();
  },
  methods: {
    // 查询信息
    queryinfo() {
      this.$http.get("?s=Manage.Setting_CommentTags.All").then(res => {
        console.log(res.data.data.data, "评价标签");
        if (res.data.code === 200) {
          this.dynamicTags = res.data.data.data;
        }
      });
    },
    // 删除
    handleClose(tag) {
      console.log(tag);
      this.$http
        .post("?s=Manage.Setting_CommentTags.Del", { id: tag.id })
        .then(res => {
          if (res.data.code == 200) {
            this.$message({ type: "success", message: "成功" });
            this.queryinfo();
          } else {
            this.$message.error(res.data.msg);
          }
        });
      // this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },
    // 点击添加
    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    // 失去焦点。点击
    handleInputConfirm() {
      let tag_name = this.tag_name;
      if (tag_name) {
        this.$http
          .post("?s=Manage.Setting_CommentTags.Edit", { tag_name: tag_name })
          .then(res => {
            if (res.data.code == 200) {
              this.dynamicTags.push(tag_name);
              this.$message({ type: "success", message: "成功" });
              this.queryinfo();
            } else {
              this.$message.error(res.data.msg);
            }
          });
      }
      this.inputVisible = false;
      this.tag_name = "";
    }
  }
};
</script>

<style scoped>
/* .box-card {
  width: 480px;
} */
.el-tag + .el-tag {
  margin: 5px 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>