基于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 中使用该组件,希望本文能够对初学者有所帮助。