foreword
Recently, the company has developed a small program, which is also the first time that I have insufficient experience in developing an online small program. Please give me some advice.
On the takeaway page, UI设计as shown in the figure below, 6 digital input boxes are connected sequentially,
which can be dynamically entered or deleted sequentially.
Show results
Encounter problems
I used it before Vant Weapp UI框架, but the components of this framework van-inputare really difficult to use.
To change the properties of this component, you need to penetrate to modify it!
In the optimization I did later, I van-inputreplaced it with inputan input box
, and the logic was modified for convenience.
logical thinking
The implementation idea is relatively simple. 6个inpuThe t input box is used to control the dynamic effect of fous属性sequentially inputting backwards or sequentially deleting forwards . For example, the rendering shows the input and uninput when the cursor is located , otherwise the ui effect and the cursor will be confused. The effect looks very low!input框input框是不可以获取焦点的
code display
template code
<view class="input-content">
<input class="field-custom" type="number" maxlength="1"
:style="firstFocus ? 'border: 2rpx solid #2681FE;
box-shadow: 0 0 20rpx 0 rgba(38,129,254,0.20);' : ''"
@focus='focus' :focus="firstFocus"
@input="inputChange($event, SELECT_TYPE.A)" input-align="center"
:disabled="!firstFocus" />
<input class="field-custom" type="number" maxlength="1"
:style="secondFocus ? 'border: 2rpx solid #2681FE;
box-shadow: 0 0 20rpx 0 rgba(38,129,254,0.20);' : ''"
:focus="secondFocus" @input='inputChange($event, SELECT_TYPE.B)'
input-align="center"
:disabled="!secondFocus" />
<input class="field-custom" type="number" maxlength="1"
:style="thirdFocus ? 'border: 2rpx solid #2681FE;
box-shadow: 0 0 20rpx 0 rgba(38,129,254,0.20);' : ''"
:focus="thirdFocus" @input='inputChange($event, SELECT_TYPE.C)'
input-align="center"
:disabled="!thirdFocus" />
<input class="field-custom" type="number" maxlength="1"
:style="fourFocus ? 'border: 2rpx solid #2681FE;
box-shadow: 0 0 20rpx 0 rgba(38,129,254,0.20);' : ''"
:focus="fourFocus" @input='inputChange($event, SELECT_TYPE.D)'
input-align="center"
:disabled="!fourFocus" />
<input class="field-custom" type="number" maxlength="1"
:style="fiveFocus ? 'border: 2rpx solid #2681FE;
box-shadow: 0 0 20rpx 0 rgba(38,129,254,0.20);' : ''"
:focus="fiveFocus" @input='inputChange($event, SELECT_TYPE.E)'
input-align="center"
:disabled="!fiveFocus" />
<input class="field-custom" type="number" maxlength="1"
:style="sixFocus ? 'border: 2rpx solid #2681FE;
box-shadow: 0 0 20rpx 0 rgba(38,129,254,0.20);' : ''"
:focus="sixFocus" @input='inputChange($event, SELECT_TYPE.F)'
input-align="center" :disabled="!sixFocus" />
</view>
script logic implementation
One thing to note here: After entering all the codes or numbers, the interface is directly called to obtain the order information. At
this time, we need to get the failed code and add a layer of judgment.
If it fails, the cursor needs to be reset to the end to facilitate the user to re-enter. Maybe it is him. Did you make a mistake?
The js code logic is clear and simple. If you have any questions, you can leave a message to communicate
//枚举类型
enum SELECT_TYPE {
A = 'a',
B = 'b',
C = 'c',
D = 'd',
E = 'e',
F = 'f'
}
/**
* 输入框及光标
*/
const firstFocus = ref(true)
const secondFocus = ref(false)
const thirdFocus = ref(false)
const fourFocus = ref(false)
const fiveFocus = ref(false)
const sixFocus = ref(false)
//记录输入的值
const num1 = ref<string>('')
const num2 = ref<string>('')
const num3 = ref<string>('')
const num4 = ref<string>('')
const num5 = ref<string>('')
const num6 = ref<string>('')
function focus() {
firstFocus.value = true;
}
/**
* 监听输入框值
* @param e 输入变化
* @param type 类型区分
*/
function inputChange(e: any, type: string) {
console.log('input >>>', e);
//初始化所有光标
initialization();
switch (type) {
case 'a':
if (e.detail.value != '' && e.detail.keyCode != 8) {
secondFocus.value = true;
}else{
firstFocus.value = true
}
num1.value = e.detail.value
break;
case 'b':
if (e.detail.value != '' && e.detail.keyCode != 8) {
thirdFocus.value = true;
}else{
firstFocus.value = true
}
num2.value = e.detail.value
break;
case 'c':
if (e.detail.value != '' && e.detail.keyCode != 8) {
fourFocus.value = true;
}else{
secondFocus.value = true
}
num3.value = e.detail.value
break;
case 'd':
if (e.detail.value != '' && e.detail.keyCode != 8) {
fiveFocus.value = true;
} else {
thirdFocus.value = true
}
num4.value = e.detail.value
break;
case 'e':
if (e.detail.value != '' && e.detail.keyCode != 8) {
sixFocus.value = true;
} else {
fourFocus.value = true
}
num5.value = e.detail.value
break;
case 'f':
if (e.detail.value != '' && e.detail.keycode != 8) {
initialization();
} else {
fiveFocus.value = true
}
num6.value = e.detail.value
break;
}
const outNum = num1.value + num2.value + num3.value
+ num4.value + num5.value + num6.value
console.log('美团取货码为：', outNum);
if (outNum != '' && outNum.trim().length == 6) {
getPickedupList(storeId.value, outNum)
}
//如果输入框都有内容 光标不用移动
if (num1.value != '' && num2.value != '' && num3.value != ''
&& num4.value != '' && num5.value != '' && num6.value != '') {
initialization();
}
}
// 初始化所有焦点变量
function initialization() {
firstFocus.value = false;
secondFocus.value = false;
thirdFocus.value = false;
fourFocus.value = false;
fiveFocus.value = false;
sixFocus.value = false;
}
/**
* 初始化
*/
onMounted(() => {
initialization()
focus()
})
Summarize
In the first version of the product acceptance issue, I also realized that it was not perfect,
so after the acceptance, I have been thinking about this issue and trying to improve it. Only today's results~
Sometimes, we need such a Only with this kind of spirit can we go further in the industry
. Keep working hard, come on~
