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

<template>
  <view class="box">
    <view class="input-box">
      <view class="input-box-left" :style="{'letter-spacing':labelWidth}">
        {{ label }}
      </view>
      <input
          class="input-item"
          :name="name"
          :type="type"
          :maxlength="maxlength"
          :placeholder="placeholder ? placeholder : ''"
          :disabled="!!disabled"
          v-model="inputValue"
      />
    </view>
  </view>
</template>

<script>
export default {
  name: 'en-input',
  props: {
    type: {
      type: String,
      default: 'text'
    },
    label: {
      type: String,
      default: '标题'
    },
    placeholder: {
      type: String,
      default: '请输入'
    },
    disabled: {
      default: false
    },
    name: {
      type: String,
      default: 'text'
    },
    value: {
      default: ''
    },
    maxlength:{
      default:140
    }
  },
  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'
    }
  }
  }

}
</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;
        font-size: 32rpx;
        color: #333333;
      }
      .input-item{
        border:none;
        outline: none;
        font-size: 32rpx;
        color: #333333;
      }
      .input-item::placeholder{
        color: #999999;
        font-size: 32rpx;
      }

    }
  }

</style>