vue將div更改成input文本輸入框

<template>
    <div class="DivContentEdit">
      <div :class="canEdit ? ['div-text','edit-div'] : ['edit-div']"
           v-html="innerText"
           :contenteditable="canEdit"
           @focus="isLocked = true"
           @blur="isLocked = false"
           @input="changeText">
      </div>
    </div>
</template>

<script>
    export default {
      props: {
        value: {
          type: String,
          default: ''
        },
        canEdit: {
          type: Boolean,
          default: true
        }
      },
      data(){
        return {
          innerText: this.value,
          isLocked: false
        }
      },
      watch: {
        'value'(){
          if (!this.isLocked || !this.innerText) {
            this.innerText = this.value;
          }
        }
      },
      methods: {
        changeText(){
          this.$emit('input', this.$el.innerText);
        }
      }
    };
</script>

<style scoped>
  .div-text {
// 這個可以去掉樣式問題
    -webkit-user-modify: read-write-plaintext-only;
  }

  div span p :focus{
    outline: none;
  }
</style>

　　

vue將div更改成input文本輸入框