DDR爱好者之家

使用mint-ui实现省市区三级联动效果的示例代码
站长资源 2025/11/11 佚名
9 1538
DDR爱好者之家 Design By 杰米

引用插件：饿了么的mint-ui组件中的picker功能，具体API可参照官网说明：http://mint-ui.github.io/docs/#/zh-cn2/picker

背景：项目需要做一个省份-城市-地区的选择级联效果，我从gayhub上找了一下，决定使用mint-ui的组件，因为各个功能都很全而且设计跟我们的项目风格类似。

具体实现：

通过阅读官网的实例，大概就能知道这个组件的用法：

在vue中写入组件：<mt-picker :slots="slots" @change="onValuesChange"></mt-picker>

我们可以看到，这个组件中传入的数据slots和当其改变是触发的事件：onValuesChange()，所以只要在使用该组件的父组件内注册slots和onValuesChange就可以实现了

以下是官网上的实例：

export default {
 methods: {
 onValuesChange(picker, values) {
 if (values[0] > values[1]) {
 picker.setSlotValue(1, values[0]);
 }
 }
 },
 data() {
 return {
 slots: [
 {
  flex: 1,
  values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],
  className: 'slot1',
  textAlign: 'right'
 }, {
  divider: true,
  content: '-',
  className: 'slot2'
 }, {
  flex: 1,
  values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],
  className: 'slot3',
  textAlign: 'left'
 }
 ]
 };
 }
};

在实际操作中当我想使用picker来进行省份、城市、地区的选择时，发现最大的问题是搞不到符合该插件数据格式的数据，于是从百度上扒了一份省份、城市、地区数据之后写了一个函数对其进行了处理，在这里，共享给大家：

使用mint-ui实现省市区三级联动效果的示例代码

onProvinceChange(picker, values) {
   
   this.province = picker.getValues()[0]
   var cityArr = [];
   for(var key in provinceCity[this.province]) {
   cityArr.push(key);
   }
   this.slots2[0].values = cityArr;
  },
  onCityChange(picker, values) {
   this.city = picker.getValues()[0]
   var countyArr = [];
   for(var key in provinceCity[this.province][this.city]) {
   countyArr.push(key);
   }
   this.slots3[0].values = countyArr;
  },
  onCountyChange(picker, values) {
   
   this.county = picker.getValues()[0]
  },

三组数据以及三个方法如上，当对省份进行选择时，动态匹配相应的城市，同理对城市进行选择时动态匹配相应的地区，如此就可以实现三级联动的效果了

以上这篇使用mint-ui实现省市区三级联动效果的示例代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米