<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<!-- 引入Vue -->
<script type="text/javascript" src="./static/js/vue.js"></script>
<!-- 引入当前页面css -->
<link rel="stylesheet" href="./static/css/index.css">
</head>
<body>
<div id="root">
<div class="form-content">
<div class="form-item">
<p>姓名</p><input id="phoneIpt" v-model="phone" @blur="phoneIpt()" type="text" placeholder="请输入">
</div>
<div class="form-item">
<p>手机号</p><input id="codeIpt" v-model="code" @blur="codeIpt()" type="text" placeholder="请输入">
</div>
<div class="bottom-btn">
<p class="confirm-btn" @click="confirm()" v-if="!confirmState">确定</p>
<img src="./static/img/rightArrow.png" alt="">
</div>
</div>
<!-- 键盘 -->
<div class="keyBorad-content" id="keyBorad-content">
<!-- 第一组 -->
<ul class="first-group">
<li class="key-item" v-for="(item,index) in firstArr" @click="printKey(item)">{
{item}}</li>
<li class="key-item" @click="deleteKey()">删除</li>
</ul>
<ul class="second-group">
<li class="key-item" v-for="(item,index) in secondArr" @click="printKey(item)">{
{item}}</li>
<li class="key-item" @click="clearAll()">清除</li>
</ul>
<ul class="third-group">
<li class="key-item" v-for="(item,index) in thirdArr" @click="printKey(item)">{
{item}}</li>
</ul>
<ul class="fourth-group">
<li class="key-item" v-for="(item,index) in fourthArr" @click="printKey(item)">{
{item}}</li>
</ul>
</div>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
//el的两种写法
new Vue({
el: '#root',
data() {
return {
iptIndex: '1',
firstArr: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
secondArr: ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'],
thirdArr: ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'],
fourthArr: ['Z', 'X', 'C', 'V', 'B', 'N', 'M'],
confirmState: false,
phone: "",
code: "",
message: '',
state: ''
}
},
created() {
this.phone = ''
this.code = ''
},
mounted() {
},
methods: {
phoneIpt() {
this.iptIndex = '1'
},
codeIpt() {
this.iptIndex = '2'
},
printKey(key) {
switch (this.iptIndex) {
case '1':
this.phone = this.phone + key
break;
case '2':
this.code = this.code + key
break;
default: break;
}
},
deleteKey() {
switch (this.iptIndex) {
case '1':
if (this.phone.length > 0) {
this.phone = this.phone.slice(0, this.phone.length - 1);
}
break;
case '2':
if (this.code.length > 0) {
this.code = this.code.slice(0, this.code.length - 1);
}
break;
default: break;
}
},
clearAll() {
switch (this.iptIndex) {
case '1':
this.phone = ''
break;
case '2':
this.code = ''
break;
default: break;
}
},
// 确认按钮
confirm() {
},
// 公共校验非空
isEmpty(data) {
if (!data) {
return true
}
if (JSON.stringify(data) === '{}') {
return true
}
if (JSON.stringify(data) === '[]') {
return true
}
return false
},
}
})
</script>
</html>css就不浪费时间了
主要的功能代码为方法里面的函数
phoneIpt() {
this.iptIndex = '1'
},
codeIpt() {
this.iptIndex = '2'
},
printKey(key) {
switch (this.iptIndex) {
case '1':
this.phone = this.phone + key
break;
case '2':
this.code = this.code + key
break;
default: break;
}
},
deleteKey() {
switch (this.iptIndex) {
case '1':
if (this.phone.length > 0) {
this.phone = this.phone.slice(0, this.phone.length - 1);
}
break;
case '2':
if (this.code.length > 0) {
this.code = this.code.slice(0, this.code.length - 1);
}
break;
default: break;
}
},
clearAll() {
switch (this.iptIndex) {
case '1':
this.phone = ''
break;
case '2':
this.code = ''
break;
default: break;
}
},结果
