aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'dev_vite' of ssh://18.167.251.121:10002/aidlab/aida_front into dev_vite

Browse Source
This commit is contained in:
X1627315083
2025-10-13 11:08:02 +08:00
parent 7ec7ce5840 c3cd00dc1c
commit bac03bea5d
3 changed files with 168 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@@ -23,3 +23,4 @@ dist.rar
*.sln
*.sw?
.eslintrc-auto-import.json
components.d.ts

7
components.d.ts vendored
View File

@@ -9,10 +9,8 @@ export {}
declare module 'vue' {
export interface GlobalComponents {
ABadge: typeof import('ant-design-vue/es')['Badge']
ABreadcrumb: typeof import('ant-design-vue/es')['Breadcrumb']
ACheckbox: typeof import('ant-design-vue/es')['Checkbox']
AConfigProvider: typeof import('ant-design-vue/es')['ConfigProvider']
ADatePicker: typeof import('ant-design-vue/es')['DatePicker']
ADrawer: typeof import('ant-design-vue/es')['Drawer']
ADropdown: typeof import('ant-design-vue/es')['Dropdown']
AImage: typeof import('ant-design-vue/es')['Image']
@@ -20,22 +18,17 @@ declare module 'vue' {
AMenu: typeof import('ant-design-vue/es')['Menu']
AMenuItem: typeof import('ant-design-vue/es')['MenuItem']
AModal: typeof import('ant-design-vue/es')['Modal']
APagination: typeof import('ant-design-vue/es')['Pagination']
APopover: typeof import('ant-design-vue/es')['Popover']
ARangePicker: typeof import('ant-design-vue/es')['RangePicker']
ASelect: typeof import('ant-design-vue/es')['Select']
ASelectOption: typeof import('ant-design-vue/es')['SelectOption']
ASlider: typeof import('ant-design-vue/es')['Slider']
ASpace: typeof import('ant-design-vue/es')['Space']
ASpin: typeof import('ant-design-vue/es')['Spin']
ASubMenu: typeof import('ant-design-vue/es')['SubMenu']
ASwitch: typeof import('ant-design-vue/es')['Switch']
ATable: typeof import('ant-design-vue/es')['Table']
ATabPane: typeof import('ant-design-vue/es')['TabPane']
ATabs: typeof import('ant-design-vue/es')['Tabs']
ATimeRangePicker: typeof import('ant-design-vue/es')['TimeRangePicker']
AUpload: typeof import('ant-design-vue/es')['Upload']
ElCascader: typeof import('element-plus/es')['ElCascader']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
}

308
src/component/LoginPage/verificationCodeInput.vue
View File

@@ -1,151 +1,177 @@
<template>
<div id="app">
<div class="captcha">
<input v-for="(c, index) in getCtData" :key="index"
type="text"
v-model="getCtData[index]" ref="input"
inputmode="numeric"
pattern="[0-9]*"
@input="e => {onInput(e.target.value, index)}"
@keydown="e => {onKeydown(e, index)}"
@keypress="e => {onKeypress(e)}"
@focus="onFocus"
:disabled="loading"
>
</div>
</div>
<div id="app">
<div class="captcha">
<input
v-for="(c, index) in getCtData"
:key="index"
type="text"
v-model="getCtData[index]"
ref="input"
inputmode="numeric"
pattern="[0-9]*"
@input="(e) => onInput(e.target.value, index)"
@keydown="(e) => onKeydown(e, index)"
@keypress="(e) => onKeypress(e)"
@focus="onFocus"
@pause="onPause"
:disabled="loading"
/>
</div>
</div>
</template>
<script>
import { defineComponent } from 'vue'
import { defineComponent } from "vue";
export default defineComponent({
props:['ct'],
data() {
return {
loading: false,
}
},
computed: {
getCtData(){
return this.ct
},
ctSize() {
return this.getCtData.length;
},
cIndex() {
let i = this.getCtData.findIndex(item => item === '');
i = (i + this.ctSize) % this.ctSize;
return i;
},
lastCode() {
return this.getCtData[this.ctSize - 1];
}
},
watch: {
cIndex() {
this.resetCaret();
},
lastCode(newVal,oldVal) {
if (newVal && newVal != oldVal) {
this.$refs.input[this.ctSize - 1].blur();
this.sendCaptcha();
}
}
},
mounted() {
this.resetCaret();
},
methods: {
onInput(val, index) {
console.log('input',val,index)
// val = val.replace(/[^0-9]/g, '');
val = String(val).replace(/\D/g, '');
this.getCtData[index] = val
if (index == this.ctSize - 1) {
this.getCtData[this.ctSize - 1] = val[0]; // 最后一个码，只允许输入一个字符。
} else if(val.length > 1) {
let i = index;
for (i = index; i < this.ctSize && i - index < val.length; i++) {
this.getCtData[i] = val[i];
}
this.resetCaret();
}else if(!(val+'')){
this.getCtData[index] = ''
}
},
// 重置光标位置。
resetCaret() {
this.$refs.input[this.ctSize-1].focus();
},
onFocus() {
// 监听 focus 事件，将光标重定位到“第一个空白符的位置”。
let index = this.getCtData.findIndex(item => item === '');
index = (index + this.ctSize) % this.ctSize;
this.$refs.input[index].focus();
},
onKeypress(e) {
// 只允许输入数字0-9
const char = String.fromCharCode(e.which);
if (!/[0-9]/.test(char)) {
e.preventDefault();
}
},
onKeydown(e, index) {
// 处理删除键
if (e.key === 'Backspace' || e.key === 'Delete') {
const val = e.target.value;
if (val === '') {
// 删除上一个input里的值，并对其focus。
if (index > 0) {
this.getCtData[index - 1] = '';
this.$refs.input[index - 1].focus();
}
}
}
// 阻止其他非数字字符
else if (e.key && !/[0-9]/.test(e.key) && !['Backspace', 'Delete', 'Tab', 'Enter', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(e.key)) {
e.preventDefault();
}
},
export default defineComponent({
props: ["ct"],
data() {
return {
loading: false,
timeout: null,
};
},
computed: {
getCtData() {
return this.ct;
},
ctSize() {
return this.getCtData.length;
},
cIndex() {
let i = this.getCtData.findIndex((item) => item === "");
i = (i + this.ctSize) % this.ctSize;
return i;
},
lastCode() {
return this.getCtData[this.ctSize - 1];
},
},
watch: {
cIndex() {
this.resetCaret();
},
lastCode(newVal, oldVal) {
if (newVal && newVal != oldVal) {
this.$refs.input[this.ctSize - 1].blur();
this.sendCaptcha();
}
},
},
mounted() {
this.resetCaret();
},
methods: {
onInput(val, index) {
console.log("input", val, index);
clearTimeout(this.timeout);
this.timeout = setTimeout(() => {
console.log("input=>", val, index);
// val = val.replace(/[^0-9]/g, '');
val = String(val).replace(/\D/g, "");
this.getCtData[index] = val;
if (index == this.ctSize - 1) {
this.getCtData[this.ctSize - 1] = val[0]; // 最后一个码，只允许输入一个字符。
} else if (val.length > 1) {
let i = index;
for (
i = index;
i < this.ctSize && i - index < val.length;
i++
) {
this.getCtData[i] = val[i];
}
this.resetCaret();
} else if (!(val + "")) {
this.getCtData[index] = "";
}
}, 10);
},
onPause() {},
// 重置光标位置。
resetCaret() {
this.$refs.input[this.ctSize - 1].focus();
},
onFocus() {
// 监听 focus 事件，将光标重定位到“第一个空白符的位置”。
let index = this.getCtData.findIndex((item) => item === "");
index = (index + this.ctSize) % this.ctSize;
this.$refs.input[index].focus();
},
onKeypress(e) {
// 只允许输入数字0-9
const char = String.fromCharCode(e.which);
if (!/[0-9]/.test(char)) {
e.preventDefault();
}
},
onKeydown(e, index) {
// 处理删除键
if (e.key === "Backspace" || e.key === "Delete") {
const val = e.target.value;
if (val === "") {
// 删除上一个input里的值，并对其focus。
if (index > 0) {
this.getCtData[index - 1] = "";
this.$refs.input[index - 1].focus();
}
}
}
// 阻止其他非数字字符
else if (
e.key &&
!/[0-9]/.test(e.key) &&
![
"Backspace",
"Delete",
"Tab",
"Enter",
"ArrowLeft",
"ArrowRight",
"ArrowUp",
"ArrowDown",
].includes(e.key)
) {
e.preventDefault();
}
},
sendCaptcha() {
let password = this.getCtData.map(item => item).join('');
this.$emit('sendCaptcha',password)
},
sendCaptcha() {
let password = this.getCtData.map((item) => item).join("");
this.$emit("sendCaptcha", password);
},
reset() {
// 重置。一般是验证码错误时触发。
this.getCtData = this.getCtData.map(item => '');
this.resetCaret();
}
}
})
reset() {
// 重置。一般是验证码错误时触发。
this.getCtData = this.getCtData.map((item) => "");
this.resetCaret();
},
},
});
</script>
<style scoped lang="less">
.captcha {
display: flex;
justify-content: space-between;
}
input {
width: 8.7rem;
height: 8.7rem;
border: 0.1rem solid #B4BED7;
border-radius: 2rem;
text-align: center;
font-size: 2.4rem;
line-height: 8.7rem;
outline: none;
}
input:last-of-type {
margin-right: 0;
}
input:disabled {
color: #000;
background-color: #fff;
}
.msg {
text-align: center;
}
.captcha {
display: flex;
justify-content: space-between;
}
input {
width: 8.7rem;
height: 8.7rem;
border: 0.1rem solid #b4bed7;
border-radius: 2rem;
text-align: center;
font-size: 2.4rem;
line-height: 8.7rem;
outline: none;
}
input:last-of-type {
margin-right: 0;
}
input:disabled {
color: #000;
background-color: #fff;
}
.msg {
text-align: center;
}
</style>