提交 0982a2b5 编写于 作者: A Anne_LXM

Element-->UniElement

上级 ebe962ca
...@@ -103,7 +103,7 @@ ...@@ -103,7 +103,7 @@
// this.$emit('update:focus', true); // this.$emit('update:focus', true);
}, },
setFocus(state : boolean) { setFocus(state : boolean) {
const inputEl = this.$refs['input'] as Element const inputEl = this.$refs['input'] as UniElement
if (state) { if (state) {
inputEl.focus(); inputEl.focus();
} else { } else {
......
...@@ -32,7 +32,7 @@ ...@@ -32,7 +32,7 @@
confirmCallBack = callback; confirmCallBack = callback;
(this.$refs['popup'] as UniPopupComponentPublicInstance).open(); (this.$refs['popup'] as UniPopupComponentPublicInstance).open();
this.$nextTick(() => { this.$nextTick(() => {
(this.$refs['input'] as Element).focus() (this.$refs['input'] as UniElement).focus()
}) })
}, },
cancel() { cancel() {
......
...@@ -5,8 +5,9 @@ ...@@ -5,8 +5,9 @@
<text class="sms-code-title">{{title}}</text> <text class="sms-code-title">{{title}}</text>
<text class="sms-code-tip">短信验证码已发送至{{mobile}}</text> <text class="sms-code-tip">短信验证码已发送至{{mobile}}</text>
<view class="code-input-list"> <view class="code-input-list">
<template v-for="(item,i) in smsCodeList" :key="i"> <template v-for="(_,i) in smsCodeList" :key="i">
<input @input="setSmsCode(i,$event as InputEvent)" :value="item" type="number" ref="code-input" <!-- TODO APP :value="item" -->
<input @input="setSmsCode(i,$event as InputEvent)" type="number" ref="code-input"
class="code-input" maxlength="7" @focus="onFocus(i)" /> class="code-input" maxlength="7" @focus="onFocus(i)" />
</template> </template>
</view> </view>
...@@ -23,7 +24,7 @@ ...@@ -23,7 +24,7 @@
emits: ["update:modelValue","reGetSmsCode","blur", "focus" ], emits: ["update:modelValue","reGetSmsCode","blur", "focus" ],
data() { data() {
return { return {
smsCodeList: ["\u200b", "\u200b", "\u200b", "\u200b", "\u200b", "\u200b"], smsCodeList: ["\u200b", "\u200b", "\u200b", "\u200b", "\u200b", "\u200b"],
isOpen: false isOpen: false
} }
}, },
...@@ -63,7 +64,7 @@ ...@@ -63,7 +64,7 @@
show() { show() {
(this.$refs['popup'] as UniPopupComponentPublicInstance).open(); (this.$refs['popup'] as UniPopupComponentPublicInstance).open();
this.$nextTick(() => { this.$nextTick(() => {
(this.$refs["code-input"] as Element[])[0].focus(); (this.$refs["code-input"] as UniElement[])[0].focus();
}) })
this.isOpen = true this.isOpen = true
}, },
...@@ -75,28 +76,26 @@ ...@@ -75,28 +76,26 @@
clear() { clear() {
this.smsCodeList = ["\u200b", "\u200b", "\u200b", "\u200b", "\u200b", "\u200b"]; this.smsCodeList = ["\u200b", "\u200b", "\u200b", "\u200b", "\u200b", "\u200b"];
if (this.isOpen) { if (this.isOpen) {
(this.$refs["code-input"] as Element[])[0].focus(); (this.$refs["code-input"] as UniElement[])[0].focus();
// console.log('clear success'); // console.log('clear success');
} else { } else {
// console.log('已经关了,不能清空'); // console.log('已经关了,不能清空');
} }
}, },
setSmsCode(i : number, e : InputEvent) { setSmsCode(i : number, e : InputEvent) {
// console.log('setSmsCode--',e);
const { value } = e.detail const { value } = e.detail
// console.log('~~',value,value.length); console.log('~~',value,value.length);
// 已满6位数就直接调登录 // 已满6位数就直接调登录
let $value = value.replace(/\u200b/g, '') let $value = value.replace(/\u200b/g, '')
if ($value.length == 6) { if ($value.length == 6) {
// (this.$refs["code-input"] as Element[])[0].focus(); // (this.$refs["code-input"] as Element[])[0].focus();
// console.log('~~~~~', $value, $value.split('')); // console.log('~~~~~', $value, $value.split(''));
$value.split('').forEach((item : string, index : number) => { $value.split('').forEach((item : string, index : number) => {
// console.log('index', index, item);
this.smsCodeList[index] = "\u200b" + item this.smsCodeList[index] = "\u200b" + item
}) })
return return
} }
// 限制每个空格内的文字不超过2位 // 限制每个空格内的文字不超过2位
if (value.length > 2) { if (value.length > 2) {
this.$nextTick(() => { this.$nextTick(() => {
...@@ -105,7 +104,6 @@ ...@@ -105,7 +104,6 @@
this.smsCodeList[i] = newValue this.smsCodeList[i] = newValue
}) })
} }
// 被删除完就直接后退一格 // 被删除完就直接后退一格
if (value.length == 0) { if (value.length == 0) {
this.smsCodeList[i] = "" this.smsCodeList[i] = ""
...@@ -113,19 +111,20 @@ ...@@ -113,19 +111,20 @@
this.smsCodeList[i] = '\u200b' this.smsCodeList[i] = '\u200b'
}) })
if (i != 0) { if (i != 0) {
(this.$refs["code-input"] as Element[])[i - 1].focus(); (this.$refs["code-input"] as UniElement[])[i - 1].focus();
this.smsCodeList[i - 1] = "" this.smsCodeList[i - 1] = ""
} }
} else if (value != "\u200b") { } else if (value != "\u200b") {
this.smsCodeList[i] = value; this.smsCodeList[i] = value;
if (i != (this.smsCodeList.length - 1)) { if (i != (this.smsCodeList.length - 1)) {
(this.$refs["code-input"] as Element[])[i + 1].focus(); (this.$refs["code-input"] as UniElement[])[i + 1].focus();
} else { } else {
// console.log(i, (this.smsCodeList.length - 1)); // console.log(i, (this.smsCodeList.length - 1));
} }
} }
}, },
onFocus(i : number) { onFocus(i : number) {
// console.log("onFocus",i);
if (this.smsCodeList[i].length == 0) { if (this.smsCodeList[i].length == 0) {
this.smsCodeList[i] = '\u200b' this.smsCodeList[i] = '\u200b'
} }
......
...@@ -137,12 +137,12 @@ ...@@ -137,12 +137,12 @@
if (state.pendingAgreements) { if (state.pendingAgreements) {
// uni.hideKeyboard(); // uni.hideKeyboard();
this.sendSmsCaptchaCP!.setFocus(false); this.sendSmsCaptchaCP!.setFocus(false);
// web端尚未完全支持 // web端有问题
// (this.$parent as ComponentPublicInstance).$callMethod("showPopupCaptcha", () => { // (this.$parent as ComponentPublicInstance).$callMethod("showPopupCaptcha", () => {
// if (!state.pendingAgreements) { // if (!state.pendingAgreements) {
// this.sendSmsCode() // this.sendSmsCode()
// } // }
// }); // });
// 临时方案 // 临时方案
uni.$emit('uni-id-pages-x-loginBySmsCode-showPopupCaptcha',()=>{ uni.$emit('uni-id-pages-x-loginBySmsCode-showPopupCaptcha',()=>{
if (!state.pendingAgreements) { if (!state.pendingAgreements) {
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册