Vue element-UI tag标签的再一次封装

因为在项目中用到标签项目所以对elementUI里面的tag标签进行了二次封装
先上完整代码

/**
* 标签组件
**/ 

<template>
    <div>
        <div class="personaldetails_text_detail">
            <el-tag
            :key="tag"
            v-for="(tag,index) in tagsd"
            closable
            :disable-transitions="false"
            @close="handleClose(tag)">
            {{tags[tag].name}}
            </el-tag>
            <el-input
            class="input-new-tag"
            v-if="inputVisible"
            v-model="inputValue"
            ref="saveTagInput"
            size="small"
            @keyup.enter.native="handleInputConfirm"
            @blur="handleInputConfirm"
            >
            </el-input>
            <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
        </div>
    </div>
</template>

<script>
// 导入封装好的请求 你们要改用自己的请求
import {loadAct,editActTag,loadAllTags,newTagI} from "../api/basisMG"
// 导出模块
export default {
  // 模块名字
  name: "tags",
  // 模块数据
  data() {
    //数据  
    return {
      //现有标签的id
      dynamicTags: [],
      //是否在输入状态
      inputVisible: false,
      //输入值
      inputValue: '',
      //现有标签在tags中所对应的下表
      tagsd:[],
      //所有标签种类储存
      tags: [],
      //
      new:{
        tag:[]
      },
      //用于上传tag时使用
      tag:{
        actID:1,
        //用于存放旧的Tag
        deletedTag:[], 
        //用于更新新的Tag
        newTag:[],
      },    
    };
  },
  // 注册组件
  components: {
    
  },
  //传入参数
  props:{
    "activityI": Object               
  },
  // 监听指定值，只有指定值变化，才会触发
  watch: {

  },
  // 里面的函数只有调用才会执行（实时计算）里面是定义的方法
  methods: {
    //在删除tag时调用，单个单个删除
    handleClose(tag) {
        this.dynamicTags.splice(this.dynamicTags.indexOf(this.tags[tag].id), 1);
        this.tagsd.splice(this.tagsd.indexOf(tag), 1);
        this.tag.deletedTag.push(this.tags[tag].id)
        this.editTag()
      },
    //调用让输入框出现
    showInput() {
        this.inputVisible = true;
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },
      //
      handleCommand(command) {
        this.handleInputConfirm()  
      },
      //输入确定后调用
      handleInputConfirm() {
        let inputValue = this.inputValue;
        this.new.tag = inputValue
        var fd = new FormData();
        fd.append("tag",JSON.stringify(this.new.tag))
        console.log(inputValue)
        newTagI(fd)                  //这是axios代码的封装如果要用你们要改成自己的请求来发送
        .then(res=>{
            console.log(res);
            loadAllTags(fd).then(res1=>{
                console.log(res1);
                this.tags = res1.data
                this.tag.newTag.push(res.data)
                this.dynamicTags.push(res.data)
                this.getTag1(res.data)
                this.editTag()
            })
        })

        this.inputVisible = false;
        this.inputValue = '';
      },
      //调用函数上传到服务器
      editTag(){
        this.tag.actID = this.activityI.actID
        var fd = new FormData();
        fd.append("actID",this.tag.actID)
        fd.append("newTag",JSON.stringify(this.tag.newTag))
        fd.append("deletedTag",JSON.stringify(this.tag.deletedTag))
        editActTag(fd)                     //这是axios代码的封装如果要用你们要改成自己的请求来发送
        .then(res=>{
            this.tag.newTag = []
            this.tag.deletedTag = []
        })
    },
    //因为数据库中tag标签的ID和下表是不同的 所以要储存两个来用，用ID在tag所有里面找到下表后储存用于显示 一次性所有寻找
    getTag(){
      for(var i =0;i<this.tags.length;i++){
          for(var j=0;j<this.dynamicTags.length;j++){
              if(this.tags[i].id === this.dynamicTags[j]){
                    this.tagsd.push(i)
                }
          }
      }
    },
    //因为数据库中tag标签的ID和下表是不同的 所以要储存两个来用，用新ID在tag所有里面找到下表后储存用于显示 单个
    getTag1(tagID){
      for(var i =0;i<this.tags.length;i++){
        if(this.tags[i].id === tagID){
          this.tagsd.push(i)
        }
      }
    },
  },
  // 创建前状态(里面是操作)
  beforeCreate() {},
  // 创建完毕状态(里面是操作)
  created() {

  },
  // 挂载前状态(里面是操作)
  beforeMount() {},
  // 挂载结束状态(里面是操作)
  mounted() {
    //先获取所有标签来使用
    loadAllTags(" ").then(res=>{         //这是axios代码的封装如果要用你们要改成自己的请求来发送
        this.tags = res.data
        //获取当前活动有那些标签
        loadAct(this.activityI)         //这是axios代码的封装如果要用你们要改成自己的请求来发送
        .then(res1=>{
            this.dynamicTags = res1.data.tag        
            this.getTag()
        })
      })

  },
  // 更新前状态(里面是操作)
  beforeUpdate() {},
  // 更新完成状态(里面是操作)
  updated() {},
  // 销毁前状态(里面是操作)
  beforeDestroy() {},
  // 销毁完成状态(里面是操作)
  destroyed() {}
};
</script>
<style scoped>
/**
 * 导入css样式组件
 * @import "../assets/css/components/index.css";
 */
.el-tag + .el-tag {
    margin-left: 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;
  }
.el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
.el-icon-arrow-down {
    font-size: 12px;
  }
</style>

下面是调用案例

<tags  :activityI="para"></tags>
  para:{
      actID:1
   },