wenfp/temple-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
wenfp
2025-07-13 14:42:38 +08:00
parent b3862ac356
commit 33d9d6bb06
37 changed files with 2093 additions and 29315 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/sms-code-input/index.vue
+47 -47
View File
@@ -1,10 +1,10 @@
<template>
<div class="input-box">
<div class="input-content" @keydown="keydown" @keyup="keyup" @paste="paste" @mousewheel="mousewheel" @input="inputEvent">
<input max="9" min="0" maxlength="1" data-index="0" v-model.trim.number="input[0]" type="number" ref="firstinput"/>
<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="2" v-model.trim.number="input[2]" type="number"/>
<input max="9" min="0" maxlength="1" data-index="3" v-model.trim.number="input[3]" type="number"/>
<input max="9" min="0" maxlength="1" data-index="0" v-model.trim.number="input[0]" type="number" ref="firstinput" />
<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="2" v-model.trim.number="input[2]" type="number" />
<input max="9" min="0" maxlength="1" data-index="3" v-model.trim.number="input[3]" type="number" />
</div>
</div>
</template>
@@ -22,7 +22,7 @@
font-family: inherit;
border: 0;
outline: 0;
border-bottom: 2px solid $primary-color;
border-bottom: 2px solid #cf9e3b;
height: 60px;
width: 60px;
font-size: 1rem;
@@ -48,27 +48,27 @@ export default {
pasteResult: [],
};
},
props: ['code'],
props: ["code"],
computed: {
input() {
if (this.code && Array.isArray(this.code) && this.code.length === this.codeCount) {
return this.code;
} else if (/^\d{this.codeCount}$/.test(this.code.toString())) {
return this.code.toString().split('');
return this.code.toString().split("");
} else if (this.pasteResult.length === this.codeCount) {
return this.pasteResult;
} else {
return new Array(this.codeCount);
}
},
is_weixn(){
is_weixn() {
const ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=="micromessenger") {
if (ua.match(/MicroMessenger/i) == "micromessenger") {
return true;
} else {
return false;
}
}
},
},
methods: {
// 解决一个输入框输入多个字符
@@ -76,48 +76,48 @@ export default {
var index = e.target.dataset.index * 1;
var el = e.target;
// el.value = el.value.replace(/Digit|Numpad/i, '').replace(/1/g, '').slice(0, 1);
this.$set(this.input, index, el.value)
this.$set(this.input, index, el.value);
},
keydown(e) {
var index = e.target.dataset.index * 1;
var el = e.target;
if (e.key === 'Backspace') {
if (e.key === "Backspace") {
if (this.input[index].length > 0) {
this.$set(this.input, index, '')
this.$set(this.input, index, "");
} else {
if (el.previousElementSibling) {
el.previousElementSibling.focus()
this.$set(this.input, index - 1, '')
el.previousElementSibling.focus();
this.$set(this.input, index - 1, "");
}
}
} else if (e.key === 'Delete') {
} else if (e.key === "Delete") {
if (this.input[index].length > 0) {
this.$set(this.input, index, '')
this.$set(this.input, index, "");
} else {
if (el.nextElementSibling) {
this.$set(this.input, index = 1, '')
this.$set(this.input, (index = 1), "");
}
}
if (el.nextElementSibling) {
el.nextElementSibling.focus()
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') {
} 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()
el.previousElementSibling.focus();
}
} else if (e.key === 'ArrowRight') {
} else if (e.key === "ArrowRight") {
if (el.nextElementSibling) {
el.nextElementSibling.focus()
el.nextElementSibling.focus();
}
} else if (e.key === 'ArrowUp') {
} 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') {
} else if (e.key === "ArrowDown") {
if (this.input[index] * 1 > 0) {
this.$set(this.input, index, (this.input[index] * 1 - 1).toString());
}
@@ -129,20 +129,20 @@ export default {
// 解决输入e的问题
var reg = /Digit|Numpad/i;
this.eventObj = JSON.stringify(e);
el.value = el.value.replace(reg, '').slice(0, 1);
el.value = el.value.replace(reg, "").slice(0, 1);
if (reg.test(e) || this.is_weixn) {
// 必须在这里符直，否则输入框会是空值
this.$set(this.input, index, el.value);
el.nextElementSibling && el.nextElementSibling.focus();
if (index === this.codeCount-1) {
if (this.input.join('').length === this.codeCount) {
if (index === this.codeCount - 1) {
if (this.input.join("").length === this.codeCount) {
document.activeElement.blur();
this.$emit('complete', this.input);
this.$emit("complete", this.input);
}
}
} else {
if (this.input[index] === '') {
this.$set(this.input, index, '');
if (this.input[index] === "") {
this.$set(this.input, index, "");
}
}
},
@@ -156,33 +156,33 @@ export default {
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 === this.codeCount) {
} else if (e.key === "Enter") {
if (this.input.join("").length === this.codeCount) {
document.activeElement.blur();
this.$emit('complete', this.input);
this.$emit("complete", this.input);
}
}
},
paste(e) {
// 当进行粘贴时
e.clipboardData.items[0].getAsString(str => {
e.clipboardData.items[0].getAsString((str) => {
if (str.toString().length === this.codeCount) {
this.pasteResult = str.split('');
this.pasteResult = str.split("");
document.activeElement.blur();
this.$emit('complete', this.input);
this.$emit("complete", this.input);
this.pasteResult = [];
} else {
// 如果粘贴内容不合规，清除所有内容
this.input[0] = new Array(6)
this.input[0] = new Array(6);
}
})
}
});
},
},
mounted() {
// 等待dom渲染完成，在执行focus,否则无法获取到焦点
this.$nextTick(() => {
this.$refs.firstinput.focus()
})
this.$refs.firstinput.focus();
});
},
}
};
</script>