關於Vue開發中的一些踩坑記錄三

如果你希望在生命週期中做到阻塞非同步，es6中雖然提供了aysnc的語法糖，但是在鉤子函式中使用是無法生效的，如：

async
created()
mounted()
//這裡依然會是執行完mounted()中的this.format()之後才執行this.getlist()

原理很簡單，使用async/await的鉤子內部的非同步**是無法起到阻塞鉤子主線程執行的作用的，如果想達到同步執行的效果，應該使用任務佇列的特性，用settimeout()把任務排入佇列裡按順序執行。

有些時候，我們需要使用者輸入的表單資訊帶有固定格式，如手機號碼、銀行卡號，閘道器位址等，如下圖:

如果你使用的是element的input元件，那麼呼叫change事件是不太可行的，必須另外觸發原生的input事件，並且要做到自動補充』-'效果，需要使用正規表示式或自己建立乙個對映關係來做驗證。

同時，手動輸入和複製貼上是觸發不同事件的，但是vue本身元件是不支援的，需要用.native修飾符來觸發@paste貼上事件:

v-model
="form.gw_id"
maxlength
="23"
v-on:input
="formatgw_id($event)"
@paste.native
="handlepaste($event)"
placeholder
="23-7c-06-ff-fe-2b-0c-b0"
>
el-input
>

具體如何進行自動補充和判斷是貼上文白還是input手輸文字，則需要我們自己定義乙個變數來監察狀態，具體**邏輯如下:

// 判斷閘道器id的橫槓位置與字母
judgegw_id
(param, mode)
else}if
(mode ===
"f")
else}}
,// 貼上事件
handlepaste
(val)if(
!this
.judgegw_id
(record,
'f'))}
)let result = arr.
slice(0
,23).
join(''
);this
.gwid_paste = result.
touppercase()
},// 自動校正閘道器id內容
formatgw_id
(val)
else
else}}
let newgw_id = result.
join(""
);vue.
set(
this
.form,
"gw_id"
, newgw_id.
touppercase()
);}else
},

需要注意的是，paste事件改變了input框的值，因此凡是貼上都會觸發input事件，所以必須要有乙個變數來表示狀態，告訴input事件此時是輸入的文字還是貼上的文字，如果是貼上的話就不用執行自己的邏輯了，直接拿paste的值作為結果。同時也別想著在paste事件裡直接賦值給檢視，因為肯定會被input事件的結果覆蓋掉，所以最好的做法是處理完文字之後，用個變數儲存，然後傳給input事件。

關於Vue開發中的一些踩坑記錄三

vue開發元件時踩過的一些坑

Vue的踩坑記錄1

關於PHP錯誤日誌踩過的一些坑

關於Vue開發中的一些踩坑記錄 三

vue開發元件時踩過的一些坑

Vue的踩坑記錄1

關於PHP錯誤日誌踩過的一些坑

相關推薦

關於Vue開發中的一些踩坑記錄三