preliminary/src/common/ComTextArea.vue

<template>
  <div class="comArea">
    <textarea @input="changeVal" 
            :style="{width:width,height:height}" 
            v-model="txt" 
            placeholder="请输入"
            @blur="blur"></textarea>
  </div>
</template>

<script type="text/javascript">
export default {
  name:'ComTextArea',
  props: {
    width: {
      default: '100%',
      type: String
    },
    height: {
      default: '2rem',
      type: String
    },
    item:{
      type:Object,
      require: true
    }
  },
  data() {
    return {
      txt:this.item.value || '' //回读用
      // txt:'' 
    }
  },
  methods:{
    changeVal(){
      this.$emit('changeAreaVal',this.txt)
    },
    blur(){
      const newData = Object.assign({},this.item,{value:this.txt,valueP:this.txt});
      this.$emit("updata",newData);
    }
  },
  watch:{
    item:{//清空时更新数据
      handler(newVal,oldVal){
        this.txt = newVal.value;
      },
      deep:true
    }
  }
}
</script>
<style lang="less" scoped>
  .comArea {
    textarea {
      color: #4F50FF;
      resize: none;
      box-shadow: none;
      font-size: 0.3rem;
      box-sizing: border-box;
      border: 1px solid #DFE0E4;
      border-radius: .08rem /* 8/100 */;
      -webkit-appearance: none;
      padding: .16rem /* 16/100 */ .3rem /* 30/100 */;
      margin-bottom: .3rem;
    }
  }
</style>