【Uni-app】基于uniapp编写输入学号组件，超详细！！！

基于uniapp编写输入学号组件

在移动应用程序开发中，输入框是非常常见的一种 UI 元素。在实际开发中，为了提高开发效率和代码的复用性，我们可以将一些常见的输入框封装成组件。本文将介绍如何基于 uniapp 编写一个输入学号的组件。并封装提供可配置的样式参数。

Uni-app 框架本质上是基于 Vue.js 的跨平台开发框架，因此在 Uni-app 中编写组件就是使用 Vue.js 的组件编写方式。
在 Uni-app 中，组件是以.vue文件的形式存在的，它包含了组件的模板、样式和逻辑。

1.1 创建组件

首先，我们需要在项目中创建一个名为 InputNumber 的组件。在项目根目录下的 components 文件夹中，创建一个名为 InputNumber 的文件夹，并在其中创建一个名为 InputNumber.vue 的文件。
项目结构如图所示

组件文件的基本结构如下：

<template>
  // 组件的 HTML 模板
</template>

<script>
// 组件的配置项
export default {
  name: 'MyComponent',
  props: {
    // 组件的 props 属性
    //props 属性是用来传递数据给组件的，它是组件与父组件之间通信的一种方式。
    //通过 props 属性，父组件可以向子组件传递数据，子组件可以在组件内部使用这些数据。
  },
  data() {
    return {
      // 组件的数据
    }
  },
  methods: {
    // 组件的方法
  },
  created() {
    // 组件的生命周期函数
  }
}

</script>

<style>
/* 组件的样式 */
</style>

1.2 功能介绍

本组件的功能是输入学号，同时提供学号格式校验功能。当学号格式不正确时，会提示用户重新输入。

2. 组件实现

在 InputNumber.vue 中，我们需要定义组件的模板、样式和行为。下面是完整的代码：

2.1 HTML 模板

<template>
  <div class="input-number">
    <div class="input-wrapper">
      <input type="tel" v-model="value" @blur="checkInput" />
      <div v-show="showError" class="error-text">{{ errorText }}</div>
    </div>
  </div>
</template>

上述 HTML 模板中包含一个 标签和一个用于显示错误提示信息的

标签。

2.2 CSS 样式

<style>
  .input-number {
    width: 100%;
  }

  .input-wrapper {
    position: relative;
    height: 50px;
  }

  .input-wrapper input {
    width: 100%;
    height: 100%;
    font-size: 16px;
    padding-left: 10px;
    border: 1px solid #ccc;
    box-sizing: border-box;
  }

  .error-text {
    position: absolute;
    left: 10px;
    top: 5px;
    font-size: 14px;
    color: red;
  }
</style>

上述 CSS 样式主要用于控制输入框和错误提示信息的样式。

2.3 JavaScript 代码

<script>
  export default {
    data() {
      return {
        value: '',
        showError: false,
        errorText: '请输入正确的学号'
      }
    },
    methods: {
      checkInput() {
        if (/^.{4,}$/.test(this.value)) {
          console.log("输入的学号是：", this.value);
          this.showError = false;
        } else {
          this.showError = true;
        }
      }
    }
  }
</script>

上述 JavaScript 代码主要用于实现输入框的逻辑，当输入框失去焦点时会触发 checkInput 方法进行学号格式校验。如果学号格式不正确，会在页面上显示错误提示信息。

2.4 组件的封装

在组件的开发过程中，我们需要对组件进行封装，以便在其他页面中使用。下面是组件的封装代码：

<template>
  <div class="input-number" :style="{'width': inputWidth}">
    <!-- 输入框容器 -->
    <div class="input-wrapper" :style="{'height': inputHeight}">
      <!-- 输入框 -->
      <input type="tel"
             v-model="value" 
             @blur="checkInput"
             :style="{
               'font-size': fontSize,
               'border-color': borderColor,
               'box-sizing': 'border-box',
               'width': '100%',
               'height': '100%',
               'padding-left': '10px'
             }" />
      <!-- 错误提示图标 -->
      <uni-icons v-show="showError" type="ios-close-circle" :size="fontSize" class="error-icon" />
      <!-- 错误提示信息 -->
      <div v-show="showError" class="error-text" :style="errorPosition">{{ errorText }}</div>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      // 输入框的值
      value: String,
      // 输入框的宽度
      inputWidth: {
        type: String,
        default: '100%'
      },
      // 输入框的高度
      inputHeight: {
        type: String,
        default: '50px'
      },
      // 输入框的字体大小
      fontSize: {
        type: String,
        default: '16px'
      },
      // 输入框的边框颜色
      borderColor: {
        type: String,
        default: '#ccc'
      },
      // 错误提示信息的颜色
      errorColor: {
        type: String,
        default: 'red'
      },
      // 错误提示信息的字体大小
      errorFontSize: {
        type: String,
        default: '14px'
      },
      // 错误提示信息的位置
      errorPosition: {
        type: String,
        default: 'left:10px;top:5px;'
      }
    },
    data() {
      return {
        // 是否显示错误提示信息
        showError: false,
        // 错误提示信息
        errorText: '请输入正确的学号'
      }
    },
    methods: {
      // 验证输入框的值是否合法
      checkInput() {
        if (/^.{4,}$/.test(this.value)) {
          this.showError = false
        } else {
          this.showError = true
        }
      }
    }
  }
</script>

<style>
  .input-number {
    margin: 10px 0;
  }
  .input-wrapper {
    position: relative;
  }
  .error-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: red;
  }
  .error-text {
    position: absolute;
    left: 10px;
    top: 5px;
    font-size: 14px;
    color: red;
  }
</style>

3. 配置项

开发者可以通过传递props来配置这个组件，组件中可配置的样式参数如下：

参数名	类型	默认值	说明
inputWidth	String	100%	输入框宽度
inputHeight	String	50px	输入框高度
fontSize	String	16px	字体大小
borderColor	String	#ccc	输入框边框颜色
errorColor	String	red	错误提示文字颜色
errorFontSize	String	14px	错误提示文字大小
errorPosition	String	left:10px;top:5px;	错误提示文字位置

开发者在使用组件时，可以根据自己的需要传入相应的参数进行配置。

4. 使用

如果你需要使用该组件，并且你想将输入框的宽度设置为80%，字体大小设置为18px，错误信息的颜色设置为橙色，可以这样传递props：
对了，不要忘记使用 import 导入组件

<template>
  <div>
    <input-number
      v-model="studentId"
      input-width="80%"
      font-size="18px"
      error-color="orange"
    />
  </div>
</template>

<script>
  import InputNumber from '@/components/InputNumber'

  export default {
    components: {
      InputNumber
    },
    data() {
      return {
        studentId: ''
      }
    }
  }
</script>

5. 总结

通过本文，我们学习了如何基于 uniapp 开发一个输入学号的组件。在组件的开发中，我们使用了 uni-icons 提供的图标，并对组件的样式进行了配置，以便开发者在使用组件时能够自由配置组件的样式。同时，我们也介绍了如何在 uniapp 中使用该组件，希望本文能够对初学者有所帮助。