vue实现键盘输入支付密码功能

本文的例子分享了vue实现键盘输入支付密码功能的具体代码，供大家参考。具体内容如下

支付密码功能界面如下：

主要代码如下：

模板' div class='支付工具' div class='支付工具-标题边框-底部' span class='图标图标-后退@click='backHandle'/spanstrong请输入交易密码/strong/div class=' pay-tool-content ' div class=' pay-tool-inputs ' div class=' items ' v-for=' I in items ' span class=' icon _ dot ' v-if=' password[I]'/span/div/div class=' pay-tool-link ' router-link class=' link ' to='/getP '忘记密码？/router-link/div/div class=' pay-tool-keyboard ' ul Li @ click=' keyuhandlee($ event)' v-for=' val in key ' { val } }/Li Li class=' del ' @ click=' delHandle ' span class=' icon-del '/span/Li/ul/div/div/template script const key=()=[1，2，3，4，5，6，7，8，9 ' '，0] //让sendFlag=true //防止重复发送密码导出默认{ data () { return { items: [0，1，2，3，4，5]，keys: keys()，password: [] }，methods : { backHandle(){ this。clearpasswordphandle()//返回时清除密码是这个$emit('backFnc') //返回上级}，keyuhandlee(e){ let text=e . current target。内部文本让len=this。密码。长度if(！text || len=6)返回这个。密码。推(发)这个。AJaxDATa()}，delHandle(){ if(this。密码。长度=0)返回false this.password.shift() }，AJaxDATa(){ if(this。密码。长度=6){控制台。log(ParSeint)(这。密码。join(').replace(/\s/g，")))} return false }，clearpasswordphandler : function(){ this。password=[]} } }/script style lang=' less '作用域。支付工具{位置：相对；高度；高度背景-color : # fff；飞越：隐藏；-标题{宽度： 100%；高度2.08888888雷姆；padding: 0 0.8rem线高2.08888888雷姆；文本对齐：中心；飞越：隐藏；图标{左侧浮动：保证金-顶： 0.7222222雷姆；} strong { font-size : 0.8 rem} }-内容{。支付工具输入高度2.3111111毫米；保证金： 1.2888888雷姆汽车0；border: 1px固体# b9b9b9边界半径为0.26666666雷姆；box-shadow : 0 1px # e6e 6；display: flex .项目{ width : 16.666666666%；高度2.3111111毫米；右边框： 1px实心# b9b 9；线高： 2.3111111毫米；文本对齐：中心；最后一个孩子{右边框：无；} .icon _ dot { display : inline-block；宽度： 0.51111111毫米；高度： 0.5111111毫米；背景： url('././资产/图像/图标_点。png ')不重复；背景尺寸：封面；} } } .支付工具链接{ padd : 0.53333333 rem 0.8 rem 0；文本对齐：右侧；链接{ font-size 3: 0.66666666 rem颜色： # 3c 8 CFB；} } } .付费工具-键盘{ position : absolute eleft : 0；底部： 0；宽度： 100%;ul {宽度： 100%；显示： flex柔性包装：包装；李{宽： 33.3333%；高度2.25442834毫米；线高2.25442834毫米；文本对齐：中心；右边框： 1px实心# aeeaeborder-bottom : 1 px固体# aeeaefont-size : 0.8 rem；字体粗细：粗体；第：个孩子(1)，第：个孩子(2)，第：个孩子(3){边框-顶部： 1px实心# eee}第：个孩子(3),第：个孩子(6),第：个孩子(9),第：个孩子(12){右边框：无；}第：名儿童(10名)、第：名儿童(11名)、第：名儿童(12名){边框-底部3360无；} :-child(10)，-child(12)， active {底色： # d1d4d} : th-child(12): active {底色： # fff} } } } }/style注意：页面使用雷姆布局，根超文本标记语言的字体大小为45磅。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。