30、地址填写（姓名、电话、省市区）

前言：上章我们借助vant的AddressList列表组件实现了地址列表页面的快速编写，同样，这一章节我们还是借助vant组件，快速完成新增地址的编辑功能页面。 Github：https://github.com/Ewall1106/mall 首先我们来看看地址编辑页面的效果：

地址编辑页面效果展示

1、新建地址编辑页面

（1）跟以前一样，我们复制一份我们已经初始化好了的test.vue页面重命名为addressEdit.vue页面开始初始化。

    关于文件名字规范这里提一句，大家可以参考一下我写的关于vue的命名规范

（2）路由添加，老规矩还是去router的index.js中添加addressEdit路由

（3）为地址列表address.vue添加路由跳转到该页面。

截图来自vant官网

根据文档中的描述，我们可以知道为add事件添加路由跳转：

在address.vue页面中添加跳转事件

至此，addressEdit.vue页面的初始化工作基本就完成了。

2、引入vant地址编辑组件

（1）首先在main.js中引入AddressEdit 地址编辑并注册：

import { AddressEdit } from 'vant';
Vue.use(AddressEdit);

（2）然后我们去页面中使用复制一份官网中的示例代码到addressEdit.vue页面中，稍作一些修改：

addressEdit.vue

3、省市区地址选择

（1）对于上面的areaList对象我们需要赋予一份完整的省市区列表数据

• 大家可以看看vant的Area 省市区选择的介绍；
• 而vant也为我们提供了这份省市区列表数据。

（2）于是我们可以下载这份文件，然后在assets资源文件夹中新建一个area.js用于存放这份数据并在页面中引入。

在页面中新建area.js

引入area.js

这样，我们就实现了省市区的选择。

省市区的选择

4、优化及小结

• 最后，我们需要还是需要改变下按钮的颜色，还是进入我们上一章创建的override.css中改变类名的颜色。

override.css

• 到这里，我们地址填写的基本功能就已经实现了，是不是很快，当然你也可以自己写，但是我觉得作为一名程序员，应该要把更多的精力放在页面的逻辑或者是前后端整个项目的逻辑上，至于页面交互等效果，什么解决方式越快就用什么，所以，我觉得使用组件库来完成我们的需求是一个很好的"捷径"。

参考学习：

关于vue的命名规范

AddressEdit 地址编辑

Area 省市区选择

省市区列表数据