assess-app/components/en-from/en-input/index.vue

<template>
  <view class="en-box">
    <input  class="en-input sys-size-32 text-color-12 sys-weight-600"
            placeholder-class="sys-size-28 text-color-999 sys-weight-400"
            :maxlength="maxlength"
            :type="type"
            :placeholder="placeholder ? placeholder : ''"
            :disabled="!!disabled"
            v-model="inputValue"
            @blur="nameInput" @input="nameInput"
    ></input>
  </view>
</template>

<script>
export default {
  name:'en-input',
  props: {
    type: {
      type: String,
      default: 'text'
    },
    placeholder: {
      type: String,
      default: '请输入'
    },
    disabled: {
      default: false
    },
    name: {
      type: String,
      default: 'text'
    },
    value: {
      default: ''
    },
    maxlength:{
      default:140
    }
  },
  data() {
    return {
      inputValue: '',
      showShake:false
    };
  },
  watch: {
    'value': function () {
      if (this.inputValue !== this.value) {
        this.inputValue = this.value
      }
    },
    'inputValue': function () {
      this.$emit('input', this.inputValue)
    }
  },
  mounted() {
    this.inputValue = this.value
  },
  methods: {
    nameInput(e){
      if(this.type==='nickname'){
        this.inputValue = e.detail.value
      }

    },
  }
}
</script>

<style lang="scss">
.en-input{
  .en-input{
    width: 100%;
  }
  .en-input-placeholder{
    color: #999999;
    font-size: 28rpx;
  }
}

</style>