南昌小程序价格_vue完成验证码输入框组件

  • 栏目:行业动态 时间:2021-01-11 11:13 分享新闻到:
<返回列表

vue实现验证码输入框组件       最近做项目遇到这样的需求要求输入4位或6位短信验证码,输入完成后收起键盘。实现步骤大家参考下本文

先来看波完成效果图

 

需求

输入4位或6位短信验证码,输入完成后收起键盘

实现步骤

第一步

布局排版

 div 
 label for="code" 
 li v-for="(item, index) in number" :key="index" 
 i {{value[index] || placeholder}} /i 
 /li 
 /ul 
 /label 
 input ref="input" @keyup="handleInput($event)" v-model="value"
 id="code" name="code" type="tel" :maxlength="number"
 autocorrect="off" plete="off" autocapitalize="off" 
 /div 

使用li元素来模拟输入框的显示,没有别的目的,就只是为了语义化,当然你也可以使用其他任意一个元素来模拟,比如div。

使用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 
 div 
 label for="code" 
 li v-for="(item, index) in number" :key="index" 
 i {{value[index] || placeholder}} /i 
 /li 
 /ul 
 /label 
 input ref="input" @keyup="handleInput($event)" v-model="value"
 id="code" name="code" type="tel" :maxlength="number"
 autocorrect="off" plete="off" autocapitalize="off" 
 /div 
 /template 
 script 
 export default {
 name: 'SecurityCode',
 // component properties
 pro凡科抠图: {
 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 

总结

以上所述是小编给大家介绍的vue实现验证码输入框组件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!


分享新闻到:

更多阅读

协会商会网站模版-天津网站制作

行业动态 2021-01-13
【鹊起高新科技_先提升后付_手机微信:179900】十多年技术专业天津市网站制作制作提升企业...
查看全文

广州凡科互联网科技股份有限公司招聘媒

行业动态 2021-01-12
招聘人数:20职位信息岗位职责:1、根据日常内部需求及时寻找合适媒体,和媒体及各中介公...
查看全文

微信活动报名小程序_jquery完成自习气ba

行业动态 2021-01-12
jquery完成响应式banner聚焦点图 文中关键共享了jquery完成响应式banner聚焦点图的实例编码...
查看全文
返回全部新闻


区域站点: 南丰县微信小程序开发教程   南宫市小程序开发模板   囊谦县微信小程序开发者工具   南和县签到小程序   南华县微信小程序开发教程   南江县小程序开发模板   南京市微信小程序开发者工具   南靖县签到小程序   南康市微信小程序开发教程   南乐县小程序开发模板   南陵县微信小程序开发者工具   南宁市签到小程序   南平市微信小程序开发教程   南皮县小程序开发模板   南市区微信小程序开发者工具   南通市签到小程序   南投县微信小程序开发教程   南雄市小程序开发模板   南溪县微信小程序开发者工具   南阳市签到小程序   南漳县微信小程序开发教程   南召县小程序开发模板   南郑县微信小程序开发者工具   那坡县签到小程序   那曲县微信小程序开发教程   纳雍县小程序开发模板   讷河市微信小程序开发者工具   内黄县签到小程序   内江市微信小程序开发教程   内丘县小程序开发模板   内乡县微信小程序开发者工具   嫩江市签到小程序   聂荣县微信小程序开发教程   尼玛县小程序开发模板   尼木县微信小程序开发者工具   宁安市签到小程序   宁波市微信小程序开发教程   宁城县小程序开发模板   宁德市微信小程序开发者工具   宁都县签到小程序   宁国市微信小程序开发教程   宁海县小程序开发模板   宁化县微信小程序开发者工具   宁晋县签到小程序   宁陵县微信小程序开发教程   宁明县小程序开发模板   宁南县微信小程序开发者工具   宁强县签到小程序   宁陕县微信小程序开发教程   宁武县小程序开发模板   宁乡市微信小程序开发者工具   宁阳县签到小程序   宁远县微信小程序开发教程   农安县小程序开发模板   磐安县微信小程序开发者工具   盘锦市签到小程序   盘山县微信小程序开发教程   磐石市小程序开发模板   盘州市微信小程序开发者工具   蓬安县签到小程序   澎湖县微信小程序开发教程   蓬莱市小程序开发模板   彭山县微信小程序开发者工具   蓬溪县签到小程序   彭阳县微信小程序开发教程   彭泽县小程序开发模板   彭州市微信小程序开发者工具   偏关县签到小程序   平安县微信小程序开发教程   平昌县小程序开发模板   平定县微信小程序开发者工具   屏东县签到小程序   平度市微信小程序开发教程   平果县小程序开发模板   平和县微信小程序开发者工具   平湖市签到小程序   平江县微信小程序开发教程   平乐县小程序开发模板   平凉市微信小程序开发者工具   平利县签到小程序   平罗县微信小程序开发教程   平陆县小程序开发模板   屏南县微信小程序开发者工具   平泉市签到小程序   屏山县微信小程序开发教程   平顺县小程序开发模板   平塘县微信小程序开发者工具   平潭县签到小程序   平武县微信小程序开发教程   萍乡市小程序开发模板   平乡县微信小程序开发者工具   平阳县签到小程序   平遥县微信小程序开发教程   平阴县小程序开发模板   平邑县微信小程序开发者工具   平远县签到小程序   平舆县微信小程序开发教程   皮山县小程序开发模板   普安县微信小程序开发者工具   浦北县签到小程序   浦城县微信小程序开发教程   普洱市小程序开发模板   普格县微信小程序开发者工具   浦江县签到小程序   普兰县微信小程序开发教程   普宁市小程序开发模板   莆田市微信小程序开发者工具   迁安市签到小程序   乾安县微信小程序开发教程   潜江市小程序开发模板   潜山市微信小程序开发者工具  

友情链接: 微信开发小程序步 微信小程序页面制 微信小程序快捷开 小程序开发教程 手机版

Copyright © 2002-2020 微信小程序开发者工具_签到小程序_微信小程序开发教程_小程序开发模板_留言小程序 版权所有 (网站地图) 备案号:粤ICP备10235580号