uniapp自定義picker城市多級聯動組件

uniapp自定義picker城市多級聯動組件

• 支持多端——h五、app、微信小程序、支付寶小程序...
• 支持自定義配置picker插件級數
• 支持無限級

注意事項：插件傳入數據格式爲children樹形格式，內部包含：id、name

參數	類型	描述	默認值	必選
title	string	標題	''	否
layer	number	控制幾級聯動	1	否
data	arr	數據 如：[{text: '', adcode: '', children: [{text: '', adcode: ''}]}]	[]	否

組件運行圖示：

組件選擇後返回數據如：

引用示例：

<template>
	<view class="content">
		<view class="aui-content" :style="{height: contentHeight}">	
			<view class="aui-btn aui-btn-blue" @click.stop="showPicker($event)">picker無限級聯動</view>	
		</view>
		<aui-picker 
			ref="picker" 
			:title="auiPicker.title"
			:layer="auiPicker.layer"
			:data="auiPicker.data"
			@callback="pickerCallback"
		></aui-picker>
	</view>
</template>

<script>
	import auiPicker from '@/components/aui-picker/aui-picker.vue';
	export default {
		components: {
			auiPicker
		},
		data() {
			return {
				auiPicker: {
					title: 'picker多級聯動',
					layer: null,
					data: []
				},
			}
		},
		created(){
			
		},
		mounted() {
			
		},
		methods: {
			//顯示picker多級聯動彈窗
			showPicker(e){
				const _this = this;
				_this.auiPicker.data=[{
					id: "1001",
					name: "一級菜單1",
					children: [{
						id: "1002",
						name: "二級菜單1-1",
						children: [{
							id: "1003",
							name: "三級菜單1-1",
							children: [{
								id: "1004",
								name: "四級菜單1-1"
							}]
						}]
					}]
				},
				{
					id: "1005",
					name: "一級菜單2",
					children: [{
						id: "1006",
						name: "二級菜單2-1",
						children: [{
							id: "1007",
							name: "三級菜單2-1",
							children: [{
								id: "1008",
								name: "四級菜單2-1"
							}]
						}]
					}]
				}];
				_this.$refs.picker.open().then(function(){
					console.log('picker打開');
				});
			},
			//picker多級聯動回調
			pickerCallback(e){
				const _this = this;
				console.log(e);
				let result = '';
				e.data.forEach(function(item, index){
					result += item.name + '   ';
				});
				uni.showModal({
				    title: '提示',
				    content: result,
				    success: function (res) {
				        if (res.confirm) {
				            console.log('用戶點擊肯定');
				        } else if (res.cancel) {
				            console.log('用戶點擊取消');
				        }
				    }
				});
			}
		}
	}
</script>

<style>
	.aui-content{padding: 15px 0 0 0;}
</style>

aui-picker組件完整代碼：

項目components文件夾下建立aui-picker夾，此文件夾下建立aui-picker.vue——多級聯動組件

<template name="aui-picker">
	<view class="aui-picker" v-if="SHOW" :class="{
		'aui-picker-in': FADE==1,
		'aui-picker-out': FADE==0}"
	>
		<view class="aui-mask" @click.stop="close"></view>
		<view class="aui-picker-main">
	        <view class="aui-picker-header">
	            <view class="aui-picker-title" v-if="title">{{title}}</view>
	            <view class="aui-picker-close iconfont iconclose" @click.stop="close"></view>
	        </view>
	        <view class="aui-picker-nav">
				<view class="aui-picker-navitem"
					v-if="nav.length>0"
					v-for="(item, index) in nav" 
					:key="index" 
					:data-index="index" 
					:class="[index==navCurrentIndex ? 'active' : '', 'aui-picker-navitem-'+index]" 
					:style="{margin: nav.length>2 ? '0 10px 0 0' : '0 30px 0 0'}"
					@click.stop="_changeNav($event)"
				>{{item.name}}</view>				
				<view class="aui-picker-navitem"									
					:key="nav.length" 
					:data-index="nav.length"
					:class="[nav.length==navCurrentIndex ? 'active' : '', 'aui-picker-navitem-'+nav.length]" 
					:style="{margin: nav.length>2 ? '0 10px 0 0' : '0 30px 0 0'}"
					@click.stop="_changeNav($event)"
				>請選擇</view>
				<view class="aui-picker-navborder" :style="{left: navBorderLeft+'px'}"></view>
			</view>
	        <view class="aui-picker-content">
	            <view class="aui-picker-lists">
					<view class="aui-picker-list"
						v-for="(list, index) in queryItems.length + 1"
						:key="index" 
						:data-index="index" 
						:class="[index==navCurrentIndex ? 'active' : '']"
					>
						<view class="aui-picker-list-warp" v-if="index == 0">
							<view class="aui-picker-item" 
								v-for="(item, key) in items" 
								v-if="item.pid=='0'"
								:key="key"
								:data-pindex="index"
								:data-index="key"
								:data-id="item.id" 
								:data-pid="item.pid"
								:data-name="item.name"
								:class="{'active': result.length>index && result[index].id==item.id}"
								:style="{'background': touchConfig.index==key && touchConfig.pindex==index ? touchConfig.style.background : ''}"
								@click.stop="_chooseItem($event)"
								@touchstart="_btnTouchStart($event)"
								@touchmove="_btnTouchEnd($event)"
								@touchend="_btnTouchEnd($event)"
							>{{item.name}}</view>
						</view>
						<view class="aui-picker-list-warp" v-else>
							<view class="aui-picker-item" 
								v-for="(item, key) in queryItems[index-1]"
								:key="key"
								:data-pindex="index"
								:data-index="key"
								:data-id="item.id"
								:data-pid="item.pid"
								:data-name="item.name"
								:class="{'active': result.length>index && result[index].id==item.id}"
								:style="{'background': touchConfig.index==key && touchConfig.pindex==index ? touchConfig.style.background : ''}"
								@click.stop="_chooseItem($event)"
								@touchstart="_btnTouchStart($event)"
								@touchmove="_btnTouchEnd($event)"
								@touchend="_btnTouchEnd($event)"
							>{{item.name}}</view>
						</view>
					</view>
				</view>
	        </view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'aui-picker',
		props: {
			title: { //標題
				type: String,
				default: ''
			},
			layer: { //控制幾級聯動,默認無限級(跟隨數據有無下級)
				type: Number,
				default: null
			},
			data: { //數據 如：[{id: '', name: '', children: [{id: '', name: ''}]}]
				type: Array,
				default (){
					return [
						// [{id: '', name: '', children: [{id: '', name: ''}]}]
					]
				}
			}
		},
		data(){
			return {
				SHOW: false,
				FADE: -1,
				nav: [],
				items: [],
				queryItems: [],
				navCurrentIndex: 0,
				navBorderLeft: 40,
				result: [],
				touchConfig: {
					index: -1,
					pindex: -1,
					style: {
						color: '#197DE0',
						background: '#EFEFEF'
					} 
				}
			}
		},
		created(){
			const _this = this;
		},
		watch:{
			data(){
				const _this = this;
				const data = _this.data;
				_this.items = _this._flatten(data, '0')
	　　　　}　　
	　　},
		mounted(){
			
		},
		methods:{
			// 打開
			open(){
				const _this = this;				
				_this.reset(); //打開時重置picker
				return new Promise(function(resolve, reject){
					_this.SHOW = true;
					_this.FADE = 1;
					resolve();
				});
			},
			// 關閉
			close(){
				const _this = this;
				return new Promise(function(resolve, reject){
					_this.FADE = 0;
					const _hidetimer = setTimeout(()=>{
						_this.SHOW = false;
						_this.FADE = -1;
						clearTimeout(_hidetimer);
						resolve();						
					},100)	
				});
			},
			//重置
			reset(){
				const _this = this;
				_this.queryItems = [];
				_this.nav = [];
				_this.navBorderLeft = 40;
				_this.navCurrentIndex = 0;
				_this.result = [];
			},
			//導航欄切換
			_changeNav(e){
				const _this = this;
				const index = Number(e.currentTarget.dataset.index);
				_this.navCurrentIndex = index;
				const _el = uni.createSelectorQuery().in(this).select(".aui-picker-navitem-"+index);
				_el.boundingClientRect(data => {
					_this.navBorderLeft = data.left + 20;
				}).exec();
			},
			//數據選擇
			_chooseItem(e){
				const _this = this;
				const id = e.currentTarget.dataset.id;
				const name = e.currentTarget.dataset.name;
				const pid = e.currentTarget.dataset.pid;
				const _arr = [];
				_this.result[_this.navCurrentIndex] = {id: id, name: name, pid: pid};
				if(
					(!_this._isDefine(_this.layer) && _this._isDefine(_this._deepQuery(_this.data, id).children)) 
					|| 
					(_this.navCurrentIndex < (Number(_this.layer) - 1) && _this._isDefine(_this._deepQuery(_this.data, id).children))
				)
				{ //有下級數據
					_this._deepQuery(_this.data, id).children.forEach(function(item, index){
						_arr.push({id: item.id, name: item.name, pid: id});
					});
					if(_this.navCurrentIndex == _this.queryItems.length)
					{ //選擇數據
						_this.queryItems.push(_arr);
						_this.nav.push({name: name});
					}
					else
					{ //從新選擇數據
						_this.queryItems.splice(_this.navCurrentIndex+1, 1);
						_this.nav.splice(_this.navCurrentIndex+1, 1);
						_this.queryItems.splice(_this.navCurrentIndex, 1, _arr);
						_this.nav.splice(_this.navCurrentIndex, 1, {name: name});
					}
					_this.navCurrentIndex = _this.navCurrentIndex + 1;
					const _el = uni.createSelectorQuery().in(this).select(".aui-picker-navitem-"+_this.navCurrentIndex);
					setTimeout(()=>{
						_el.boundingClientRect(data => {
							_this.navBorderLeft = data.left + 20;
						}).exec();
					},100)
				}
				else
				{ //無下級數據
					_this.close().then(()=>{
						_this.$emit("callback", {status: 0, data: _this.result});
					});
				}
			},			
			//遞歸遍歷——將樹形結構數據轉化爲數組格式
			_flatten(tree, pid) {
				return tree.reduce((arr, {id, name, children = []}) =>
				arr.concat([{id, name, pid}], this._flatten(children, id)), [])
			},
			//根據id查詢對應的數據(如查詢id=10100對應的對象)
			_deepQuery(tree, id) {
			    let isGet = false;
			    let retNode = null;
			    function deepSearch(tree, id){
			        for(let i = 0; i < tree.length; i++) {
			            if(tree[i].children && tree[i].children.length > 0) {
			                deepSearch(tree[i].children, id);
			            }
			            if(id === tree[i].id || isGet) {
			                isGet||(retNode = tree[i]);
			                isGet = true;
			                break;
			            }
			        }
			    }
			    deepSearch(tree, id);
			    return retNode;
			},
			/***判斷字符串是否爲空
			   @param {string} str 變量
			   @example: aui.isDefine("變量");
			*/
			_isDefine(str){
				if (str==null || str=="" || str=="undefined" || str==undefined || str=="null" || str=="(null)" || str=='NULL' || typeof (str)=='undefined'){
					return false;
				}else{
					str = str + "";
					str = str.replace(/\s/g, "");
					if (str == ""){return false;}
					return true;
				}
			},
			_btnTouchStart(e){
				const _this = this,
					index = Number(e.currentTarget.dataset.index),
					pindex = Number(e.currentTarget.dataset.pindex);
				_this.touchConfig.index = index;
				_this.touchConfig.pindex = pindex;
			},
			_btnTouchEnd(e){
				const _this = this,
					index = Number(e.currentTarget.dataset.index),
					pindex = Number(e.currentTarget.dataset.pindex);
				_this.touchConfig.index = -1;
				_this.touchConfig.pindex = -1;
			},	
		}
	}
</script>

<style scoped>
	/* ====================
		多級聯動彈窗
	 =====================*/
	.aui-picker{
		width: 100vw;
		height: 100vh;
		opacity: 0;		
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		/* display: none; */
	}
	.aui-picker.aui-picker-in{
		-moz-animation: aui-fade-in .1s ease-out forwards;
		-ms-animation: aui-fade-in .1s ease-out forwards;
		-webkit-animation: aui-fade-in .1s ease-out forwards;
		animation: aui-fade-in .1s ease-out forwards;
	}
	.aui-picker.aui-picker-out{
		-moz-animation: aui-fade-out .1s ease-out forwards;
		-ms-animation: aui-fade-out .1s ease-out forwards;
		-webkit-animation: aui-fade-out .1s ease-out forwards;
		animation: aui-fade-out .1s ease-out forwards;
	}
	.aui-picker-main{
		width: 100vw;
		height: 50vh;
		background: #FFF;
		border-radius: 15px 15px 0 0;
		position: absolute;
		left: 0px;
		bottom: -50vh;		
		z-index: 999;
	}
	.aui-picker.aui-picker-in .aui-picker-main{
		-moz-animation: aui-slide-up-screen .2s ease-out forwards;
		-ms-animation: aui-slide-up-screen .2s ease-out forwards;
		-webkit-animation: aui-slide-up-screen .2s ease-out forwards;
		animation: aui-slide-up-screen .2s ease-out forwards;
	}
	.aui-picker.aui-picker-out .aui-picker-main{
		-moz-animation: aui-slide-down-screen .2s ease-out forwards;
		-ms-animation: aui-slide-down-screen .2s ease-out forwards;
		-webkit-animation: aui-slide-down-screen .2s ease-out forwards;
		animation: aui-slide-down-screen .2s ease-out forwards;
	}
	.aui-picker-header{
		width: 100%;
		min-height: 50px;
		position: relative;
		z-index: 999;
		background: #F2F2F2;
		border-radius: 15px 15px 0 0;
	}
	.aui-picker-header::after{
		content: '';
		width: 100%;
		height: 1px;
		background: rgba(100,100,100,.3);
		-moz-transform: scaleY(.3);
		-ms-transform: scaleY(.3);
		-webkit-transform: scaleY(.3);
		transform: scaleY(.3);
		position: absolute;
		left: 0;
		bottom: 0;
		z-index: 999;
	}
	.aui-picker-title{
		line-height: 20px;
		text-align: center;
		font-size: 17px;
		color: #333;
		padding: 15px;
		box-sizing: border-box;
		position: absolute;
		left: 50px;
		right: 50px;
		top: 0;
	}
	.aui-picker-close.iconfont{
		width: 50px;
		height: 50px;
		line-height: 50px;
		text-align: center;
		font-size: 20px;
		color: #aaa;
		border-radius: 0 10px 0 0;
		position: absolute;
		right: 0;
		top: 0;
	}
	.aui-picker-content{
		width: 100%;
		height: -webkit-calc(100% - 100px);
		height: calc(100% - 100px);
	}
	.aui-picker-nav{
		width: 100%;
		height: 50px;
		text-align: left;
		padding: 0 20px;
		margin: 0 0 1px 0;
		justify-content: flex-start;
		white-space: nowrap;
		box-sizing: border-box;
		position: relative;
	}
	.aui-picker-nav::after{
		content: '';
		width: 100%;
		height: 1px;
		background: rgba(100,100,100,.3);
		-moz-transform: scaleY(.3);
		-ms-transform: scaleY(.3);
		-webkit-transform: scaleY(.3);
		transform: scaleY(.3);
		position: absolute;
		left: 0;
		bottom: 0;
		z-index: 999;
	}
	.aui-picker-navitem{
		width: 80px;
		line-height: 50px;
		font-size: 16px;
		margin: 0 30px 0 0;
		text-align: center;
		display: inline-block;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.aui-picker-navitem.active{
		color: #197DE0;
	}
	.aui-picker-navborder{
		width: 40px;
		height: 3px;
		background: #197DE0;
		border-radius: 5px;
		transition: left .15s;
		position: absolute;
		left: 40px;
		bottom: 0;
	}
	.aui-picker-lists{
		width: 100%;
		height: 100%;
		justify-content: space-around;
		white-space: nowrap;
	}
	.aui-picker-list{
		width: 100%;
		height: 100%;
		overflow: hidden;
		overflow-y: scroll;
		display: none;
		vertical-align: top;
	}
	.aui-picker-list.active{
		display: inline-block;
	}
	.aui-picker-list-warp{
		width: 100%;
		height: auto;
		box-sizing: border-box;
		padding: 15px 0;
		display: inline-block;
	}
	.aui-picker-item{
		width: 100%;
		height: 50px;
		line-height: 50px;
		padding: 0 15px;
		box-sizing: border-box;
		font-size: 15px;
		color: #333;
		position: relative;
	}
	.aui-picker-item.active{
		color: #197DE0;
	}
	.aui-picker-item.active::after{
		content: '✔';
		font-size: 15px;
		color: #197DE0;
		position: absolute;
		top: 0px;
		right: 10px;
	}

</style>