缘起
在做某一个app项目的时候，产品经理给我了个原型图，我看了一下，主要是做一个机构查询和选择的模块，然后告诉我要查询的机构数据是后端返回的，数据结构是多层级树结构，于是我问了有多少层级，得到的答案是：'我也不确定，反正有很低级，可以选择任一层级，选择后得到选择的数据的Id 返回进行查询对应机构下面的人员'，祭上产品给的原型图：
潜意识告诉我，如果层级很多，按每层级前面空白30px算，375px的屏幕宽可能不行，本身这原型图心里就觉得不好看（个人认为），隔天在支付宝了的健康码里看到了一个地区选择，我体验了这个交互，幻想，假如我把显示的省市区做成左右可滑动的岂不是就可以无限层级选择了，于是， 就补知识，为写个这样的组件做准备，经过不懈的编写和测试，第一个版本写好了，滚动用的overflow：auto；IOS 和 个别机型还可以滚动，遇到魅族手机，就GG了，（泪奔！）第一个版本悲催的宣布夭折了，于是后面就接二连三的设计和测试，用户体验等都考虑了一番，经过多次失败，熬出了重构部分的新版本，取了个名字叫
picker-card,寓意：想卡片一样的选择器，这是我写这个组件的起因，写这篇文章的原因更多的是分享在这条IT路上遇到的坑坑洼洼。如若不笑，愿与君共勉之。
项目地址 觉得还行的话给个star吧
参数配置
- trigger：触发元素，值可以是DOM节点元素，也可以是选择器字符串
- title：标题
- list：注入的数据
- isFullScreen:是否充满全屏 默认false 高度为60vh
- caseName：别名设置 默认是{text:'text',children:'children'}
- level: 限制选择完成的层级，比如注入省市区数据，为1则是只选择省就执行了success，如同单选
- isShowControl：是否显示操作按钮 默认是 false 不显示
- success：选择完成后的回调
- defineRender：自定义渲染列表函数
- multiple：是否开启多选 默认false
案例截图
选择省份（单选）
选择省市（二级联动）
选择省市区（三级联动）
自定义列表渲染
多级树结构数据选择
多选
card-picker 使用
1.script 标签引入使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>picker-card script标签引入方法使用</title>
<link rel="stylesheet" href="card-picker.min.css">
</head>
<body>
<button id="btn">触发按钮</button>
</body>
<script src="card-picker.min.js"></script>
<script>
let list = [{text:'一级-1',children:[{text:'二级-1-2'}]},{text:'一级-2'}]
new PickerCard({
trigger:'#btn',//触发元素
list:list,//注入数据
success:function(res,o) {
//返回选择项数组以便用于回显或其他 o对象是最后选择项的对象以便获取id等用于接口请求
document.getElementById('btn').innerHTML = res
console.log(o)
}
})
</script>
</html>
2.npm 下载使用
第一步 下载picker-card
npm i picker-card
第二步 如果是用vue做移动端项目
入口文件 main.js
import Vue from 'vue'
import CardPicker from 'picker-card'
import 'picker-card/picker-card.css'
Vue.prototype.CardPicker = CardPicker
需要的组件里面使用
<template>
<div>
<button class="btn">选择省份</button>
</div>
</template>
<script>
import cityData from '../../assets/js/city-data.js'
export default {
data() {
return {
}
},
mounted(){
new this.CardPicker({
trigger:'.btn', //触发器
list:cityData, //注入省市区数据
level：2, //限制层级2 选择省市
success:function(resultArr,lastSelectObj){
console.log(resultArr) //选中项数组 一般用于关键词搜索 或 回显
console.log(lastSelectObj) //选择项数组最后一个 所在的对象 ，对象身上的id可能需要用于接口请求
}
})
}
}
</script>
结语
路漫漫其修远兮...
