1

现在UI盛行之际,我们变得越来越懒,身为一个渣渣前端,连最基本的轮播、瀑布流、动画等都写不动了,甚是失落。好在这些UI架子能满足产品的需求,我们尚且能活的安然。于是我随大流了。
插 ——(此文章为解决:请求市区拿对应的省市ID拿不到,若时间紧,请直接看文章结尾)
就在前端时间,cp提出要做一个类似这样的东东

clipboard.png
之前写的三级联动都是select标签做的,很low B的那种,做这种效果感觉麻烦好多,于是搜集UI,终于找到个合适的——mint-ui,它的picker与设计图迷之相似。这似乎没有犹豫的必要了。
于是就写啊,但是有坑啊,这是人家源码
<mt-picker :slots="slots" @change="onValuesChange"></mt-picker>
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'
    }
  ]
};

}
};
感觉是不是很全,只要把values里面数据弄成活的就行(我的是请求地址信息);
当请求省的时候还好,只需把所有省的信息全部拿来展示,但是请求市和区的时候就需要
传对应的省ID和市ID了,之前想的是,给个顺序遍历,模拟做个ID就行了呗,后来发现数据库存的ID并不是顺序的,所以不能模拟ID了,只能取真的了。当时第一反应就是找这个UI,看有没有提供被选中的ID,但是无奈UI只提供了被选中的 ’值‘,此时,’值‘对应的ID需要自己去取了。于是我求救大神。

大神给我提供了一个JQ的方法
var that = this;
$(".slot1 .picker-item").each(function() {
   if($(this).hasClass("picker-selected")) {
     var check=$(this).text().replace(/\s/g,'');
     for(var i = 0; i < obj.length; i++) {
        if(check == obj[i].shengName) {                                               
           that.selectShengID=obj[i].shengID
           break;
          }
      }
  }
}
简短代码无需啰嗦,此时就拿到了对应的省ID,市ID同理可求。
论:始终觉得自己是技术里的幽默男(db男也可以?),无论何时都不忘娱乐,放松自己。不抱怨,生活终究美好。
附:大一讲高数导数的时候很多人都懵,下面一张图很好的解释

clipboard.png

那就是:连续不一定可倒,但可导必然连续。(这就是高数满分的人善于发现?)


蓝天海礁
1.7k 声望2.2k 粉丝

别抱怨,没什么用