使用vant中的地址编辑组件
1.首先先引入组件名称,因为我是在vue的项目中进行使用的,每个人的使用情况不同但是总归都是要进行引入的import Vue from 'vue';import { AddressEdit } from 'vant';Vue.use(AddressEdit);2.在地址栏编辑组件提供的areaList数据,点击进去,是有赞团队的vant库,里面存储了地址信息,把它下载过来,并将其中...
·
1.首先先引入组件名称,因为我是在vue的项目中进行使用的,每个人的使用情况不同但是总归都是要进行引入的
import Vue from 'vue';
import { AddressEdit } from 'vant';
Vue.use(AddressEdit);
2.在地址栏编辑组件提供的areaList数据,点击进去,是有赞团队的vant库,里面存储了地址信息,把它下载过来,并将其中的area.js文件粘贴到你的文件夹中,在你的使用的.vue文件中进行引入
<van-address-edit
:area-list="areaList"
show-postal
show-delete
show-set-default
show-search-result
:search-result="searchResult"
:area-columns-placeholder="['请选择', '请选择', '请选择']"
@save="onSave"
/>
</div>
</template>
<script>
import areaData from './area.js' 这个地方就是你引入的area文件的地址
3.获取地址栏表单的详细内容,
地址栏表单中有一个保存按钮,在点击保存按钮时,会将表单内容其实表单的最终内容也就是我们所说的onSave事件中的e,就是我们想要的表单内容,
// 点击保存按钮
onSave(content){
console.log(content)
},
打印出来的content就是我们想要的表单的最终结果
因为我也是刚使用vant框架创建自己的手机端项目,其他的使用的注意事项,会慢慢更新,我会把我在其中遇到的一些问题记录下来,如果有哪些不对的地方,希望大神能够多加指点,希望能够得到更多大家的帮助。感谢
更多推荐
已为社区贡献1条内容
所有评论(0)