<template> <div> <div> <div v-for='item in keyArr'>{{item}}</div> <div></div> //键盘图标 </div> <div> //... </div> </div> </template> <script> export default { data() { return { baseArr: [] } }, computed: { keyArr() { this.handleInit(); return this.baseArr; } }, methods: { handleInit() { this.baseArr = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0']; this.baseArr.splice(this.baseArr.length - 1, 0, ''); } } } </script>
即在键位数组倒数第二位插入一个空字符，然后循环生成按键。下面看下自定义参数是如何生效的。
sp-key
<script> export default { props: ['spKey'], data() { return { baseArr: [] } }, //.... methods: { handleInit() { let spKey = this.spKey; this.baseArr = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0']; this.baseArr.splice(this.baseArr.length - 1, 0, spKey); } } } </script>
在组件内部通过 props 属性接收父组件传递的 spKey，之后就可在组件内的属性和方法中通过 this.spKey 进行访问。首先判断 spKey 值是否有效，并代替空字符插入键位数组倒数第二项。
random
<script> export default { props: ['spKey', 'random'], data() { return { baseArr: [] } }, //.... methods: { handleInit() { let spKey = this.spKey; this.baseArr = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0']; if (this.random && this.random != 'false') { this.baseArr.sort(function() { return Math.random() - Math.random(); }); } this.baseArr.splice(this.baseArr.length - 1, 0, spKey); } } } </script>
将键位打乱顺序其实也很简单，只要通过数组的 sort 方法。sort 方法可以接收一个函数作为参数，若函数返回正数则交换前后两项的位置，若函数返回负数则不作交换。所以将两个随机数相减的结果返回，即可将键位数组随机排序。
下面看看在组件内部是如何触发 change-event 的。
handleInput()
<template> <div> <div> <div @click='handleInput(item)' v-for='item in keyArr'>{{item}}</div> <div></div> //键盘图标 </div> //... </div> </template> <script> export default { data() { return { inputStr: '' } }, //... methods: { handleInput(value) { this.inputStr += value; this.$emit('change-event', this.inputStr, value); } } } </script>
增加了 max 属性后修改方法如下：
handleInput(value) { let max = Number(this.max); if (!isNaN(max) && this.inputStr.length+1 > max) { return; } this.inputStr += value; this.$emit('change-event', this.inputStr, value); }
最后看看退格删除是如何实现的。
handleDelete()
handleDelete() { let str = this.inputStr; if (!str.length) return; this.inputStr = str.substring(0, str.length - 1); this.$emit('change-event', this.inputStr); }
上面的例子都是些核心代码的片段，并且其他辅助函数并未列出，想查看完整的代码请看源码。