|
<template>
|
<div class="input-box">
|
|
<div
|
class="input-content"
|
@keydown="keydown"
|
@keyup="keyup"
|
@paste="paste"
|
@mousewheel="mousewheel"
|
@input="inputEvent"
|
@compositionend="compositionend"
|
v-for="(item, index) in codeList"
|
>
|
<input
|
max="9"
|
min="0"
|
v-for="ele in item"
|
maxlength="1"
|
:data-index="ele"
|
ref="firstinput"
|
v-model.trim.number="input[ele]"
|
:disabled="disabled"
|
/>
|
<span
|
style="
|
height: 100%;
|
display: inline-block;
|
line-height: 22px;
|
width: 22px;
|
text-align: center;
|
"
|
class="el-icon-minus"
|
v-if="index - (codeList.length - 1)"
|
></span>
|
<!-- <input
|
max="9"
|
min="0"
|
maxlength="1"
|
data-index="1"
|
v-model.trim.number="input[1]"
|
type="number"
|
/>
|
|
<input
|
max="9"
|
min="0"
|
maxlength="1"
|
data-index="5"
|
v-model.trim.number="input[5]"
|
type="number"
|
/> -->
|
</div>
|
</div>
|
</template>
|
|
<script>
|
|
export default {
|
data() {
|
return {
|
// 存放粘贴进来的数字
|
pasteResult: [],
|
inputList: [],
|
codeList: [],
|
// input: this.inputValue || [],
|
};
|
},
|
props: ["code", "codenumer", "sum", "disabled", "del", "inputValue"],
|
computed: {
|
input() {
|
// code 是父组件传进来的默认值，必须是6位长度的数组，这里就不再做容错判断处理
|
// 最后空数组是默认值
|
// return this.code || this.pasteResult.length === 6
|
// ? this.pasteResult
|
// : ["", "", "", "", "", ""];
|
if(this.inputValue){
|
return this.inputValue
|
}else{
|
return this.code || this.pasteResult.length === 6 ? this.pasteResult : [];
|
}
|
|
},
|
// input: {
|
// get () {
|
// if (this.visible) {
|
// // 注册全局监听事件 [ 目前只考虑鼠标解除触发 ]
|
// window.addEventListener('mousedown', this.watchContextmenu)
|
// }
|
// return this.visible
|
// },
|
// set (newVal) {
|
// this.$emit('update:visible', newVal)
|
// }
|
// },
|
},
|
methods: {
|
compositionend(e){
|
e.preventDefault()
|
this.batchInsert(e.data,e.target)
|
},
|
// 解决一个输入框输入多个字符
|
inputEvent(e) {
|
var index = e.target.dataset.index * 1;
|
var el = e.target;
|
this.$set(this.input, index, el.value.slice(0, 1));
|
},
|
keydown(e) {
|
var index = e.target.dataset.index * 1;
|
var el = e.target;
|
if (e.key === "Backspace") {
|
if (this.input[index]&&this.input[index].length > 0) {
|
this.$set(this.input, index, "");
|
} else {
|
if (el.previousElementSibling) {
|
el.previousElementSibling.focus();
|
this.$set(this.input, index - 1, "");
|
}
|
}
|
} else if (e.key === "Delete") {
|
if (this.input[index]&&this.input[index].length > 0) {
|
this.$set(this.input, index, "");
|
} else {
|
if (el.nextElementSibling) {
|
this.$set(this.input, (index = 1), "");
|
}
|
}
|
if (el.nextElementSibling) {
|
el.nextElementSibling.focus();
|
}
|
} else if (e.key === "Home") {
|
el.parentElement.children[0] && el.parentElement.children[0].focus();
|
} else if (e.key === "End") {
|
el.parentElement.children[this.input.length - 1] &&
|
el.parentElement.children[this.input.length - 1].focus();
|
} else if (e.key === "ArrowLeft") {
|
if (el.previousElementSibling) {
|
el.previousElementSibling.focus();
|
}
|
} else if (e.key === "ArrowRight") {
|
if (el.nextElementSibling) {
|
el.nextElementSibling.focus();
|
}
|
} else if (e.key === "ArrowUp") {
|
if (this.input[index] * 1 < 9) {
|
this.$set(this.input, index, (this.input[index] * 1 + 1).toString());
|
}
|
} else if (e.key === "ArrowDown") {
|
if (this.input[index] * 1 > 0) {
|
this.$set(this.input, index, (this.input[index] * 1 - 1).toString());
|
}
|
}
|
},
|
keyup(e) {
|
if (e.ctrlKey || e.shiftKey){
|
// 忽略组合键时的字符输入
|
return;
|
}
|
if (e.isComposing || e.keyCode === 229) {
|
// 忽略输入法合成事件 忽略IME加工过的值
|
return;
|
}
|
var index = e.target.dataset.index * 1;
|
var el = e.target;
|
// console.log(this.input);
|
this.$emit("codeList", this.input);
|
if (/Digit|Numpad|Key/i.test(e.code)) {
|
// this.$set(this.input, index, e.code.replace(/Digit|Numpad|Key/i, ""));
|
this.$set(this.input, index, e.key);
|
el.nextElementSibling && el.nextElementSibling.focus();
|
if (index === 5) {
|
let number=0
|
if(this.codenumer&&this.codenumer.length>0){
|
for(let i in this.codenumer){
|
number=number+Number(this.codenumer[i])
|
}
|
}
|
console.log(this.pasteResult,'===keyup');
|
if (this.input.join("").length === number) {
|
document.activeElement.blur();
|
this.$emit("complete", this.input);
|
}
|
}
|
} else {
|
if (this.input[index] === "") {
|
this.$set(this.input, index, "");
|
}
|
}
|
},
|
mousewheel(e) {
|
// 防止触发外部滚动条
|
e.preventDefault()
|
var index = e.target.dataset.index;
|
if (e.wheelDelta > 0) {
|
if (this.input[index] * 1 < 9) {
|
this.$set(this.input, index, (this.input[index] * 1 + 1).toString());
|
}
|
} else if (e.wheelDelta < 0) {
|
if (this.input[index] * 1 > 0) {
|
this.$set(this.input, index, (this.input[index] * 1 - 1).toString());
|
}
|
} else if (e.key === "Enter") {
|
if (this.input.join("").length === 6) {
|
document.activeElement.blur();
|
this.$emit("complete", this.input);
|
}
|
}
|
},
|
/**
|
* 批量添加字符
|
* @param str 字符串
|
* @param currentInputElement 当前输入的input元素
|
*/
|
batchInsert(str,currentInputElement){
|
const charList = str.split('');
|
|
let currentIndex = currentInputElement.dataset.index * 1;
|
|
let activeInputElement =currentInputElement
|
charList.forEach((ele,idx)=>{
|
this.$set(this.input, currentIndex+idx, ele);
|
activeInputElement = activeInputElement?.nextElementSibling
|
})
|
activeInputElement?.focus()
|
},
|
paste(e) {
|
// 当进行粘贴时
|
e.clipboardData.items[0].getAsString((str) => {
|
// if (str.toString().length === 6) {
|
// this.pasteResult = str.split("");
|
// document.activeElement.blur();
|
// this.$emit("complete", this.input);
|
// }
|
|
this.batchInsert(str,e.target)
|
this.$emit("complete", this.input);
|
});
|
},
|
save() {
|
this.inputList = []
|
var arrlist = [];
|
var list = [];
|
if(this.codenumer&&this.codenumer.length>0){
|
this.codenumer.forEach(item=>{
|
this.inputList.push(item);
|
})
|
this.inputList.forEach((item, index) => {
|
var arr = [];
|
var x = list.length;
|
var y = list.length + item;
|
for (let index = x; index < y; index++) {
|
arr.push(index);
|
list.push(index);
|
}
|
arrlist.push(arr);
|
});
|
}
|
this.codeList = arrlist;
|
// console.log(this.codeList);
|
},
|
delcode(val) {
|
this.codeList.splice(val, 1);
|
this.inputList.splice(val, 1);
|
},
|
},
|
watch: {
|
codenumer(val) {
|
console.log(val);
|
this.save();
|
},
|
sum(val) {
|
if (val == 0) {
|
this.codeList.splice(this.del, 1);
|
this.inputList.splice(this.del, 1);
|
}
|
//使用定时器防止删除的时候执行
|
setTimeout(() => {
|
// 防止连续输入相同个数时格子不增加;
|
if (this.inputList.length < val) {
|
console.log(val, "sum");
|
this.save();
|
}
|
}, 200);
|
// console.log(this.inputList.length, val);
|
// console.log("数组长度", "输入次数");
|
},
|
del(val) {},
|
},
|
created() {
|
this.save();
|
},
|
|
mounted() {
|
// 等待dom渲染完成，在执行focus,否则无法获取到焦点
|
// this.$nextTick(() => {
|
// this.$refs.firstinput.focus();
|
// });
|
// console.log(this.inputList);
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.input-box {
|
// display: table-cell;
|
display: inline-block;
|
.input-content {
|
// width: 512px;
|
// height: 32px;
|
// display: flex;
|
// align-items: center;
|
// justify-content: space-between;
|
display: inline-block;
|
margin-right: 0px;
|
line-height:28px;
|
input {
|
color: inherit;
|
font-family: inherit;
|
border: 0;
|
outline: 0;
|
border-bottom: 1px solid #919191;
|
height: 22px;
|
width: 22px;
|
font-size:18px;
|
text-align: center;
|
border: #919191 1px solid;
|
margin: 2px 3px;
|
box-sizing: border-box;
|
}
|
}
|
input::-webkit-outer-spin-button,
|
input::-webkit-inner-spin-button {
|
appearance: none;
|
margin: 0;
|
}
|
}
|
</style>
|
