preliminary/src/common/ComTextArea.vue

<template>
  <div class="comArea" @touchmove.prevent>
    <textarea
            :style="{width:width,height:height}"
            v-model="txt"
            placeholder="请输入"
            @input="changeVal"></textarea>
    <div :class="sure?'realSure sure':'sure'" @click="makeSuer">
      确定
    </div>
  </div>
</template>

<script type="text/javascript">
import { isIos } from '@utils/tools';
import $ from 'jquery'
export default {
  name:'ComTextArea',
  props: {
    num:{
      default:0
    },
    width: {
      default: '100%',
      type: String
    },
    height: {
      default: '2rem',
      type: String
    },
    item:{
      default:{}
    }
  },
  data() {
    return {
      txt: this.item.content||'', //回读用
      sure:false,
      // txt:''
    }
  },
  methods:{
    changeVal(e){
      this.txt = e.target.value;
      const notNull=this.txt.match(/\S/g);
      if(notNull){
        this.sure=true;
      }else{
        this.sure=false;
      }
    },
    makeSuer(){
      if(!this.sure){return}
      let n = this.num;
      this.$emit("updata",'',{val:this.txt||'无',valp:this.txt||'无'},++n);
    }
  },
}
</script>
<style lang="less" scoped>
@import '../less/base.less';
  .comArea {
    width: 100%;
    position:fixed;
    bottom:0;
    background:#fff;
    padding:0.28rem 0 0;
    box-shadow: 0 0 30px -10px rgba(104, 124, 189, 0.25);
    text-align: center;
    textarea {
      color: #4F50FF;
      resize: none;
      box-shadow: none;
      font-size: #font[select];
      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>