uniapp 封装便于使用的input组件（自用方便）

效果图

功能类似于其他组件库的input。

//默认提示文字

//是否显示错误提示

//输入内容验证错误提示

//输入框宽度

//输入框下间距

//输入框类型

//最大输入长度

// 内边距

// 验证输入内容正则

// 是否显示边框

// 是否显示图标

// 自定义icon图标样式

// 是否开启判断输入框内容是否为空

代码如下

<template>
  <view>
    <view
      class="tp-input"
      :style="{ width: width + 'rpx', marginBottom: marginBottom + 'rpx' }"
    >
      <input
        :placeholder="placeholder"
        @focus="isFocus = true"
        @blur="blur"
        @input="change"
        :class="[
          { inputActive: isFocus && border },
          { inputError: validateFail && border },
          'inp',
        ]"
        :style="{ padding: padding }"
        :maxlength="maxlength"
        :auto-blur="true"
        :type="inputType"
        :password="inputType == 'password'"
        v-model="value"
      />
      <u-icon
        class="icon"
        v-if="iconStatus"
        :name="iconStyle"
        :size="48"
        @click="toogleType"
      ></u-icon>
      <view class="error-info" v-if="tipsMessage && validateFail">
        {{ message }}
      </view>
    </view>
  </view>
</template>
<script>
export default {
  name: "tp-input",
  props: {
    placeholder: {
      //默认提示文字
      type: String,
      default: "请输入",
    },
    tipsMessage: {
      //是否显示错误提示
      type: Boolean,
      default: true,
    },
    message: {
      //输入内容验证错误提示
      type: String,
      default: "输入内容不能为空",
    },
    width: {
      //输入框宽度
      type: String,
      default: "654",
    },
    marginBottom: {
      //输入框下间距
      type: String,
      default: "32",
    },
    inputType: {
      //输入框类型
      type: String,
      default: "text",
    },
    maxlength: {
      //最大输入长度
      type: String,
      default: "140",
    },
    padding: {
      // 内边距
      type: String,
      default: "0 32rpx",
    },
    regexp: {
      // 验证输入内容正则
      type: RegExp,
      // 正则判断默认规则为非空
      default: () => /\S+/,
    },

    border: {
      // 是否显示边框
      type: Boolean,
      default: true,
    },
    iconStatus: {
      // 是否显示图标
      type: Boolean,
      default: false,
    },
    iconStyle: {
      // icon图标样式
      type: String,
      default: "eye-fill",
    },
    inputValueNull: {
      // 是否开启判断输入框内容是否为空
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      validateFail: false,
      isFocus: false,
      value: "",
    };
  },
  methods: {
    // 输入框聚焦/取消聚焦事件
    blur() {
      // console.log('blur',this.value);
      if (this.inputValueNull && this.value == "") {
        this.validateFail = true;
        return;
      }
      this.isFocus = false;
    },
    change() {
      console.log("change", this.value, this.inputValueNull);
      // 如果输入框的内容为空，显示错误提示
      if (this.inputValueNull && this.value == "") {
        console.log("change");
        this.validateFail = true;
        return;
      }
      // 如果输入框的内容不为空，取消错误提示
      if (this.inputValueNull && this.value != "") {
        this.validateFail = false;
      }
      console.log(this.value, this.regexp.test(this.value));
      // 输入框内容改变时，向父组件传递输入内容和是否符合正则验证
      this.$emit("change", {
        value: this.value,
        validate: this.regexp.test(this.value),
      });
    },
    reset() {
      this.value = "";
    },
    // 切换input框的类型与样式
    toogleType() {
      this.$emit("toogleType");
    },
  },
};
</script>

<style scoped>
.tp-input {
  position: relative;
  display: flex;
  margin: 0 auto;
  flex-direction: column;
}
.inp {
  flex: 1;
  height: 100rpx;
  min-height: 100rpx;
  background: #f8f8f8;
  border-radius: 43rpx;
  border: 2rpx solid #f8f8f8;
  box-sizing: border-box;
  font-size: 32rpx;
  color: #333333;
  outline: none;
}
.inp2 {
  padding: 0 32rpx !important;
}
.code-input {
  width: 410rpx;
  margin-right: 24rpx;
}
.inputActive {
  box-sizing: border-box;
  border: 2rpx solid #0075ff;
}
.inputError {
  box-sizing: border-box;
  border: 2rpx solid #ff5143;
}
.error-info {
  padding: 16rpx 0 0 32rpx;
  font-size: 24rpx;
  color: #ff5143;
  line-height: 34rpx;
}
.icon {
  position: absolute;
  right: 30rpx;
  top: 27rpx;
}
</style>