vue封装的Tag标签双击编辑单击选中可删除

<div class='zTag' @click="checked" @dblclick.stop="edited" :class="{'hover':isSelected}">
  <input ref="input" type="text" v-if="isEdit" v-model="data"  @keyup.enter="edited"  @blur="edited">
  <span>
    <b >{{data}}</b>
    <i @click.stop="remove">X</i>
  </span>
 </div>

.zTag{
  position: relative;
  display: inline-block;
  border: 1px solid #ddd;
  border-radius: 3px;
  background-color: #eee;
  color: #333;
  cursor: pointer;
  min-width: 10px;
  min-height: 30px;
  font-family: '微软雅黑';
  overflow: hidden;
  padding: 0 15px 0 5px;
  &.hover{
    color:#1676ff;
    background: #a6cff5;
    border-color: #5a9af5;
    i{
      color:#999;
    }
  }
  input{
    position: absolute;
    left: 0;
    top:0;
    outline: none;
    border: none;
    width: 100%;
    display: block;
    font-size: 12px;
    line-height: 30px;
    font-family: '微软雅黑';
    color: #333;
    padding: 0 10px 0 5px;
  }
  span{
    display: inline-block;
    // padding: 0 15px 0 5px;
    b{
      font-weight: normal;
      font-family: '微软雅黑';
      font-size: 12px;
      line-height: 30px;
    }
  }
  i{
    position: absolute;
    right: 5px;
    top:5px;
    text-decoration: normal;
    &:hover{
      color:#1676ff;
    }
  }
}

// 选中
    checked(){
      this.isSelected = !this.isSelected;
      this.$emit('selected', this.data);
    },
    // 编辑状态切换
    edited(){
      this.isEdit = !this.isEdit;
      if(this.isEdit){
        this.$nextTick(_ => {
          this.$refs.input.focus()
        })
      }else{
        this.$input('value', this.data);
      }
    },
    // 删除
    remove(){
      console.log('remove')
      this.$emit('remove')
    }

props:{
    value:{
      type:String,
      default:'标签'
    }
  },
  data(){
    return{
      data: this.value,
      isEdit: false,
      isSelected: false,
    }
  },