<template>
  <div class="editable-label">
    <span v-if="!isEdit" >{{content}}</span>
    <Input v-model="editContent" v-else  @on-blur="handleComplete" autofocus	/>
  </div>
</template>

<script>
    export default {
    name: "EditableLabel",
    props: ["content"],
    data() {
      return {
        editContent: "",
        isEdit:false
      }
    },
    created() {
      //this.content = content;
    },
    methods: {
      handleEdit() {
        this.isEdit = true;
        this.editContent = this.content;
      },

      handleComplete() {
        this.isEdit = false;
        this.$emit('editComplete', this.editContent);
      }
    }
    }
</script>
<style>
  .editable-label {
    display:inline-block;
    /*width:80%;*/
  }

    .editable-label .ivu-input {
      background:#565656;
      border-color:transparent;
      font-size:18px;
      font-weight:bold;
      color:#fff;
      height:23px;
      padding-left:5px;
    }
</style>
