使用contenteditable=true的div模拟textarea（vue2.0中使用，带placeholder且高度自动撑开）

子组件：

<template>
  <div class="item-address">
    <span v-show="!hasAddress" class="address-placeholder">请输入详细地址</span>
    <div contenteditable="true" v-html="innerText" @input="changeText" @focus="isLocked = true" @blur="isLocked = false" class="address-edit"></div>
  </div>
</template>
<script>
  export default {
    props: {
      value: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        innerText: '',
        hasAddress: '',
        isLocked: false
      }
    },
    methods: {
      changeText(){
        this.hasAddress = this.$el.innerHTML
        this.$emit('edit-handler', this.$el.innerHTML)
      }
    },
    watch: {
      value(val) {
        if (!this.isLocked || !this.innerText) {
          this.innerText = val
        }
      }
    }
  }
</script>

<style lang="scss">
  .item-address {
    width: px2rem(420px);
    @include lh-dpr(48px);
    position: relative;
    .address-placeholder {
      color: #a2a2a2;
      position: absolute;
      left: 0;
      top: 0;
    }
    .address-edit {
      position: relative;
      z-index: 1;
      @include lh-dpr(48px);
      word-break: break-all;
    }
  }
</style>

父组件：

<template>
  <div>
  　　<editable-div @edit-handler="onEditHandler" />
  </div>
</template>

<script>
import EditableDiv from '@/components/EditableDiv'
export default {
  data() {
    return {
      addressDetail: ''
    }
  },
  components: {
    EditableDiv
  },
  methods: {// 实时获取详细地址
    onEditHandler(val) {
      this.addressDetail = val
    }
  }
}
</script>

PS: addressDetail即为输入框的内容