序文
最近、同社は小さなプログラムを開発しましたが、オンラインの小さなプログラムを開発するのに十分な経験がなかったのも初めてです. アドバイスをお願いします. テイクアウトページでは、下の図に示すように、6つのデジタル
入力UI设计ボックス動的に
入力または順次削除できます。
結果を示す
問題に遭遇する
以前も使っていたのですVant Weapp UI框架が、このフレームワークのコンポーネントはvan-input本当に使いにくいです.
このコンポーネントのプロパティを変更するには、貫通して変更する必要があります.
後で行った最適化では、入力ボックスvan-inputに置き換え、ロジックを便宜上変更しました。input
論理的思考
実装のアイデアは比較的単純です. 6个input 入力ボックスを使用して, 後方に連続して入力するか前方に連続して削除するfous属性動的効果を制御します.例えば, レンダリングはカーソルが位置しているときに入力と入力解除を示します. そうでない場合, UI 効果とカーソルは混乱する. 効果は非常に低いようです!input框input框是不可以获取焦点的
コード表示
テンプレートコード
<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>
スクリプト ロジックの実装
ここで注意すべきこと: すべてのコードまたは番号を入力した後, 注文情報を取得するためにインターフェイスが直接呼び出されます. このとき,
失敗したコードを取得し, 判断のレイヤーを追加する必要があります.
失敗した場合, カーソルが必要ですユーザーが再入力しやすくするために最後までリセットする. 多分それは彼です. 間違えましたか?
js コードのロジックは明確でシンプルです。ご不明な点がございましたら、メッセージを残してご連絡ください。
//枚举类型
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()
})
要約する
製品の受け入れ問題の最初のバージョンでは、それが完璧ではないことにも気付いたので、
受け入れ後、この問題について考え、改善しようとしました. 今日の結果だけ〜
時々、私たちはそのような必要がありますこれだけで業界でさらに前進できる精神のようなもの
. 一生懸命頑張ってください~
