aiot-app/components/Getinput.vue

<template>
	<view>
	<view class="textareabg" @click="onBlurBg" :style="{height:bgHeight + '%'}"></view>
	 <view class="bottom-textarea" :style="{bottom:inputBottom +'px'}">
	      <view class="textarea-container">
	        <textarea
	          v-model="recordInput"
	          :maxlength="-1"
	          :auto-height="true"
	          :show-confirm-bar="false"
	          :cursor-spacing="10"
	          :fixed="true"
	          :adjust-position="false"
			  :focus="textareaFocus"
	          @focus="focusTextarea"
	          @blur="blurTextarea"
			  ref="focusRef"
	        />
	      </view>
		  <u-button type="success" size="small" @click="addRecord" class="u-reset-button" text="确定"></u-button>
	 </view>
	 </view>
</template>

<script>
	export default {
		name:"getInput",
		props: {
		     show:{
				 type: Boolean,
				 default: false
			 }
		},
		data() {
			return {
				recordInput:'',
				inputBottom: -60,        //输入框
				bgHeight:0,            //底层背景高度
				textareaFocus:false   //获取焦点
			};
		},
		watch: {
			show(res){
			   if(res){
				   this.inputBottom = 0;
				   this.bgHeight = 100;
				   this.textareaFocus = true;
			   }else{
				   this.inputBottom = -60;
				   this.bgHeight = 0;
				   this.textareaFocus = false;
			   }
			}		
		},
		methods:{
		   //聚焦文本框
		  focusTextarea(e) {
			  this.inputBottom = e.detail.height;
		  },
		  //失去焦点
		  blurTextarea(e) {
			  this.inputBottom = 0;
			  uni.pageScrollTo({
			  	    scrollTop: 0,
			  	    duration: 0
			  })
		  },
		  //点击了确定
		  addRecord(){
			  if(this.recordInput == ''){
			  	uni.showToast({
			  		icon:'none',
			  		title: '请输入信息',
			  		duration: 2000
			  	});
			  	return;
			  }
			  
			  this.$emit("openInput");
			  this.$emit("getInputInfo",this.recordInput);
			  //重置值
			  this.recordInput = "";
		  },
	    //点击背景层
		onBlurBg(){
			this.$emit("openInput");
		}
		
	  },
	}
</script>

<style lang="scss" scoped>
.textareabg{
   position: fixed;
   bottom: 0px;
   left: 0px;
   right: 0px;
   width: 100%;
}
.bottom-textarea {
  position: fixed;
  bottom: 0px;
  left: 0px;
  right: 0px;
  z-index: 99;
  background-color: #f2f2f2;
  border-top: 2rpx solid rgba(226, 226, 226, 1);
  padding: 10rpx 20rpx;
  display: flex;
  align-items: flex-end;
  transition: all 0.3S ease;
  .textarea-container {
    flex: 1;
    min-height: 80rpx;
    background: rgba(255, 255, 255, 1);
    border-radius: 8rpx;
    box-sizing: border-box;
    > textarea {
      max-height: 240rpx;
      font-size: 32rpx;
      color: rgba(8, 8, 8, 1);
      width: auto;
    }
  }

  > button {
    flex-shrink: 0;
    height: 80rpx;
    margin: 0;
    margin-left: 16rpx;
	font-size: 32rpx;
  }
}
</style>