min-ui 省市区三级联动

直接上代码

html

  <template><div class="three-level-address" id="three_level_address"><div class="region-div"><span class="input-icon"><i class="iconfont icon-dizhi"></i></span><input type="text" placeholder="请选择三级地址" v-model="region" maxlength="80" readonly="readonly" @click="showAddressPicker" /><mt-popup v-model="regionVisible" position="bottom" class="region-popup"><mt-picker :slots="myAddressSlots" valueKey="name" :visibleItemCount   ="5" @change="addressChange" :itemHeight="40"></mt-picker></mt-popup><div class="data-show-div"><p><span>三级地址：</span>{{region}}</p><p><span>省：</span>{{province}}</p><p><span>市：</span>{{city}}</p><p><span>县：</span>{{county}}</p><p><span>省级代码：</span>{{provinceCode}}</p><p><span>市级代码：</span>{{cityCode}}</p><p><span>县级代码：</span>{{countyCode}}</p></div></div></div>
</template>

<script>import Vue from 'vue'import { Popup } from 'mint-ui';Vue.component(Popup.name, Popup);import { Picker } from 'mint-ui';Vue.component(Picker.name, Picker);//引入省市区数据json文件import threeLevelAddress from '@/assets/json/threeLevelAddress.json'export default {data(){return{region:'',//三级地址province:'',//省city:'',//市county:'',//县provinceCode:'',//省级代码cityCode:'', //市级代码countyCode:'',//县级代码regionVisible:false,//弹出框是否可见regionInit:false,//禁止地区选择器自动初始化，picker组件会默认进行初始化，导致一进入页面就会默认选中一个初始3级地址//picker组件插槽myAddressSlots: [//省{flex: 1,values: this.getProvinceArr(), //省份数组className: 'slot1',textAlign: 'center'},//分隔符{divider: true,content: '',className: 'slot2'},//市{flex: 1,values: this.getCityArr("北京市"),className: 'slot3',textAlign: 'center'},{divider: true,content: '',className: 'slot4'},//县{flex: 1,values: this.getCountyArr("北京市","北京市"),className: 'slot5',textAlign: 'center'}],}},methods:{//打开地址选择器showAddressPicker(){this.regionVisible = true;},//picker组件的change事件，进行取值赋值addressChange(picker, values){console.log(picker);console.table(values);if (this.regionInit){//取值并赋值this.region = values[0]["name"] + values[1]["name"] + values[2]["name"];this.province = values[0]["name"];this.city = values[1]["name"];this.county = values[2]["name"];this.provinceCode = values[0]["code"];this.cityCode = values[1]["code"];this.countyCode = values[2]["code"];console.log(picker.getSlotValue(0));console.table(picker.getSlotValues(0));console.table(picker.getValues());//给市、县赋值picker.setSlotValues(1, this.getCityArr(values[0]["name"]));picker.setSlotValues(2, this.getCountyArr(values[0]["name"], values[1]["name"]));}else {this.regionInit = true;}},//遍历json，返回省级对象数组getProvinceArr() {let provinceArr = [];threeLevelAddress.forEach(function (item) {let obj = {};obj.name = item.name;obj.code = item.code;provinceArr.push(obj);});return provinceArr;},//遍历json，返回市级对象数组getCityArr(province) {// console.log("省：" + province);let cityArr = [];threeLevelAddress.forEach(function (item) {if (item.name === province) {item.children.forEach(function (args) {let obj = {};obj.name = args.name;obj.code = args.code;cityArr.push(obj);});}});return cityArr;},//遍历json，返回县级对象数组getCountyArr(province,city){let countyArr = [];threeLevelAddress.forEach(function(item){if (item.name === province){item.children.forEach(function (args) {if (args.name === city){args.children.forEach(function (param) {let obj = {};obj.name=param.name;obj.code=param.code;countyArr.push(obj);})}});}});// console.log(countyArr);return countyArr;},},mounted(){//初始化设备高度为设备高度height 100%let orderHeight = window.innerHeight;document.getElementById("three_level_address").style.height = orderHeight + 'px';// this.myAddressSlots[0].values = threeLevelAddress;// this.myAddressSlots[2].values = threeLevelAddress[0].children;// this.myAddressSlots[4].values = threeLevelAddress[0].children[0].children;}}</script>

css

<style scoped>*{padding: 0;margin: 0;}ul li{list-style: none;line-height: 1rem;font-size: .6rem;}.banner img{width:100%;}.container h1{color:rgba(51,51,51,1);font-size: .7rem;font-weight: normal;padding-left:1rem;line-height: 1.2rem;margin-top: .5rem;}.tab{overflow: hidden;width: 8.4rem;margin:1.5rem auto 1rem;}.tab li{width:4rem;height:1.5rem;float:left;text-align: center;border-radius:4px 0px 0px 4px;border:1px solid rgba(86,144,249,1);color:rgba(86,144,249,1);font-size: .7rem;line-height: 1.5rem;}
.tab li:nth-child(2){border-radius:0px 4px 4px 0px;}
.tab li.active{color:#fff;background:rgba(86,144,249,1);}
.line{background: #F7F9FB;height:.5rem;}
.upload{position: relative;padding-bottom: 2rem;}
.upload .add{width: 4.3rem;display: block;margin:2rem auto 1rem;}
.upload p{text-align: center;color:#DCDCDC;font-size: .7rem;}
.upload .tip{position: absolute;right:0;top:-.5rem;font-size: .7rem;overflow: hidden;}
.upload .tip span{display: block;color:#5690F9;padding:.5rem 1rem 1rem 1rem;position: relative;}
.upload .tip span:nth-child(2){color:#DD1E13;}
.upload h4{font-size: .75rem;text-align: center;font-weight: normal;margin-bottom: 1rem;}
.upload .receipt{padding:0 1rem;line-height: 1.2rem;color:#666666;text-align: left;}
.upload h4 span{position: relative;display: inline-block;top:-10px;left:8px;}
.jiant{position: absolute;left: 0px;top: 0px;width: 6px;height: 6px;border-top: 2px solid #999;border-right: 2px solid #999;transform: rotate(135deg);
}
.upload h4 span.active .jiant{transform: rotate(315deg);top:2px;}
.verCode button{padding:.3rem .8rem;background: #5690F9;color:#fff;font-size: .7rem;border-radius: .2rem;margin-left: 1rem;outline: none;border:none;}.upload .img-avatar{border:2px solid #acc8fb;width:40%;display: block;margin:2rem auto 1rem;}
.upload .addUp .uppic{width: 4.3rem;overflow: hidden;position: absolute;top:0;left:50%;margin-left:-2.15rem;height:4.3rem;opacity: 0; }
.upload .tip span .uppic{position: absolute;top:0;left:0;overflow: hidden;z-index: 11;opacity: 0;}
.verCode button.getYzmCode{background: #8bb1f6;}
.verCode button.getYzm{background: #5690F9;}
.invoiceSubmit .citycode .ci{position: relative;right:1rem;top:-6px;}.three-level-address{width: 100%;text-align: left;background: black;color: #ffffff;}.region-div{width: 100%;padding-top: 1rem;}.input-icon{display: inline-block;vertical-align: middle;}.input-icon i{font-size: 2rem;}.region-div input{width: 70%;font-size: 1rem;line-height: 2rem;border-radius: 5px;outline: none;text-align: right;color: black;}.region-popup{width: 100%;}.data-show-div{margin-top: 1rem;margin-left: 1rem;color: #45C473;}.data-show-div span{color: #ffffff;font-size: 0.8rem;}
</style>

其中三级联动json文件，部分代码

[{"code": "110000","name": "北京市","children": [{"code": "110100","name": "北京市","children": [{"code": "110101","name": "东城区"},{"code": "110102","name": "西城区"},{"code": "110105","name": "朝阳区"},{"code": "110106","name": "丰台区"},{"code": "110107","name": "石景山区"},{"code": "110108","name": "海淀区"},{"code": "110109","name": "门头沟区"},{"code": "110111","name": "房山区"},{"code": "110112","name": "通州区"},{"code": "110113","name": "顺义区"},{"code": "110114","name": "昌平区"},{"code": "110115","name": "大兴区"},{"code": "110116","name": "怀柔区"},{"code": "110117","name": "平谷区"},{"code": "110128","name": "密云县"},{"code": "110129","name": "延庆县"}]}]},{"code": "120000","name": "天津市","children": [{"code": "120100","name": "天津市","children": [{"code": "120101","name": "和平区"},{"code": "120102","name": "河东区"},{"code": "120103","name": "河西区"},{"code": "120104","name": "南开区"},{"code": "120105","name": "河北区"},{"code": "120106","name": "红桥区"},{"code": "120110","name": "东丽区"},{"code": "120111","name": "西青区"},{"code": "120112","name": "津南区"},{"code": "120113","name": "北辰区"},{"code": "120114","name": "武清区"},{"code": "120115","name": "宝坻区"},{"code": "120116","name": "滨海新区"},{"code": "120121","name": "宁河县"},{"code": "120123","name": "静海县"},{"code": "120125","name": "蓟县"}]}]}]

min-ui 省市区三级联动相关推荐

与element ui结合省市区三级联动
与element ui结合省市区三级联动首先需要的肯定是数据了,自己搜索了一下,无外乎就是json数据,这就到了第一个问题, 如果你有数据只是不知道怎么样引入在vue中如何引入json文件首先你 ...
jQuery省市区三级联动插件
体验效果:http://hovertree.com/texiao/bootstrap/4/ 支持PC和手机移动端. 手机扫描二维码体验效果: 代码如下: <!DOCTYPE html> & ...
支付宝小程序使用uView实现省市区三级联动的后续
上一篇讲的是使用uView2.0实现省市区三级联动(CSDN),最后无疾而终这次我打算一雪前耻,使用uVIew1.0版本. 很好支持支付宝小程序,然后我按照官网的步骤一顿操作.. hbuilderX ...
一款超好的省市区三级联动插件citypicher的使用（数据分从数据库获取或从js文件获取）
有兴趣的小伙伴,可以继续阅读小编下一篇博客微服务概述添加链接描述一篇对SpringCloud的介绍添加链接描述 SpringCloud核心组件详述添加链接描述一篇对MySQL语句执行顺序的介绍添 ...
2018最新版省市区三级联动下拉框+所有源代码以及数据库
2018年国家统计局最新数据,JSP+Servlet+Dao实现省市区三级联动下拉框的效果 DropdownDAO.java -–Dao层 package com;import java.sql.Co ...
jquery实现省市区三级联动
jquery实现省市区三级联动最近项目需要用到关于省市区三级联动下拉选择的功能,于是乎网上搜了一些做法,觉得有一些只是给出了小的案例,却很难找到详细的省.市.区的具体数据(其实,用baidu搜索就是 ...
前端学习笔记：省市区三级联动
前端学习笔记:省市区三级联动一.数据库 sql表是自关联的表. 表名:province_city_district 字段: id:区域自身的id pid:区域的父级id name:区域自身的名字二 ...
Select下拉框实现中国省市区三级联动
JS Select下拉框实现中国省市区三级联动联动效果以内蒙古自治区为例 distpicker.js资源获取 https://pan.baidu.com/s/1S17KyRmPfz6WYaYUV1 ...
JQuery+ajax实现省市区三级联动（附：补充代码内容）
省市区三级联动的实现(附:补充代码) 有了下面的代码,别忘了导入需要的jar包,用到的jar包到网上都能找到. 如果觉得不错,就点个赞!谢谢观望!! ## 1.效果图 ## 2.jsp页面,nov ...
省市区三级联动，获取地区编号，JSON格式
html部分: <!DOCTYPE html> <html lang="en"><head><meta charset="UTF ...

min-ui 省市区三级联动

min-ui 省市区三级联动相关推荐

最新文章

热门文章