preliminary/src/common/ComTextArea.vue

<template>
  <div class="comArea" :style="getStyle(detail,slide)">
    <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
    },
    detail:{
      default:2,
      type:Number||String
    }
  },
  data() {
    return {
      txt:this.item.value || '' //回读用
      // txt:'' 
    }
  },
  methods:{
    getStyle(detail,slide){
      if(detail == 1){
        if(slide){
          return {'display':'block','background-color': '#F9F9F9'}
        }else{
          return {'display':'none'}
        }
      }else{
        return {'display':'block'}
      }
    },
    changeVal(){
      this.$emit('changeAreaVal',this.txt)
      const newData = Object.assign({},this.item,{value:this.txt,valueP:this.txt});
      this.$emit("updata",newData);
    },
    blur(){
      setTimeout(()=>{
        $(".foot").css({'display':'block'})
      },150)
    },
    focus(){
      if(isIos()){
        setTimeout(() => {
          $(".foot").css({'display':'none'})
        }, 150);
      }
    }
  },
  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>