20180330_使用vue简单实现手机号银行卡的同步显示功能
20180330_使用vue简单实现手机号银行卡的同步显示功能
简单实现手机号银行卡的同步显示功能
这是某盟的一道面试题
难道不都是只要有了清晰的思路后边写边优化么
当时我就说了思路用计算属性根据输入框的内容计算出预览框的值
处理focus和blur事件即可
非要手写，手写根本写不出啊，然后面试官就认为我不会 无语了
要求如下
- 输入框输入内容数据长度大于0，展示出预览信息
- 光标离开关闭预览信息
- 预览信息每隔4位插入一个特殊字符_,输入内容不变
就是用计算属性判断即可1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72<template lang="html">
<div class="zInput">
<div class="big-show" v-show="showBig">{{txt2}}</div>
<input type="text"
@blur="handerBlur"
@focus="handerFocus"
v-model="txt">
</div>
</template>
<script>
export default {
name: 'z-input',
data () {
return {
txt: '',
showBig: false,
}
},
computed: {
txt2: function () {
if (this.txt.length > 0) {
this.showBig = true
}
return this.getStr(this.txt, 4)
}
},
methods: {
handerBlur () {
this.showBig = false
},
handerFocus (evt) {
if (evt.target.value.length > 0) {
this.showBig = true
}
},
getStr (str, len) {
let lenth = str.length
let len1 = len - 1
let newStr = ''
for (var i = 0; i < lenth; i++) {
if (i % len === len1 && i > 0) {
newStr += str.charAt(i) + '_'
} else {
newStr += str.charAt(i)
}
}
if (newStr.length % (len + 1) === 0) {
// 解决最后一位为补充项问题
newStr = newStr.substr(0, newStr.length - 1)
}
return newStr
},
}
}
</script>
<style lang="less">
.zInput{
position: relative;
.big-show {
position: absolute;
top: -40px;
font-size: 36px;
line-height: 40px;
background-color: red;
}
}
.zInput{
top:50px;
}
</style>
如果再加入个长度限制，则以上方法就不合适了,更换实现方案v-model其实是个语法糖
分开写为v-bind:value和v-on:input1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60<template lang="html">
<div class="zInput">
<div class="big-show" v-show="showBig">{{txt2}}</div>
<input type="text"
@blur="handerBlur"
@focus="handerFocus"
v-bind:value="txt"
v-on:input="handerInput">
</div>
</template>
<script>
export default {
name: 'z-input',
data () {
return {
txt: '',
txt2: '',
showBig: false,
}
},
methods: {
handerInput (evt) {
let val = evt.target.value.substr(0, 13)
// 限制长度13位
this.txt = val
evt.target.value = val
if (this.txt.length > 0) {
this.showBig = true
}
this.txt2 = this.getStr(this.txt, 4)
},
handerBlur () {
this.showBig = false
},
handerFocus (evt) {
if (evt.target.value.length > 0) {
this.showBig = true
}
},
getStr (str, len) {
let lenth = str.length
let len1 = len - 1
let newStr = ''
for (var i = 0; i < lenth; i++) {
if (i % len === len1 && i > 0) {
newStr += str.charAt(i) + '_'
} else {
newStr += str.charAt(i)
}
}
if (newStr.length % (len + 1) === 0) {
// 解决最后一位为补充项问题
newStr = newStr.substr(0, newStr.length - 1)
}
return newStr
},
}
}
</script>
限制只能输入数字
首先想到的是在keyup时把非数字过滤掉
但是事实是先执行keydown->handerInput->keyup
那就在keydown时处理呗，但是keydown修改evt.target.value后
在handerInput取到的evt.target.value依旧是未处理的所以说在keydown处理不起作用
必须要在handerInput时处理1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30<input type="text"
@blur="handerBlur"
@focus="handerFocus"
@keyup="handerKeyup"
@keydown="handerKeydown"
v-bind:value="txt"
v-on:input="handerInput">
<script>
handerKeydown (evt) {
console.log('handerKeydown')
evt.target.value = evt.target.value.replace(/[^\d]/g, '')
// 这里修改不起作用
},
handerKeyup (evt) {
console.log('keyup')
evt.target.value = evt.target.value.replace(/[^\d]/g, '')
// 这里执行顺序靠后 修改无用
},
handerInput (evt) {
let val = evt.target.value.substr(0, 13).replace(/[^\d]/g, '')
console.log('handerInput__val', val)
//这里拿到的val是纯数字
evt.target.value = val
this.txt = val
if (this.txt.length > 0) {
this.showBig = true
}
this.txt2 = this.getStr(this.txt, 4)
},
</script>