bn-q-icon/components/en-from/en-textarea/en-textarea.vue

<template>
  <view class="box">
    <view class="input-box">
      <view class="input-box-left" :style="{'letter-spacing':labelWidth}">
        {{ label }}
      </view>
      <view class="input-textarea">
         <textarea
             class="textarea-data"
                   :placeholder="placeholder ? placeholder : ''"
                   :disabled="!!disabled"
                   :value="inputValue"
                   @blur="bindTextAreaBlur"
                   :auto-height="true"
         />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'en-textarea',
  props: {

    label: {
      type: String,
      default: '标题'
    },
    placeholder: {
      type: String,
      default: '请输入'
    },
    disabled: {
      default: false
    },
    value: {
      default: ''
    }
  },
  data() {
    return {
      inputValue: '',
      labelWidth: 0
    }
  },
  components: {},
  mounted() {
    this.inputValue = this.value
    this.setLabelWidth()
  },
  watch: {
    'value': function () {
      if (this.inputValue !== this.value) {
        this.inputValue = this.value
      }
    },
    'inputValue': function () {
      this.$emit('input', this.inputValue)
    }
  },
  methods: {
    setLabelWidth() {
      let differenceNum = 4 - this.label.length;
      if (differenceNum === 2) {
        this.labelWidth = '2em'
      } else if (differenceNum === 1) {
        this.labelWidth = '0.5em'
      }
    },
    bindTextAreaBlur(e){
      this.inputValue=e.detail.value
    }
  }

}
</script>

<style lang="scss" scoped>
@import url("../../static/css/en-common.css");

.box {
  .input-box {
    display: flex;
    align-items: center;

    .input-box-left {
      width: 210rpx;
      min-width: 210rpx;
      font-size: 32rpx;
      color: #333333;
    }
    .input-textarea{
      height: 170rpx;
      padding: 6rpx;
      border-radius: 10rpx;
      border: 2rpx solid #F0F0F0;
      overflow: auto;
      .textarea-data{
        height: 170rpx;
        width: 400rpx;
      }
    }
  }
}

</style>