我的思路：用六个li充当六个格子，同时将input框隐藏，点击承载六个格子的容器时，使焦点聚焦在input上，可以输入。通过监听input框输入的长度，控制格子内小黑点是否显示，同时用正则替换非数字。

因为是用vue开发，并不是所有人粘贴就能使用，不过思路和实现过程都很简单明了。

下面是贴代码：

html部分

css部分

html,body{

width: 100%;

height: 100%;

background: #fbf9fe;

}

#payPwd .pwd-wrap{

width: 90%;

height: 44px;

padding-bottom: 1px;

margin: 0 auto;

background: #fff;

border:1px solid #ddd;

display: flex;

display: -webkit-box;

display: -webkit-flex;

cursor: pointer;

}

.pwd-wrap li{

list-style-type:none;

text-align: center;

line-height: 44px;

-webkit-box-flex: 1;

flex: 1;

-webkit-flex: 1;

border-right:1px solid #ddd ;

}

.pwd-wrap li:last-child{

border-right: 0;

}

.pwd-wrap li i{

height: 10px;

width: 10px;

border-radius:50% ;

background: #000;

display: inline-block;

}

JS部分

export default {

components: {

},

data () {

return {

msg:'',

msgLength:0,

}

},

created() {

},

computed: {

},

watch:{

msg(curVal){

if(/[^\d]/g.test(curVal)){

this.msg = this.msg.replace(/[^\d]/g,'');

}else{

this.msgLength = curVal.length;

}

},

},

methods: {

focus(){

this.$refs.pwd.focus();

},

}

}

最后是界面效果，有些简单。

HTML5 Canvas 绘制六叶草

注意: context.arc(横坐标,纵坐标,弧半径,起始角度,终止角度,逆顺时针);这个函数挺难用,主要原因是最后参数和角度的关系.不管文档怎么说,按我的实际经验,逆顺时针=false时,是逆时针 ...

HTML5学习笔记<六>: HTML5框架, 背景和实体

HTML5框架 1. 框架标签(frame): 框架对于页面的设计有着很大的作用 2. 框架集标签(

): 框架集标签定义如何将窗口分割为框架 每个frameset定义一 ...

html5测试

HTML5测试一 1. 问题:HTML5 之前的 HTML 版本是什么? A.HTML 4.01 B.HTML 4 C.HTML 4.1 D.HTML 4.9 答案:A HTML5 是 HTML 最新 ...

HTML5测试(二)

HTML5测试(四) 1.input 元素中,下列哪个类型属性定义了输入电话号码的控件? A.mob B.tel C.mobile D.telephone 答案:B 具有 type 属性的 input ...

【概率DP入门】

http://www.cnblogs.com/kuangbin/archive/2012/10/02/2710606.html 有关概率和期望问题的研究 摘要 在各类信息学竞赛中(尤其是ACM竞赛中) ...

洛谷P1274-魔术数字游戏

Problem 洛谷P1274-魔术数字游戏 Accept: 118    Submit: 243Time Limit: 1000 mSec    Memory Limit : 128MB Probl ...

概率DP自学

转自https://blog.csdn.net/zy691357966/article/details/46776199 zy691357966的blog 有关概率和期望问题的研究 摘要 在各类信息学 ...

Mavlink - 无人机通讯协议

http://qgroundcontrol.org/mavlink/start mavlink协议介绍https://pixhawk.ethz.ch/mavlink/ 消息简介 MAVLink简介 M ...

根据二进制和十进制转换规则转换成游戏[xyytit]

摘要: 二進位是由十進位轉換而成,它的數字都由1.0組成的.我們研究發現由十進位轉換而成的二進位的數字可以不只局限在於1~127,它的數可以更加深加廣,並且可以利用二進位的規則轉換成遊戲.我們利用2n ...

随机推荐

With great power comes great responsibility

We trust you have received the usual lecture from the local SystemAdministrator. It usually boils do ...

LeetCode35 Search Insert Position

题目: Given a sorted array and a target value, return the index if the target is found. If not, return ...

初级jQuery的使用

Unity3D学习笔记——选择Enemy

一.步骤: 1.创建三个Cube,并将这三个Cube的Cube的Tag设为Enemy 2.导入第一人称视角的资源 3.创建名为Targeting的C#脚本 4.编写Targeting脚本,并将它附到第 ...

Vs2010发布Asp.Net网站及挂到IIS服务上

首先用vs2010打开一个Asp.Net项目, 也可以通过vs菜单->生成->发布网站                           选择发布网站的路径 这样发布就OK了 下面就吧发 ...

Find Median from Data Stream 解答

Question Median is the middle value in an ordered integer list. If the size of the list is even, the ...

Less的!important关键字

Less的!important关键字 在调用 mixin 时,如果在后面追加 !important 关键字,就可以将 mixin 里面的所有属性都标记为 !important.如,以下Less代码: ...

Web自动化框架LazyUI使用手册(3)--单个xpath抓取插件详解(selenium元素抓取，有此插件，便再无所求！)

概述 前面的一篇博文粗略介绍了基于lazyUI的第一个demo,本文将详细描述此工具的设计和使用. 元素获取插件:LazyUI Elements Extractor,作为Chrome插件,用于抓取页面 ...

Sqlite操作帮助类

sqlite帮助类 using System; using System.Collections.Generic; using System.Linq; using System.Text; us ...

php钩子原理和实现

2017年3月18日17:22:52 php版本 5.6.27 5.3以下和5.3以上的版本在PHP类与对象区别很大,请注意 其实原理很简单,有些人把事情弄的过于发杂,其实就是调用某个目录下的比如/h ...