Vue实现6位数密码效果

在ios系统，原生网络视图嵌套H5页面使用时，编写完成的6位数输入密码，输入密码卡顿问题的解决方案：

如下图：

原因是因为，CSS这块造成的。简单来说，左侧样式为负数的时候出现的，安卓目测不会出现此问题

输入[type=tel]{ opa city 3360 0；z指数：-1;绝对位置：左侧：-100%;}解决方案：

重新设置投入样式问题

输入[type=tel]{ width : 0.1 px；高度： 0.1 x color :透明；相对位置：top: 23px背景： # 000000;左侧： 46pxborder:无；font-size : 18pxopa城市3360 0；z指数：-1;}全部代码在这，你可以拿出去使用即可

模板div id='payPwd '标题支付密码设置/header input ref=' pwd ' type=' tel ' maxlength=' 6 ' v-model=' msg ' class=' pwd ' unselect=' on '/ul class=' pwd-wrap ' @ click=' focus ' Li : class=' msg。长度==0 '？PSD-闪烁' : ' ' ' I v-if=' msg。长度0 '/I/Li Li : class=' msg。长度==1 '？PSD-闪烁' : ' ' ' I v-if=' msg。长度1 '/I/Li Li : class=' msg。长度==2 '？PSD-闪烁' : ' ' ' I v-if=' msg。长度2 '/I/Li Li : class=' msg。长度==3 '？PSD-闪烁' : ' ' ' I v-if=' msg。长度3 '/I/Li Li : class=' msg。长度==4 '？PSD-闪烁' : ' ' ' I v-if=' msg。长度4 '/I/Li Li : class=' msg。长度==5 '？PSD-闪烁' : ' ' ' I v-if=' msg。长度5/I/Li/ul按钮类型='按钮' @单击='发送代码'获取验证码加载/按钮/div/模板脚本从""导入api ./API '；导入@/js/utils '；//公共方法导出默认值{ components: {，data() { return { msg: ' '，} }，created() {}，computed: {}，watch : { msg(curval){ if(/[^\d]/g.test(curval)){这。msg=this.msg.replace(/[^\d]/g ' ')；} }，}，methods: { focus() { this .参考文献。pwd。焦点()；}，sendCode() { //时间utils。发送代码(事件。目标)；//showLoading utils。查看。showLoading()；setTimeout(函数(){ utils。查看。dismisloading()；}, 5000);} },挂载(){} }/scriptstyle lang='less '范围的# payPwd { height: auto标题{ text-align :居中；高度： 80px线高： 90px文本对齐：中心；}输入[type=tel]{ width : 0.1 px；高度： 0.1 x color :透明；相对位置：top: 23px背景： # 000000;左侧： 46pxborder:无；font-size : 18pxopa城市3360 0；z指数：-1;} //光标PSD-闪烁{显示：内嵌块；背景： url(' ./img/blink。gif ')无重复中心；} .pwd-wrap {宽度： 90%；高度： 50px填充-底部： 1pxmargin: 0自动背景# fffborder: 1px固体# DDD display : flex display :-web工具包-box；display :-web套件-flex；光标：指针；绝对位置：左： 0；右： 0；前：名13%；z指数： 10；李{列表式-类型：无；文本对齐：中心；线高： 50px-web套件-box-flex : 1；flex : 1；-web套件-flex : 1；右边框： 1px实心# ddd:最后一个孩子{边框-右侧： 0；} i { height: 10px宽度： 10px边界半径： 50%;背景技术： # 000;显示器：内联块；} } }按钮{ position : relative display :块；高度： 41px文本对齐：中心；margin: 0自动利润率-前：名70%；padd : 0 20pxborder-半径： 5pxfont-size : 16pxborder: 1px固体# ddddddbackground : # ddddddcolor : # 000000 } }/样式附加：如果不想使用光标，直接

//去掉：class='msg.length==0 '？私营部门司闪烁":"即可lii v-if='msg.length 0'/i/li以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。