preliminary/src/common/ComTextArea.vue

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

<script type="text/javascript">
import { isIos } from '@utils/tools';
import $ from 'jquery'
export default {
  name:'ComTextArea',
  props: {
    width: {
      default: '100%',
      type: String
    },
    height: {
      default: '2rem',
      type: String
    },
    item:{
      type:Object,
      require: true
    },
    slide:{
      default:false,
      type:Boolean
    }
  },
  data() {
    return {
      txt:this.item.value || '' //回读用
      // txt:'' 
    }
  },
  methods:{
    changeVal(){
          // $(".btscroll").css({'position':'fixed'})
      this.$emit('changeAreaVal',this.txt)
      const newData = Object.assign({},this.item,{value:this.txt,valueP:this.txt});
      this.$emit("updata",newData);
    },
    blur(){
      document.activeElement.scrollIntoViewIfNeeded(true);
      $(".foot").css({'display':'block'})
      setTimeout(()=>{
        document.activeElement.scrollIntoViewIfNeeded(true);
      },300)
    },
    focus(){
      if(isIos()){
          // $(".btscroll").css({'position':'absolute'})
        $(".foot").css({'display':'none'})
      }
    }
  },
  watch:{
    item:{//清空时更新数据
      handler(newVal,oldVal){
        this.txt = newVal.value;
      },
      deep:true
    }
  }
}
</script>
<style lang="less" scoped>
@import '../less/base.less';
  .comArea {
    .bgques;
    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 */;
      background-color: transparent;
    }
  }
</style>