29、地址列表
摘要：
ok，這章講下地址列表，我們使用有vant元件來快速完成這部分的功能。
Github： https://github.com/Ewall1106/mall
1、寫在開頭
關於vant元件的安裝及引入的請移步：有贊Vant元件庫的引入；
對於地址列表我們使用 ...
ok，這章講下地址列表，我們使用有vant元件來快速完成這部分的功能。
Github： ofollow,noindex">https://github.com/Ewall1106/mall
1、寫在開頭
- 關於vant元件的安裝及引入的請移步：有贊Vant元件庫的引入；
- 對於地址列表我們使用 AddressList地址列表 元件，大家可以去官網看看這個元件的基礎用法；
- 先看看最終的一個效果：
地址列表
2、使用AddressList
（1）首先我們在 main.js 中引入並註冊這個元件。
main.js中註冊及引入
（2）然後我們再去頁面中使用這個元件
- 我們把官網中的例項程式碼複製到我們的
address.vue檔案中，修改部分API引數：
使用Addresslist元件
- 就這麼簡單，我們看看頁面的初步呈現效果 ：
地址列表初步呈現效果
3、改變顏色
（1）關於顏色的改變前面在做輪播圖的時候我們已經處理過，當時我們的解決方法是用在開發中工具中找到它的class類名，然後我們使用vue的穿透選擇器改變這個類名的基本樣式，從而實現樣式的覆蓋。
（2）這裡我們說另一種更好方法
- 我們去vant官網 定製主題 中可以看到，官網是這樣說的：
Vant提供了一套預設主題，CSS 命名採用 BEM 的風格，方便使用者覆蓋樣式。
-
那麼，什麼是BEM？
其實這個我理解的也不是很透徹，不過大概就是一種設計思想，將css的命名進行了規範，然後就是抽離了css樣式檔案，一個樣式對應一個html塊，我這裡丟兩篇文章，大家可以看看：
如何看待 CSS 中 BEM 的命名方式？
（3）ok，到這裡我們就要改變這個元件的樣式，怎麼做？
- 首先，我們新建一個
overiride.css檔案，專門用於覆蓋元件的樣式； - 然後，我們F12開啟開發者工具，看看這個
AddressList.vue的√圖示類名；
F12開發者工具
- 同理，改變底部button顏色為我們的主體色也是如此：
override.css的內容
- 然後我們在
main.js中引入這個css檔案
main.js中引入override.css
4、小結
這就是我們的地址列表了基本結構了，藉助vant的AddressList元件，我們可以快速的完成地址列表的功能；其次就是改變主題的顏色了，你也可以自己去官網看看其他的方法，也可以自己定製一套，大家感興趣就自己去折騰了。