基于mint-ui的piker的三级联动

作者: MJ 分类: vue 发布时间: 2019-07-06 22:26

欢迎star。
https://github.com/majiang666/city-three

好久没更新了,主要的原因是在补充新能量,花了一个周末把mobx给走了一遍,感觉确实比redux更容易上手,技术其实好多都是相通的,假如你熟悉redux的话,入手mobx就会更容易一点,接下来如果不忙的话,会继续熟悉umijs、typescript,需要了解的技术太多了,但是当你攻克一个一个的时候,你就会有很多力量去学习更多新知识,加油。题外话说完了,回到正题。

再啰嗦一句,最近好几个其他问题都是没有好好看官方的文档,官方文档和注意事项还是要好好看,可以避免一些坑。

demo:
https://www.sjooy.com/city/index.html

这个需求的来源是同事来问我,三级联动,本身这个功能是很简单的,去官网看一下api(https://mint-ui.github.io/docs/#/zh-cn2/picker )就可以实现,但是现在的需求是,后台接口会给初始化的省、市、区,然后自动定位。

然后在网上参考了大神的思路,在这个基础上,实现了根据给出的省市区名称,自动定位到当前位置,如果没有返回,自动定位到所在位置的第一个。

核心代码:

mounted () {
    const citys = '北京市 北京 昌平区';
    const resCity = citys.split(' ');
    const sheng1 = resCity[0];
    const shi1 = resCity[1];
    const qu1 = resCity[2];
    
    this.$nextTick(() => {
      let sheng = this.getNumber(Object.keys(cityName),sheng1);
      let shi = this.getNumber(Object.keys(cityName[this.slots[0].values[sheng]]),shi1);
      let qu = this.getNumber(Object.values(cityName[this.slots[0].values[sheng]])[shi],qu1);

      this.slots[0].defaultIndex = sheng; 
      this.slots[1].defaultIndex = shi; 
      this.slots[2].defaultIndex = qu; 

      this.slots[1].values = Object.keys(cityName[this.slots[0].values[sheng]])
      this.slots[2].values = Object.values(cityName[this.slots[0].values[sheng]])[shi]
    });
  }

欢迎关注小程序,感谢您的支持!

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注