AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

vue省市区三级联动-封装集成

2022-05-26 504
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
本文涉及的产品
文本翻译，文本翻译 100万字符
图片翻译，图片翻译 100张
语种识别，语种识别 100万字符
简介： 最近在学习开发H5产品，想用【mint-ui】的Picker和Popup组件去创建一个地址选择器。发现mint-ui官网只有一个简单的示例，要满足省/市/区三级联动的需求还需要做很多事情，也找了很多相关文档也没有一个比较系统的说明或demo。为此，在这里做了一个比较系统总结，上传一个实现的demo，方便以后使用。

目录


前言

一、构建项目

二、引入mint-ui

三、下载省/市/区的json数据

四、省/市/区联动

1、获取地址文件数据

2、选择器组件化

3、调用组件

四、demo下载


前言


最近在学习开发H5产品，想用【mint-ui】的Picker和Popup组件去创建一个地址选择器。发现mint-ui官网只有一个简单的示例，要满足省/市/区三级联动的需求还需要做很多事情，也找了很多相关文档也没有一个比较系统的说明或demo。为此，在这里做了一个比较系统总结，上传一个实现的demo，方便以后使用。


一、构建项目


在写demo前，首先需要构建一个空项目，并做好局域网配置，还不懂的可以先看【nuxt安装与局域网配置】这片文档，里面有完整的实现方法。


二、引入mint-ui


1、在terminal上安装mint-ui


npm install mint-ui -save


20181101195137486.png

2、注册


在【plugins】文件夹中创建【mint-ui.js】文件，并在改文件注册mint-ui:


import Vue from 'vue'
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI


见下图：

20181101195157442.png


3、配置


在【nuxt.config.js】中作如下配置：


 

css: [
    'mint-ui/lib/style.css',
  ],
  plugins: [
    {src: '~plugins/mint-ui'},
  ],


见下图：

20181101195801726.png


三、下载省/市/区的json数据


根据中华人民共和国行政区划分：省级（省份直辖市自治区）、 地级（城市）、 县级（区县）、 乡级（乡镇街道）、 村级（村委会居委会） ，可分省市区镇村三级四级五级联动，其地址数据可见

GitHub：https://github.com/modood/Administrative-divisions-of-China


这里我只获取省/市/区三个联动等级的地址文件,并将其导入【static.stRegion】的文件夹中：20181101201526902.png


四、省/市/区联动


1、获取地址文件数据


以上是准备阶段，接下来才进入主题。这里先实现获取省市区的数据，首先创建一个叫【zmRegion.js】的文件类：

20181101201828793.png


将实现方法写在【zmRegion.js】的文件中：


//引入省市区数据json文件
import provinces from '../../static/stcRegion/provinces';
import cities from '../../static/stcRegion/cities';
import areas from '../../static/stcRegion/areas';
export function zmGetProvincesArr() {
  let provinceArr = [];
  provinces.forEach(function (item) {
    let obj = {};
    obj.name = item.name;
    obj.code = item.code;
    provinceArr.push(obj);
  });
  return provinceArr;
}
export function zmGetCitiesArr(provinceCode) {
  console.log("省：" + provinceCode);
  if (!provinceCode){
    provinceCode = '11'
  }
  let cityArr = [];
  cities.forEach(function (item) {
    if (item.provinceCode == provinceCode) {
      let obj = {};
      obj.name = item.name;
      obj.code = item.code;
      obj.provinceCode = item.provinceCode;
      cityArr.push(obj);
    }
  });
  return cityArr;
}
export function zmGetAreaArr(cityCode) {
  console.log("市：" + cityCode);
  if (!cityCode){
    cityCode = '1101'
  }
  let areaArr = [];
  areas.forEach(function (item) {
    if (item.cityCode == cityCode) {
      let obj = {};
      obj.name = item.name;
      obj.code = item.code;
      obj.provinceCode = item.provinceCode;
      obj.cityCode = item.cityCode;
      areaArr.push(obj);
    }
  });
  return areaArr;
}


2、选择器组件化


获取数据后，就要想办法将其显示在页面上，考虑到地址选择器是一个比较独立的功能，将其写成一个组件，方便使用的时候直接引入。这里我在【components.compntTools】的文件夹中，创建了一个【addressPopupTool.vue】的文件：

20181101202506300.png


其实现方法如下：


<template>
  <div class="content">
    <label class="title">{{ region }}</label>
    <mt-picker :slots="myAddressSlots" valueKey="name" :visibleItemCount="5" @change="addressChange"
               :itemHeight="40"></mt-picker>
  </div>
</template>
<script>
  //引入省/市/区数据json文件
  import { zmGetProvincesArr,zmGetCitiesArr,zmGetAreaArr } from '../../plugins/jsTools/zmRegion'
  export default {
    name: "addressPopupTool",
    data() {
      return {
        region: '',//三级地址
        province: '',//省
        city: '',//市
        area: '',//县
        provinceCode: '',//省级代码
        cityCode: '', //市级代码
        areaCode: '',//县级代码
        regionInit: false,//禁止地区选择器自动初始化，picker组件会默认进行初始化，导致一进入页面就会默认选中一个初始3级地址
        myAddressSlots: [//省
          {
            flex: 1,
            values: zmGetProvincesArr(), //省份数组
            className: 'slot1',
            textAlign: 'center'
          },
          //分隔符
          {
            divider: true,
            content: '',
            className: 'slot2'
          },
          //市
          {
            flex: 1,
            values: zmGetCitiesArr('11'),
            className: 'slot3',
            textAlign: 'center'
          },
          {
            divider: true,
            content: '',
            className: 'slot4'
          },
          //县
          {
            flex: 1,
            values: zmGetAreaArr('1101'),
            className: 'slot5',
            textAlign: 'center'
          }
        ],
      }
    },
    methods: {
      addressChange(picker, values) {
        // console.table(picker);
        // console.table(values);
        if (this.regionInit) {
          //取值并赋值
          if (values[0] && values[1]  && values[2]) {
            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("省:")
            // console.table(picker.getSlotValues(0));
            // console.log("省/市/区:")
            // console.table(picker.getValues());
            //给市、县赋值
            picker.setSlotValues(1, zmGetCitiesArr(values[0]["code"]));
            picker.setSlotValues(2, zmGetAreaArr(values[1]["code"]));
            this.$emit("getRegion", this.region)
          }else {
            console.log("数据不全");
          }
        } else {
          this.regionInit = true;
        }
      },
    },
  }
</script>
<style scoped>
  div.content {
    text-align: center;
  }
  label.title {
    margin-left: 10px;
    margin-right: 10px;
    width: 80%;
    background: white;
    font-size: 1rem;
    color: #7f828b;
  }
</style>


3、调用组件


基础准备都做好之后，接下来就是调用组件，实现地址选择器：


20181101202855348.png

其实现方法如下：


<template>
  <div class="content">
    <label class="title">{{ region }}</label>
    <mt-picker :slots="myAddressSlots" valueKey="name" :visibleItemCount="5" @change="addressChange"
               :itemHeight="40"></mt-picker>
  </div>
</template>
<script>
  //引入省/市/区数据json文件
  import { zmGetProvincesArr,zmGetCitiesArr,zmGetAreaArr } from '../../plugins/jsTools/zmRegion'
  export default {
    name: "addressPopupTool",
    data() {
      return {
        region: '',//三级地址
        province: '',//省
        city: '',//市
        area: '',//县
        provinceCode: '',//省级代码
        cityCode: '', //市级代码
        areaCode: '',//县级代码
        regionInit: false,//禁止地区选择器自动初始化，picker组件会默认进行初始化，导致一进入页面就会默认选中一个初始3级地址
        myAddressSlots: [//省
          {
            flex: 1,
            values: zmGetProvincesArr(), //省份数组
            className: 'slot1',
            textAlign: 'center'
          },
          //分隔符
          {
            divider: true,
            content: '',
            className: 'slot2'
          },
          //市
          {
            flex: 1,
            values: zmGetCitiesArr('11'),
            className: 'slot3',
            textAlign: 'center'
          },
          {
            divider: true,
            content: '',
            className: 'slot4'
          },
          //县
          {
            flex: 1,
            values: zmGetAreaArr('1101'),
            className: 'slot5',
            textAlign: 'center'
          }
        ],
      }
    },
    methods: {
      addressChange(picker, values) {
        // console.table(picker);
        // console.table(values);
        if (this.regionInit) {
          //取值并赋值
          if (values[0] && values[1]  && values[2]) {
            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("省:")
            // console.table(picker.getSlotValues(0));
            // console.log("省/市/区:")
            // console.table(picker.getValues());
            //给市、县赋值
            picker.setSlotValues(1, zmGetCitiesArr(values[0]["code"]));
            picker.setSlotValues(2, zmGetAreaArr(values[1]["code"]));
            this.$emit("getRegion", this.region)
          }else {
            console.log("数据不全");
          }
        } else {
          this.regionInit = true;
        }
      },
    },
  }
</script>
<style scoped>
  div.content {
    text-align: center;
  }
  label.title {
    margin-left: 10px;
    margin-right: 10px;
    width: 80%;
    background: white;
    font-size: 1rem;
    color: #7f828b;
  }
</style>


做完上面的所有步骤之后，就大功告成了。让我们来看一下项目的运行结果：

20181101203942129.png


四、demo下载

1、Gitee下载

2、GitHub下载

3、CSDN资源下载


啦啦啦～是不是很赞，喜欢的话～～欢迎点赞～～


参考链接：

1、vue.js+mint-ui的Popup组件和Picker组件实现省市县三级联动功能


文章标签：
机器翻译
JavaScript
移动开发
数据格式
JSON
关键词：
vue集成
集成vue
封装集成
VUE.js封装
VUE.js集成
瓜子三百克
目录
相关文章
那年春天
|
3月前
vue3+Ts 二次封装ElementUI form表单
【10月更文挑战第8天】
那年春天
279 59
dufadayang
|
4月前
|
资源调度 JavaScript API
vue3封装城市联动组件
vue3封装城市联动组件
dufadayang
243 63
。思索
|
5月前
Vue3——基于tdesign封装一个通用的查询组件
Vue3——基于tdesign封装一个通用的查询组件
。思索
149 3
小周sir
|
5月前
|
JavaScript API 开发者
vue自定义Hooks函数使用和封装思想
【8月更文挑战第8天】vue自定义Hooks函数使用和封装思想
小周sir
172 1
TooMan工具人
|
2月前
|
缓存 资源调度 JavaScript
Vue集成Excalidraw实现在线画板功能
Excalidraw是一款开源在线绘图工具，适用于白板、思维导图、原型设计等场景。支持手绘风格、多种图形元素、导出功能及多人协作，深受开发者喜爱。本文档介绍了如何在Vue项目中集成Excalidraw，包括安装依赖、配置文件修改、页面添加等步骤，帮助开发者快速上手。
TooMan工具人
159 0
Vue集成Excalidraw实现在线画板功能
diygwcom
|
3月前
|
Web App开发 JavaScript 数据可视化
vue3扩展echart封装为组件库-快速复用
vue3扩展echart封装为组件库-快速复用
diygwcom
196 7
六卿
|
4月前
|
JavaScript
Vue2.0、Vue3.0分别使用v-model封装组件[Vue必会]
本文介绍了在Vue 2和Vue 3中如何使用`v-model`来实现组件间的双向数据绑定，包括在Vue 2中使用`value`和`input`事件，以及在Vue 3中使用`modelValue`和`update:modelValue`事件的方法。
六卿
330 22
我是快乐的嘟嘟
|
5月前
|
JavaScript 测试技术 持续交付
在vue中封装第三方组件的标准
在Vue.js项目中，第三方组件库虽能提升开发效率与用户体验，但直接使用可能导致代码结构混乱和样式冲突。为此，本文介绍如何优雅封装第三方组件，包括封装的目的、准备步骤、具体实现方法及处理样式冲突的策略。通过创建专门的封装组件、设计简洁的接口以及有效地管理样式，不仅能统一应用风格，还能显著提高代码的可维护性和可复用性。此外，还提供了封装Element UI Button组件的具体示例，帮助开发者更好地理解封装流程。
我是快乐的嘟嘟
360 60
刘大猫.
|
3月前
|
JavaScript 前端开发 Java
vue2知识点：Vue封装的过度与动画
vue2知识点：Vue封装的过度与动画
刘大猫.
19 0
极简博客
|
4月前
|
前端开发 JavaScript 开发者
Express.js与前端框架的集成：React、Vue和Angular的示例与技巧
本文介绍了如何将简洁灵活的Node.js后端框架Express.js与三大流行前端框架——React、Vue及Angular进行集成，以提升开发效率与代码可维护性。文中提供了详细的示例代码和实用技巧，展示了如何利用Express.js处理路由和静态文件服务，同时在React、Vue和Angular中构建用户界面，帮助开发者快速掌握前后端分离的开发方法，实现高效、灵活的Web应用构建。
极简博客
79 3

热门文章

最新文章

  • 1
    Vue3中v-model在处理自定义组件双向数据绑定时有哪些注意事项？
  • 2
    Vue 3 中 v-model 与 Vue 2 中 v-model 的区别是什么？
  • 3
    基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
  • 4
    在 Vue 3 中，如何使用 v-model 来处理自定义组件的双向数据绑定？
  • 5
    Vue3中使用provide/inject来避免v-model的循环引用
  • 6
    Vue3中v-model在处理自定义组件双向数据绑定时，如何避免循环引用？
  • 7
    除了provide/inject，Vue3中还有哪些方式可以避免v-model的循环引用？
  • 8
    Vue集成Excalidraw实现在线画板功能
  • 9
    Voice-Pro：开源AI音频处理工具，集成转录、翻译、TTS等一站式服务
  • 10
    方案实践测评 | DataWorks集成Hologres构建一站式高性能的OLAP数据分析
  • 1
    MongoDB Atlas Vector Search与Amazon Bedrock集成已全面可用
    2647
  • 2
    Playwright安装与Python集成：探索跨浏览器测试的奇妙世界
    160
  • 3
    【MongoDB 专栏】MongoDB 与 Spring Boot 的集成实践
    263
  • 4
    LabVIEW风力涡轮机的雷电流测量系统中集成高速摄像机
    55
  • 5
    FFmpeg开发笔记（十七）Windows环境给FFmpeg集成字幕库libass
    174
  • 6
    sprinboot+vue集成neo4j图数据库
    187
  • 7
    RabbitMQ的springboot项目集成使用-01
    150
  • 8
    springboot集成ElasticSearch的具体操作（系统全文检索）
    99
  • 9
    基于RuoYi-Flowable-Plus的若依ruoyi-nbcio支持自定义业务表单流程的集成方法与步骤（二）
    390
  • 10
    基于RuoYi-Flowable-Plus的若依ruoyi-nbcio支持自定义业务表单流程的集成方法与步骤（一）
    338

    • 相关课程

    更多
  • 事件总线EventBridge生态集成课程
  • 消息队列 RocketMQ 消息集成
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • jQuery开发教程

    • 相关电子书

    更多
  • 阿里邮箱—安全高效集成
  • 集成智能接入网关APP：优化企业级移动办公网络
  • 云效助力企业集成安全到DevOps中

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月