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

最后

以上就是微笑雪碧为你收集整理的HTML使用vant的an-address-edit的全部内容，希望文章能够帮你解决HTML使用vant的an-address-edit所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。