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

<template>
  <view class="box">
    <view class="input-box">
      <view class="input-box-left" :style="{'letter-spacing':labelWidth}">
        {{ label }}
      </view>
      <input
          :name="name"
          :type="type"
          :placeholder="placeholder ? placeholder : ''"
          :disabled="!!disabled"
          v-model="inputValue"
      />
      <view class="input-box-right" v-if="timeNum<=0" @click="getCode()">
        发送
      </view>
      <view class="input-box-right" v-else >
        {{timeNum}} s
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'en-send',
  props: {
    type: {
      type: String,
      default: 'text'
    },
    label: {
      type: String,
      default: '手机号'
    },
    placeholder: {
      type: String,
      default: '请输入手机号码'
    },
    disabled: {
      default: false
    },
    name: {
      type: String,
      default: 'number'
    },
    value: {
      default: ''
    },
    timeNumMax:{
      type:Number,
      default:90
    }
  },
  data() {
    return {
      inputValue: '',
      timer: '',
      timeNum:0,
      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: {
    getCode(){
      if (this.inputValue === '') {
        uni.showToast({
          'title': "请输入"+this.label,
          'icon': 'error',
          'mask': true,
          'duration': 1500
        })
        return;
      }
      this.$emit('getCode')
    },
    setCodeNum(){
      this.timeNum = this.timeNumMax
      this.timer = setInterval(() => {
        this.timeNum--;
        if (this.timeNum <= 0) {
          clearInterval(this.timer);
        }
      }, 1000);
    },
    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;
      font-size: 32rpx;
      .input-box-left {
        color: #333333;
        width: 210rpx;
      }
      .input-box-right{
        width: 80rpx;
        color: #3169FA;
      }
    }
  }

</style>