封装input框（Mobile）

支持左对齐右对齐

输入内容类型

最小最大长度

单位

右侧按钮

。。。。。。

父组件

1	<Minput name="myage" label="年收入" type="number" min="1" max="5" placeholder="请输入年收入" unit="万" :clearable="true" v-model="income"/>

子组件

// 输入框组件

<template>
  <div class="m-input">
    <div class="label-box fs16">
      {{ label }}
    </div>
    <div class="input-box">
      <input
        :class="align === 'right' && 'right'"
        :disabled="disabled"
        :type="type"
        :minlength="min"
        :maxlength="max"
        :placeholder="placeholder"
        :value="value"
        @input="handleInput"
        @change="handleChange"
      />
    </div>
    <div class="unit-box fs16" :class="disabled == true && 'content-place'">
      {{ unit }}
    </div>
    <div class="clear-box" v-show="value && clearable">
      <van-icon
        class="right-clear"
        name="close"
        color="#888"
        @click="clearValue"
      />
    </div>
    <div class="slot-box">
      <slot name="btn"></slot>
    </div>
    <p class="error-message fs10">{{ errorMessage }}</p>
  </div>
</template>

<script>
export default {
  name: "Minput",
  props: {
    // 输入框标题
    label: {
      type: String,
      default: "标题"
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    },
    // 输入框类型
    type: {
      type: String,
      default: "text"
    },
    // 最小长度
    min: {
      type: [String, Number],
      default: "0"
    },
    // 最大长度
    max: {
      type: [String, Number],
      default: "50"
    },
    // 空提示文字
    placeholder: {
      type: String,
      default: "请输入"
    },
    // 输入框内容的单位
    unit: {
      type: String,
      default: ""
    },
    // 输入框内容
    value: {
      type: [String, Number],
      default: ""
    },
    // 输入框清空按钮
    clearable: {
      type: Boolean,
      default: false
    },
    // 输入框错误提示
    errorMessage: {
      type: String,
      default: ""
    },
    // 输入框对齐方式
    align: {
      type: String,
      default: "right"
    }
  },
  data() {
    return {};
  },
  methods: {
    handleInput(e) {
      // 输入时触发
      this.$emit("input", e.target.value);
    },
    handleChange(e) {
      // 失焦时触发
      this.$emit("change", e.target.value);
    },
    clearValue() {
      // 清空输入框
      this.$emit("input", "");
    }
  }
};
</script>

<style lang="less" scoped>
.m-input {
  width: 86%;
  margin: 0 auto;
  height: 1.2rem;
  display: flex;
  align-items: center;
  position: relative;
  border-bottom: 1px solid #f0f0f0;
  .label-box {
    min-width: 30%;
    line-height: 1.2rem;
    color: #363c54;
    font-weight: 400;
  }
  .input-box {
    flex: 1;
    input {
      width: 100%;
      height: 100%;
      font-size: 0.32rem;
      background: #fff;
    }
    .right {
      text-align: right;
    }
    // 禁用时输入框字体颜色
    input[disabled],
    input:disabled,
    input.disabled {
      color: #777;
      -webkit-text-fill-color: #777;
      -webkit-opacity: 1;
      opacity: 1;
    }
    input:-moz-placeholder,
    textarea:-moz-placeholder {
      color: #ccc;
    }

    input:-ms-input-placeholder,
    textarea:-ms-input-placeholder {
      color: #ccc;
    }

    input::-webkit-input-placeholder,
    textarea::-webkit-input-placeholder {
      color: #ccc;
    }
  }
  .unit-box {
    margin-right: 0.1rem;
  }
  .content-place {
    color: #777;
  }
  .clear-box {
    padding: 0 0.1rem;
  }
  .slot-box {
    height: 1.2rem;
    line-height: 1.2rem;
  }
  .error-message {
    position: absolute;
    bottom: 0.1rem;
    color: #f00;
  }
  // ocr相机按钮区域样式
  .ocr-camera-box {
    width: 0.5rem;
    margin-left: 0.1rem;
    overflow: hidden;
    height: 100%;
    position: relative;
    .icon-camera {
      display: inline-block;
      width: 0.5rem;
      height: 0.5rem;
      vertical-align: middle;
      background: url("../assets/imgs/camera.png") no-repeat;
      background-size: 100%;
    }
    input {
      position: absolute !important;
      z-index: 1000;
      width: 100%;
      height: 100%;
      opacity: 0;
    }
  }
}
</style>

props

// 输入框标题
label
// 是否禁用
disabled
// 输入框类型
type
// 最小长度
min
// 最大长度
max
// 空提示文字
placeholder
// 输入框内容的单位
unit
// 输入框内容
value
// 输入框清空按钮
clearable
// 输入框错误提示
errorMessage
// 输入框对齐方式
align

slot

#btn

<Minput label="验证码" type="tel" max='600' align="left" v-model="smsm">
	<template #btn>
		<!-- 获取验证码按钮 -->
    <van-button :disabled="smsDisabled" round size="small" @click="getBtn">{{ smsText }}</van-button>
	</template>
</Minput>
//ocr类型
<Minput label="卡号" type="tel" max='247' align="left" v-model="certInfo.bankCard">
  <template #btn>
    <div class="ocr-camera-box">
      <input style="position: absolute" type="file" ref="Bankfile" accept="image/jpg" capture="camera" @change="uploadImg($event)">
      <span class="icon-camera"></span>
		</div>
	</template>
</Minput>

<script>
  export default {
  data() {
    return {
      smsDisabled : false,
      smsText: "获取验证码"
    }
  },
  methods: {
    getBtn() {
      this.smsDisabled = true;
      let time = 60;
      let sms = setInterval(() => {
        this.smsText = time + "s后重新获取";
        time--;
        if(time < 0){
          this.smsText = "重新获取";
          this.smsDisabled = false;
          clearInterval(sms);
        }
      }, 1000);
    },
  }
}

vue