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

修正日行一善

Browse Source
This commit is contained in:
wenfp
2022-01-21 11:26:47 +08:00
parent 6484d35232
commit 62a7d349cc
22 changed files with 594 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/random-money/index.vue
+1 -1
View File
@@ -128,7 +128,7 @@ export default {
}
.username-container{
padding-top: .3rem;
height: 2rem;
height: 1rem;
.username{
color: white;
font-size: .4rem;
src/components/sms-code-input/index.vue
+188
View File
@@ -0,0 +1,188 @@
<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"/>
</div>
</div>
</template>
<style scoped lang="scss">
.input-box {
.input-content {
height: 60px;
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 1rem;
input {
color: inherit;
font-family: inherit;
border: 0;
outline: 0;
border-bottom: 2px solid $primary-color;
height: 60px;
width: 60px;
font-size: 1rem;
text-align: center;
font-weight: bold;
}
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
appearance: none;
margin: 0;
}
}
</style>
<script>
export default {
data() {
return {
codeCount: 4,
eventObj: {},
pasteResult: [],
};
},
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('');
} else if (this.pasteResult.length === this.codeCount) {
return this.pasteResult;
} else {
return new Array(this.codeCount);
}
},
is_weixn(){
const ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=="micromessenger") {
return true;
} else {
return false;
}
}
},
methods: {
// 解决一个输入框输入多个字符
inputEvent(e) {
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)
},
keydown(e) {
var index = e.target.dataset.index * 1;
var el = e.target;
if (e.key === 'Backspace') {
if (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].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) {
var index = e.target.dataset.index * 1;
var el = e.target;
// 解决输入e的问题
var reg = /Digit|Numpad/i;
this.eventObj = JSON.stringify(e);
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) {
document.activeElement.blur();
this.$emit('complete', this.input);
}
}
} else {
if (this.input[index] === '') {
this.$set(this.input, index, '');
}
}
},
mousewheel(e) {
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 === this.codeCount) {
document.activeElement.blur();
this.$emit('complete', this.input);
}
}
},
paste(e) {
// 当进行粘贴时
e.clipboardData.items[0].getAsString(str => {
if (str.toString().length === this.codeCount) {
this.pasteResult = str.split('');
document.activeElement.blur();
this.$emit('complete', this.input);
this.pasteResult = [];
} else {
// 如果粘贴内容不合规，清除所有内容
this.input[0] = new Array(6)
}
})
}
},
mounted() {
// 等待dom渲染完成，在执行focus,否则无法获取到焦点
this.$nextTick(() => {
this.$refs.firstinput.focus()
})
},
}
</script>
src/components/vue-number-scroll/index.vue
+3
View File
@@ -69,12 +69,15 @@ export default {
<style lang="scss">
/*金额滚动数字设置*/
.vue-number-scroll{
margin-bottom: .5rem;
margin-top: .3rem;
.box-item {
width: 100%;
text-align: center;
line-height: 40px;
font-size: 1rem;
padding: 2% 0;
height: 1.3rem;
position: relative;
list-style: none;
text-orientation: upright;