Mint_Picker 联动选择器

2019-05-18

MInt 框架

Mint是一款基于 Vue.js 的移动端组件库, 自从在他官网看到下面这句话, 我就对Mint有一种特殊情愫吧, 想比起Element全部引入, 我还是喜欢追求轻快简洁的风格。

依托 Vue.js 高效的组件化方案，Mint UI 做到了轻量化。即使全部引入，压缩后的文件体积也仅有 ~30kb (JS + CSS) gzip。

虽然Mint比较小而美, 但是该有的东西还一样都不缺的, 就比如我这次使用的Picker, 真的是超赞的哟

需求

这一次是需要做一个省市区的选择器, 需要用到多列联动的功能, 感觉没多大难度, 看了一遍文档就开始撸
picker

数据源

数据源的话是比较麻烦, 但是我们有万能的百度在, 还怕什么呢. 在百度找了几次, 然后就自己写了一个json接口, 可以直接跨域调用.

https://wx.qiatia.cn/config/?getCity

{
"code":200,
"count":1
"data":{"北京": {"北京":["东城区", "西城区", "朝阳区",…]}, "天津": {,…}, "河北": {,…},…}
"time":1556526344
}

数据类型的话是一个二位对象, 然后里面是数组. 数据结构出来, 接下来就是数据的封装处理咯

...
<mt-picker :slots="slots" @change="onValuesChange"></mt-picker>
...
<script>
...
slots: [{
      flex: 1,
      values: [],
      className: 'slot-province',
      textAlign: 'center'
    },{
      flex: 1,
      values: [],
      className: 'slot-city',
      textAlign: 'center'
    },{
      flex: 1,
      values: [],
      className: 'slot-dist',
      textAlign: 'center'
}]
...
this.$ajax.get('https://wx.qiatia.cn/config/?getCity').then(res=>{
    let arr = this.addressArr = res.data.data
    // 初始话数据, 获取第一条数据
    let temp1 = this.slots[0].values = Object.keys(arr)
    let temp2 = this.slots[1].values = Object.keys(arr[temp1[0]])
    this.slots[2].values = arr[temp1[0]][temp2[0]]
})
...
let t1, t2
onValuesChange(picker, value){
    // 通过缓存 不必要每一次都对数据进行重构, 至于第一条数据完全是定死的 不需要理会
    if(value[0] !== t1){
      t1 = value[0]
      // 框架提供的数据设置接口
      picker.setSlotValues(1, Object.keys(this.addressArr[t1]))
    }
    if(value[1] !== t2){
      t2 = value[1]
      let t = this.addressArr[t1][t2]
      // 有几个数据 没有第三级的数据
      if(t.length == 0) picker.setSlotValues(2, [t1])
      else picker.setSlotValues(2, t)
    }
},
...
</script>

反思

这里给的是最终代码, 拿去就可以用的, 原理非常简单, 就是捕获选择器每次数据改变的事件, 将上个选择的数据带出去渲染第二列数据. 但是由于我事先没有看清楚文档, 以为这里会像vue双向绑定, 自己去改变slots的值也会重新渲染上去.

onValuesChange(picker, value){
    if(value[0] !== t1){
      t1 = value[0]
      // 框架提供的数据设置接口
      this.slots[1].values = Object.keys(this.addressArr[t1])
    }
    if(value[1] !== t2){
      t2 = value[1]
      this.slots[2].values = this.addressArr[t1][t2]
    }
}

最后一直没到解决办法, 不小心瞅到文档才发现自己走入一个误区了

Picker API