vue 自定义添加标签的组件

生与死，轮回不止，我们生，他们死！

需求

1. 在输入框中输入信息，回车添加到标签框中，
2. 在标签框中点击删除该标签
   3. 点击标签可以重新编辑

效果图

代码

<template>
<!-- 添加关键字 -->
    <div >
        <Row>
            <i-col class="pags">
                <label class="pag" v-for="(item, index) in pags" :key="index" @click="enterDeletePags(index)">{{item}}<Icon type="ios-close" /></label>
            </i-col>
            <i-col><i-input v-model="keyword" v-on:on-enter='enterPushPags()'  placeholder="回车添加关键字"></i-input></i-col>
        </Row>
    </div>
</template>
<script>
export default {
    data() {
        return {
           keyword:'',
           pags:[]
        }
    },
    props:{
        terms:[]
    },
    methods: {
        enterPushPags(){
        /**添加*/
           this.pags.push(this.keyword);
          this.keyword = ""
        },
        enterDeletePags(index){
        /**删除*/
            this.pags.splice(index,1)
        },
        getPags(){
        /**暴露方法*/
            return this.pags;
        }
    },
    mounted() {
    	/**如果是修改页面，*/
         this.pags = this.terms == null?[]:this.terms
    },
}
</script>
<style scoped>
.pag{
   color: gray;
  padding: 4px 6px;
  border-radius: 5px;
  font-size: 14px;
  border: 1px gray solid;
  margin-right: 15px;
  margin-bottom: 15px;
}
.pag:hover{
  background: slategrey;
  color:whitesmoke
}
.pags{
  padding: 8px 10px 15px 10px;
  height: 125px;
  border: solid 1px rgba(112, 128, 144, 0.5);
  margin-bottom: 15px;
  border-radius: 9px;
  background:rgba(112, 128, 144, 0.034);
}
</style>`