基於vue的H5頁面物流信息撥打電話功能

最近開發了一個H5展現物流信息的需求，對api提供的接口數據進行展現，可是要求物流信息中的電話號要實現點擊撥打電話的功能，最終實現的效果是這樣的

而咱們接口提供的數據格式是這樣的：

雖然移動端有些webkit內核的webview能夠識別連續的數字爲電話號，可是顯然不是合理的實現方案。

H5想要實現撥打電話功能，是要採用 <a href="tel: 1688888888">撥打電話</a> 的形式，來調起手機的撥號鍵盤的，因此想要實現撥打電話功能，就要將代碼改形成這種形式。

考慮過讓後端把電話號做爲單獨的字段返回，可是電話號出現的位置也是不固定的，處理起來仍舊棘手。最後採用了一個我認爲是標準的解決思路：

1. 先對數據進行處理，遍歷context,利用正則識別到數據中的電話號
2. 對電話號進行替換，替換爲<a href="tel: 1688888888">1688888888</a>
3. 將文本做爲html渲染到頁面上，這一點能夠利用vue的 v-html指令

接下來，show you the code

html

js

固然，我對正則掌握的不多，在數據處理方面確定有更好的方式，這個須要接下來花時間系統的學習一下強大的正則表達式，這篇文章主要是記錄一下我本身的實現過程，固然若是能幫到別人就更好了。