29、地址列表

ok，这章讲下地址列表，我们使用有vant组件来快速完成这部分的功能。
Github：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 书写规范
  如何看待 CSS 中 BEM 的命名方式？

（3）ok，到这里我们就要改变这个组件的样式，怎么做？

• 首先，我们新建一个overiride.css文件，专门用于覆盖组件的样式；
• 然后，我们F12打开开发者工具，看看这个AddressList.vue的√图标类名；

F12开发者工具

• 同理，改变底部button颜色为我们的主体色也是如此：

override.css的内容

• 然后我们在main.js中引入这个css文件

main.js中引入override.css

4、小结

这就是我们的地址列表了基本结构了，借助vant的AddressList组件，我们可以快速的完成地址列表的功能；其次就是改变主题的颜色了，你也可以自己去官网看看其他的方法，也可以自己定制一套，大家感兴趣就自己去折腾了。

参考学习
有赞Vant组件库的引入
AddressList地址列表
CSS BEM 书写规范
如何看待 CSS 中 BEM 的命名方式？