vue表单和验证码（在vue中如何实现验证码输入框组件）

本文目录

• 在vue中如何实现验证码输入框组件
• Vue实现滑动拼图验证码，怎么写

在vue中如何实现验证码输入框组件

最近做项目遇到这样的需求要求输入4位或6位短信验证码，输入完成后收起键盘。实现步骤大家参考下本文
先来看波完成效果图

需求
输入4位或6位短信验证码，输入完成后收起键盘
实现步骤
第一步
布局排版
《p class="security-code-wrap"》
《label for="code"》
《ul class="security-code-container"》
《li class="field-wrap" v-for="(item, index) in number" :key="index"》
《i class="char-field"》{{value || placeholder}}《/i》
《/li》
《/ul》
《/label》
《input ref="input" class="input-code" @keyup="handleInput($event)" v-model="value"
id="code" name="code" type="tel" :maxlength="number"
autocorrect="off" autocomplete="off" autocapitalize="off"》
《/p》使用li元素来模拟输入框的显示，没有别的目的，就只是为了语义化，当然你也可以使用其他任意一个元素来模拟，比如p。
使用label标签的好处在于它可以跟input的click事件关联上，一方面实现了语义化解决方案，另一方面也省去了我们通过js来唤起虚拟键盘。
隐藏输入框
.input-code {
position: absolute;
left: -9999px;
top: -99999px;
width: 0;
height: 0;
opacity: 0;
overflow: visible;
z-index: -1;
}将真实的输入框定位到屏幕可视区域以外的地方，虚拟键盘被唤起时，就不会将页面往上顶了。所以你的验证码输入组件一定要放在虚拟键盘遮挡不了的地方。
第二步
处理验证码输入
handleSubmit() {
this.$emit(’input’, this.value)
},
handleInput(e) {
this.$refs.input.value = this.value
if (this.value.length 》= this.number) {
this.hideKeyboard()
}
this.handleSubmit()
}输入时，给输入框赋一次值，是为了解决android端上输入框失焦后重新聚焦，输入光标会定在第一位的前面，经过赋值再聚焦，光标的位置就会显示在最后一位后面。
第三步
完成输入后关闭虚拟键盘
hideKeyboard() {
// 输入完成隐藏键盘
document.activeElement.blur() // ios隐藏键盘
this.$refs.input.blur() // android隐藏键盘
}组件完整代码
《!--四位验证码输入框组件--》
《template》
《p class="security-code-wrap"》
《label for="code"》
《ul class="security-code-container"》
《li class="field-wrap" v-for="(item, index) in number" :key="index"》
《i class="char-field"》{{value || placeholder}}《/i》
《/li》
《/ul》
《/label》
《input ref="input" class="input-code" @keyup="handleInput($event)" v-model="value"
id="code" name="code" type="tel" :maxlength="number"
autocorrect="off" autocomplete="off" autocapitalize="off"》
《/p》
《/template》
《script》
export default {
name: ’SecurityCode’,
// component properties
props: {
number: {
type: Number,
default: 4
},
placeholder: {
type: String,
default: ’-’
}
},
// variables
data() {
return {
value: ’’
}
},
methods: {
hideKeyboard() {
// 输入完成隐藏键盘
document.activeElement.blur() // ios隐藏键盘
this.$refs.input.blur() // android隐藏键盘
},
handleSubmit() {
this.$emit(’input’, this.value)
},
handleInput(e) {
this.$refs.input.value = this.value
if (this.value.length 》= this.number) {
this.hideKeyboard()
}
this.handleSubmit()
}
}
}
《/script》
《style scoped lang="less"》
.security-code-wrap {
overflow: hidden;
}
.security-code-container {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
.field-wrap {
list-style: none;
display: block;
width: 40px;
height: 40px;
line-height: 40px;
font-size: 16px;
background-color: #fff;
margin: 2px;
color: #000;
.char-field {
font-style: normal;
}
}
}
.input-code {
position: absolute;
left: -9999px;
top: -99999px;
width: 0;
height: 0;
opacity: 0;
overflow: visible;
z-index: -1;
}
《/style》组件使用代码
《security-code v-model="authCode"》《/security-code》上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
使用React如何封装Portal可复用组件
使用Node层如何实现multipart表单文件上传
使用JS如何实现文字无缝滚动
在js中如何实现移动端手指滑动轮播图

Vue实现滑动拼图验证码，怎么写

• 实现滑动拼图验证码需要用到 Vue 的拖拽事件、计算属性、样式绑定等功能，以下是一个简单的示例：

• Vue可以很方便地实现滑动拼图验证码。具体来说，可以借助Element UI库提供的el-slider组件来实现滑块功能，再通过CSS样式对拼图图片进行处理。实现流程可参考下面的步骤：

  • 在Vue项目中引入Element UI库，并使用el-slider组件创建一个滑块。

  • 使用CSS将原始的拼图图片分割成若干个小块，并为每个小块添加一些样式（如边框、背景色等）。

  • 将处理后的拼图图片和滑块放置在一起，并使用v-model指令将滑块的值与Vue的数据绑定。同时，将滑块的初始值设为0。

  • 监听滑块的拖动事件(change或input事件)，并计算滑块当前的位置。根据拼图小块的布局信息和滑块位置，判断用户是否通过了验证。