基于mint-ui的城市选择3级联动

1、实际效果

2、首先你需要去下载一个包含中国省份，城市，区县的数据
如下：
https://github.com/artiely/Administrative-divisions-of-China（里面包含二级联动数据，三级联动数据，四级联动数据等，找到自己需要的）

https://github.com/modood/Administrative-divisions-of-China
（一个更好的中国地区数据，推荐用这个）

3、具体代码
主要是用到了mint-ui的picker组件，关于mint-ui的使用就自行看官网

Ⅰ 、html组件

<template><div><mt-picker :slots="myAddressSlots" @change="onMyAddressChange"></mt-picker><p>地址3级联动：{{ myAddressProvince }} {{ myAddressCity }}{{ myAddresscounty }}</p></div>
</template>

Ⅱ 、组件方法

<script>
import { Picker } from "mint-ui";
import myaddress from "../assets/address3.json"; //引入省市区数据
console.log(myaddress);export default {name: "",components: {"mt-picker": Picker},props: {},data() {return {myAddressSlots: [// 省{flex: 1,defaultIndex: 1,values: Object.keys(myaddress), //省份数组className: "slot1",textAlign: "center"},{divider: true,content: "-",className: "slot2"},// 市{flex: 1,values: [],className: "slot3",textAlign: "center"},{divider: true,content: "-",className: "slot4"},// 区{flex: 1,values: [],className: "slot5",textAlign: "center"}],myAddressProvince: "省",myAddressCity: "市",myAddresscounty: "区/县"};},created() {},methods: {onMyAddressChange(picker, values) {console.log(picker, values);if (myaddress[values[0]]) {//这个判断类似于v-if的效果（可以不加，但是vue会报错，很不爽）picker.setSlotValues(1, Object.keys(myaddress[values[0]])); //  Object.keys()会返回一个数组，当前省的数组picker.setSlotValues(2, myaddress[values[0]][values[1]]); //  区/县数据就是一个数组console.log("省", picker.getSlotValues(0), picker.getSlotValue(0));console.log("市", picker.getSlotValues(1), picker.getSlotValue(1));console.log("区/县", picker.getSlotValues(2), picker.getSlotValue(2));console.log(picker.getValues());this.myAddressProvince = values[0];this.myAddressCity = values[1];this.myAddresscounty = values[2];}}},mounted() {this.$nextTick(() => {//vue里面全部加载好了再执行的函数   （类似于setTimeout）this.myAddressSlots[0].defaultIndex = 0;// 这里的值需要和 data里面 defaultIndex 的值不一样才能够初始化//因为我没有看过源码（我猜测是因为数据没有改变，不会触发更新）});}
};
</script>

picker 中的方法

method: {slotValueChange () {}, // 触发 picker 的 change 事件getSlot (slotIndex) {}, // 过去某一列 slotgetSlotValue (index) {}, // 获取某一列 slot 的当前值setSlotValue (index, value) {}, // 设置某一列 slot 的当前值getSlotValues (index) {}, // 获取 slot 的 valuessetSlotValues (index, values) {}, // 设置 slot 的 valuesgetValues () {}, // 获取多个组件合成的值setValues (values) {} // 同时设置多列 slot 的值
}

基于mint-ui的城市选择3级联动相关推荐

基于Mint UI和MUI开发VUE项目一之环境搭建和首页的实现
一:简介 Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.通过它,可以快速构建出风格统一的页面,提升开发效率.真正意义上的按需加载组件.可以只加载声明过的组件及其样式 ...
世界级/全国/省份/城市/县区4级联动
世界级/全国/省份/城市/县区4级联动 Js为腾讯qq的LocList.xml 需要转为json格式的js文件 (在QQ安装目录可以找到loclist.xml文件 C:\ProgramFiles\Te ...
Flutter 侧滑栏UI及城市选择UI的实现
转载自北斗星_And大神的博客,未经原博主同意,禁止转载前言目前移动市场上很多业务都需要开发Android/IOS两个端,开发成本比较高. Flutter 在跨端上凭借着性能优势关注量,使用度 ...
腾讯地图城市选择插件-三级联动
城市数据来自于腾讯地图- 腾讯地图api http://lbs.qq.com/webservice_v1/guide-region.html 1.设计思路 1.因为是传城市ID获取下级城市数据-所以这 ...
html5 a-z字母排序,Mint UI实现A-Z字母排序的城市选择列表
本文实例为大家分享了Mint Ul实现A-Z字母排序的城市选择列表的具体代码,供大家参考,具体内容如下效果图如下: 项目文件存放路径图: 所有代码如下: import city from " ...
Mint UI —— 基于 Vue.js 的移动端组件库
写文章登录 Mint UI -- 基于 Vue.js 的移动端组件库杨奕 8 个月前 Mint UI GitHub:https://github.com/ElemeFE/mint-ui 项目主页:h ...
在基于nuxt的移动端页面中引用mint UI的popup组件之父子组件传值
最近在做移动端的wap页面,考虑到要做SEO,所以选定了nuxt+vue+mint ui. 有一个需求是这样的,点击头部菜单栏,出现一个气泡,点击返回首页. 由于一些页面没有统一引用mint的mt-h ...
html下拉式列表框多选,基于jQuery UI的多项选择下拉列表框组件
jquery.multiselect.js是一款基于jQuery UI的多项选择下拉列表框组件.该下拉列表功能强大,可以实现多选和单选,可制作打开和关闭下拉框时的炫酷动画效果,提供丰富的回调函数和其它 ...
【移动端vue ui框架学习】vue项目如何使用基于vue的UI框架mint ui
看了下饿了么团队开发的PC端vue ui框架Element ui之后,顺便看了看同团队开发的移动端的vue ui框架mint ui,那么在vue项目中应该如何使用mint ui呢?以下做简单的记录. ...

基于mint-ui的城市选择3级联动

基于mint-ui的城市选择3级联动相关推荐

最新文章

热门文章