HTML使用vant的an-address-edit

1，引入vue 和vant

<link rel="stylesheet" href="https://cdn.suoluomei.com/common/js2.0/npm/vant@2.2/lib/index.css">
<script src="http://cdn.suoluomei.com/common/js2.0/vue/v2.5.16/vue.js"></script>
<script src="https://cdn.suoluomei.com/common/js2.0/npm/vant@2.2/lib/vant.min.js"></script>  

2，把地址文件引入

<script src="http://sucai.suoluomei.cn/sucai_zs/file/20200422174017-area.js"></script>

文件截图：

你也可以去vant官网下载该js

html

 <div class="add_addsserss" @click='showArea=true'> 新增地址</div>
   <van-popup  position="bottom"  v-model="showArea">
            <van-address-edit :area-list="areaList"  
                :search-result="searchResult" :area-columns-placeholder="['请选择', '请选择', '请选择']" @save="onSave"
                @delete="onDelete"  />
   </van-popup>

js

data: {
       areaList: area,
       showArea: false,
        },
        methods:{
         onSave(value) {
              console.log('dddddddd',value)
              this.showArea=false
            },
            onDelete() {
              
            },
}

当然你可以按照你的需求选择增加你需要的，具体你可以观看它的API