yijianbao_user_uniapp/pages_im/pages/moments/index/components/CommentInput.vue

<template>
  <view class="input_bar" :style="{ bottom: kewbordHeight }">
    <u--input
      :focus="isFocus"
      :placeholder="placeholder || '评论'"
      border="none"
      v-model="value"
      @blur="isFocus = false"
    >
    </u--input>
    <!-- <u-button type="primary" text="发送" :loading="loading" :disabled="!value" loadingSize="12"
			@click="$emit('completeInput',value)" /> -->
    <image
      @click="$emit('completeInput', value)"
      src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/send_btn.png"
      alt=""
      srcset=""
    />
  </view>
</template>

<script>
export default {
  components: {},
  props: {
    commenting: Boolean,
    loading: Boolean,
    placeholder: String,
    inDetails: Boolean,
  },
  data() {
    return {
      value: "",
      isFocus: false,
      kewbordHeight: 0,
    };
  },
  watch: {
    commenting(val) {
      if (val) {
        setTimeout(() => {
          this.isFocus = true;
        }, 20);
      } else {
        this.value = "";
      }
    },
  },
  methods: {
    // keyboard
    keyboardChangeHander({ height }) {
      this.kewbordHeight = `${height}px`;
      if (height > 0) {
        !this.inDetails && uni.hideTabBar();
      } else {
        this.$emit("hiddenInput");
        !this.inDetails && uni.showTabBar();
      }
    },
    setKeyboardListener() {
      uni.onKeyboardHeightChange(this.keyboardChangeHander);
    },
    disposeKeyboardListener() {
      uni.offKeyboardHeightChange(this.keyboardChangeHander);
    },
  },
};
</script>

<style lang="scss" scoped>
.input_bar {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 18rpx 24rpx;
  background-color: #f0f2f6;

  .u-input {
    flex: 1;
    height: 64rpx;
    background-color: #fff;
  }

  .u-button {
    height: 64rpx;
    width: 108rpx;
    margin-left: 24rpx;
    padding: 0;
  }

  image {
    margin-left: 16rpx;
    width: 26px;
    height: 26px;
  }
}
</style>