Mint-ui如何实现地址三级联动

1. 淘宝的添加收获地址页面
2. 需要哪些组件
3. 代码实现

最近在学习Mint-ui，想实现仿淘宝的添加收获地址的功能。在网上寻找类似样例，发现无非是仅有一个地址的三级联动效果，未结合弹出框mt-popup，且大多数没有详细的注释。自己实现后来分享一下~

1. 淘宝的添加收获地址页面

我们想要实现的效果是在点击选择地区的时候，从底部显示弹出框，弹出框中可以实现地址的三级联动

2. 需要哪些组件

Cell组件：实现单元格，其语法结构为：

<mt-cell title="标题" label="备注信息" :value="内容" isLink to="URL地址"></mt-cell>

isLink属性用于控制单元格是否为可点击的链接，布尔类型，默认为true

Popup组件：实现弹出框，其语法结构为：

<mt-popup v-model="变量名称" position="弹出框位置" ></mt-popup>

v-model所绑定的变量用于控制是否显示弹出框，布尔类型
position属性用于控制弹出层的位置（top | right | bottom | left）

Picker组件：用于实现选择器，其语法结构为：

<mt-picker :slots='slots' @change='handler'></mt-picker>

slots:[{values:[]},{divider: 是否显示分隔符content: 分隔符显示的文本},{values:[]}...
]

1. slots：绑定到 slots 属性的数组由对象组成
2. change事件：传入 slots，当被选中的值发生变化时触发 change 事件。change 事件有两个参数，分别为当前 picker 的 vue 实例和各 slot 被选中的值组成的数组
3. 在 change 事件中，可以使用注册到 picker 实例上的一些方法，但在我们要实现的页面功能中只会用到如下方法：* setSlotValues(index, values)：设定给定 slot 的备选值数组 *

3. 代码实现

下列代码中引入的pca.json文件为全国省市区的json文档
记得引入mint-ui~

<template><div><mt-header title="添加收货地址"><mt-button icon="back" slot="left"></mt-button></mt-header><mt-field type="text" label="收件人"  placeholder="名字"></mt-field><mt-field type="text" label="手机号码" placeholder="手机号"></mt-field><mt-cell title="选择地区" label="省、市、区" :value="address" isLink @click.native="show_picker"><!-- 为什么要用@click.native原生事件呢？？？因为我们给mt-cell添加了isLink属性，这个单元格已经是一个可点击的链接了，所以我们需要通过原生的点击事件来控制弹出框的显示隐藏 --></mt-cell><mt-field type="text" label="详细地址" placeholder="小区楼栋/乡村名称"></mt-field><mt-popup v-model="showPicker" position="bottom" id="pop"><mt-picker :slots='slots' @change='changeValue'></mt-picker></mt-popup><mt-button size="large" type="primary">保存</mt-button></div>
</template>
<style>
/* 控制弹出框的宽度为100% */
#pop{width: 100%;
}
</style>
<script>
import Address from '../assets/pca.json'
export default {data(){return{showPicker: false,    //控制弹出框的显示隐藏address: '',province: '北京市',city: '市辖区',county: '东城区',slots:[{// 省values:[],className: 'slot'},{divider: true,content: '-',},{// 市values:[],className: 'slot'},{divider: true,content: '-',},{// 县/区values:[],className: 'slot'}]}},methods: {//value[0]:省//value[1]:市//value[2]:区changeValue(picker,values){// 一旦省份有值，就应该响应设置市区的值if(values[0]){this.province=values[0];//设定给定 slot 的 备选值 数组中的值为我们拿到的所有市picker.setSlotValues(1,Object.keys(Address[this.province]))}//一旦省份和市区都有值，就响应对应的县或区的值if(values[0] && values[1]){this.city=values[1]//设定给定 slot 的备选值数组 为我们拿到的所有县picker.setSlotValues(2,Address[this.province][this.city])this.county = values[2]}this.address = this.province+'-'+this.city+'-'+this.county},show_picker(){this.showPicker=true}},created(){//初始化省// Address是一个对象，我们要拿到省份，就要通过Object.keys()方法，此方法可以返回一个由给定对象自身可枚举的属性组成的数组// console.log(Address)// console.log(Object.keys(Address))this.slots[0].values = Object.keys(Address)//初始化市(为什么只能显示市辖区？？？因为初始化的时候省份是北京市，其市区只有市辖区，created函数只执行一遍，不会响应变化，要想让二级市区也变化，应该在changeValue里面实现相应的操作)//console.log(Object.keys(Address[this.province]))this.slots[2].values = Object.keys(Address[this.province])//初始化县\区this.slots[4].values = Address[this.province][this.city]//console.log(Address[this.province][this.city])}
}
</script>
<style>
.slot{font-size: 16px !important;flex: 1;
}
</style>

pca文档链接：https://github.com/WangZiqi2068/ProvinceCityCounty.git

vue-cli项目中使用Mint-ui中的mt-cell、mt-popup、mt-picker实现仿淘宝添加收货地址页面（地址三级联动附全国省市区json文档）相关推荐

淘宝API商家自用型应用程序全部源代码和详细的帮助文档(1元有偿提供)
我曾写过一篇C#调用淘宝API流程整理,大体介绍过淘宝API的使用流程.如果你对淘宝API感兴趣,又找不到好的学习资料和实例程序作为参考,可以选择购买此教程.为什么选择有偿提供?一是作为对自己劳动的回 ...
Mint UI组件快速上手，在项目中使用mint UI
一.Mint UI是什么 Mint UI 是饿了么团队开源的一款基于 Vue.js 的移动端组件库 Bootstrap「它是 Twitter 开源的一个 css/html 工具包」二.引入 Mint ...
Vue项目9：Vue Cli项目使用echarts可视化
Vue Cli项目使用echarts可视化有两种方式:一.直接引入echarts 二.使用vue-ehcarts. 一.直接引入echarts 1.创建Vue Cli项目进入cmd命令行,输入如 ...
vue cli项目升级--vue cli3升级到vue cli4
原文网址:vue cli项目升级--vue cli3升级到vue cli4_IT利刃出鞘的博客-CSDN博客简介说明本文介绍如何升级vue项目的vue cli版本. 官方网址 https://c ...
vue cli 项目在打包时候报错 API fatal error handler returned after process out of memory
问题描述 vue cli 项目在打包时候报错:API fatal error handler returned after process out of memory. 问题分析从给出的提示可以看出 ...
Vue Cli 项目结构简述
webnode_modules --Vue Cli 项目以来的js模块全放到这里public --存放静态资源存放自己的js cssfavicon.ico -- 浏览器小图标index.html - ...
VUE—下载安装并使用mint ui（图文详情）
VUE-下载安装并使用mint ui 第一步:输入指令 mac在前面加上sudo cnpm i mint-ui -S 第二步:在main.js输入 import MintUI from 'mint-u ...
如何将PDF中的A3页面裁剪为2个A4的PDF文档？
有时我们打开一些PDF文档时发现里面的内容是A3纸张大小的双页模式,查看起来虽然很方便,但是如果需要打印无法直接适用常用的A4纸张,那么如何将这样的文档切分成常用的A4版面呢? 首先用极速PDF编辑器 ...
仿淘宝中的评价晒单中选择图片可以预览，添加，删除
前一篇文章写了如何把input="file"的默认样式改为自己想要的样式所以这篇是在这个的基础上写的,也就是说改变成了自己想要的样式之后,点击选择图片,可以放在一个div中预览,同 ...
DOM--操作元素案例：分时显示不同的图片以及问候语；仿淘宝关闭标签案例；隐藏显示文本框内容；仿新浪注册页面中密码长度的判定
分时显示不同的图片以及问候语分析: 根据不同的时间来判断,所以需要获取到系统的时间. 利用分支语言来设置不同的图片需要更换不同的图片,因此需要操作img的元素src 需要一个div来显示不同问候语 ...

vue-cli项目中使用Mint-ui中的mt-cell、mt-popup、mt-picker实现仿淘宝添加收货地址页面（地址三级联动附全国省市区json文档）

Mint-ui如何实现地址三级联动

1. 淘宝的添加收获地址页面

2. 需要哪些组件

3. 代码实现

vue-cli项目中使用Mint-ui中的mt-cell、mt-popup、mt-picker实现仿淘宝添加收货地址页面（地址三级联动附全国省市区json文档）相关推荐

最新文章

热门文章

vue-cli项目中使用Mint-ui中的mt-cell、mt-popup、mt-picker实现仿淘宝添加收货地址页面（地址三级联动 附全国省市区json文档）

Mint-ui如何实现地址三级联动

1. 淘宝的添加收获地址页面

2. 需要哪些组件

3. 代码实现

vue-cli项目中使用Mint-ui中的mt-cell、mt-popup、mt-picker实现仿淘宝添加收货地址页面（地址三级联动 附全国省市区json文档）相关推荐

最新文章

热门文章

vue-cli项目中使用Mint-ui中的mt-cell、mt-popup、mt-picker实现仿淘宝添加收货地址页面（地址三级联动附全国省市区json文档）

vue-cli项目中使用Mint-ui中的mt-cell、mt-popup、mt-picker实现仿淘宝添加收货地址页面（地址三级联动附全国省市区json文档）相关推荐