### 分类选择
	分类选择组件，支持单选、多选、搜索、默认选中值、禁用项，建议搭配弹出层uni-popup使用
##  注意事项
	组件需要依赖 scss 插件, 或自己去手动修改css样式（很简单）
##  属性 Props
|  属性名		| 类型		| 默认值|    说明										|
|  ----			| ----		| ----	|  ----											|
| showNav		| Boolean	|false	| 是否显示标题栏，为true时，activeIds数据单向绑定，请通过 @clickConfirm 操作|
| title			| String	| 标题	| 标题文字										|
| cancelText	| String	|取消	| 取消按钮文字									|
| confirmText	| String	|确认	| 确认按钮文字									|
| activeIndex	| Number	|0		| 左侧选中的索引									|
| items			| Array		|[ ]	| 为分类显示所需的数据，数据格式见下方示例		|
| activeIds		| Array		| [ ]	| 表示右侧高亮选项的id，默认数据双向绑定，showNva为true时，数据单向绑定， 请通过 @clickConfirm 操作	|
| max			| Number	| 0		| 表示右侧项最大选中个数, 为1时表示单选			|
| selectedIcon	| String	|''		| 自定义右侧栏选中状态的图标,暂只支持相对路径		|
| selectAll	    | Boolean	|false	| 是否支持全选，默认为false						|
| defaultActiveColor	| String	| #FC2A57	| 默认重点颜色						|    
| isSearch	    | Boolean	|false	| 是否支持搜索，默认为false						|
| searchText	| String	|搜索	| 搜索按钮文字						|
| searchPlaceholder	| String	|请输入关键词	| 搜索框placeholder						|
###   item
|  属性名		| 类型		| 默认值|    说明										|
|  ----			| ----		| ----	|  ----											|
| dot		    | Boolean	|false	| 圆点徽标								        |
| badge			| Number    | ''	| 带数字的徽标									|
| disabled	    | String	|false	| 是否禁用选项									|
	
##  方法  Events
|  属性名		| 返回值    |    说明										                |
|  ----			| ----	    |  ----											                |
| clickConfirm	|所有选中的数据Array	    |showNav 为true时有效， 点击确认按钮时触发	|
| clickCancel	| 	 | showNav 为true时有效，点击取消按钮时触发					    	|
| clickNav	    |被点击的导航的索引 Number	| 点击左侧导航时触发				        |
| clickItem	    |该点击项的数据	 Object	    | 点击右侧选择项时触发				    	|
	    	
	
### 代码示例
```
<template>
	<view class="test">
		<view class="title">
			1、单选 -- {{city_ids1}}
		</view>
		<view class="val">
			{{city_name1}}
		</view>
		<wyh-tree-select :items="items" :activeIds="city_ids1" :max="1" @clickItem="onItem"/>
		<view class="title">
			2、多选 -- {{city_ids2}}
		</view>
		<view class="val">
			{{city_name2}}
		</view>
		<wyh-tree-select :items="items" :activeIds="city_ids2" :max="2"/>
		
		<view class="title">
			3、全选 -- {{city_ids5}}
		</view>
		<view class="val">
			{{city_name5}}
		</view>
		<wyh-tree-select :items="items" :activeIds="city_ids5" :selectAll="true"/>
		
		<view class="title">
			4、搭配弹出层 -- {{city_ids3}}
		</view>
		<view class="select" @click="$refs.popup_citys.open()">
			<view class="title">选择城市</view>
			<view class="val">{{city_name3}}</view>
		</view>
		<uni-popup class="citys_win popup_win" ref="popup_citys" type="bottom">
			<wyh-tree-select :items="items" :activeIds="city_ids3" :title="'选择地区'"/>
		</uni-popup>
		<view class="title">
			5、搭配弹出层(showNav) -- {{city_ids4}}
		</view>
		<view class="select" @click="$refs.popup_citys2.open()">
			<view class="title">选择城市</view>
			<view class="val">{{city_name4}}</view>
		</view>
		<uni-popup class="citys_win popup_win" ref="popup_citys2" type="bottom">
			<wyh-tree-select :items="items" :activeIds="city_ids4" :title="'选择地区'" :showNav="true" @clickCancel="onCancel" @clickConfirm='onConfirm'/>
		</uni-popup>
		
		<view class="title">
			6、搭配弹出层-全选(showNav) -- {{city_ids6}}
		</view>
		<view class="select" @click="$refs.popup_citys3.open()">
			<view class="title">选择城市</view>
			<view class="val">{{city_name6}}</view>
		</view>
		<uni-popup class="citys_win popup_win" ref="popup_citys3" type="bottom">
			<wyh-tree-select :items="items" :activeIds="city_ids6" :title="'选择地区'" :showNav="true" :selectAll="true" @clickCancel="onCancel2" @clickConfirm='onConfirm2'/>
		</uni-popup>
		
		<view class="title">
			7、搭配弹出层-搜索、全选(showNav) -- {{city_ids7}}
		</view>
		<view class="select" @click="$refs.popup_citys4.open()">
			<view class="title">选择城市</view>
			<view class="val">{{city_name7}}</view>
		</view>
		<uni-popup class="citys_win popup_win" ref="popup_citys4" type="bottom">
			<wyh-tree-select :items="items" :activeIds="city_ids7" :title="'选择地区'" :defaultActiveColor="'red'" :showNav="true" :selectAll="true" :isSearch="true" @clickCancel="onCancel3" @clickConfirm='onConfirm3'/>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		computed: {
			city_name1() {
				return this.getCityNames(this.city_ids1);
			},
			city_name2() {
				return this.getCityNames(this.city_ids2);
			},
			city_name3() {
				return this.getCityNames(this.city_ids3);
			},
			city_name4() {
				return this.getCityNames(this.city_ids4);
			},
			city_name5() {
				return this.getCityNames(this.city_ids5);
			},
			city_name6() {
				return this.getCityNames(this.city_ids6);
			},
			city_name7() {
				return this.getCityNames(this.city_ids7);
			}
		},
		data() {
			return {
				items: [{
						text: '浙江',
						children: [
							{
								// 名称
								text: '温州',
								// id，作为匹配选中状态的标识符
								id: 1,
								// 禁用选项
								disabled: true,
							},
							{
								text: '杭州',
								id: 2,
							},{
								text: '宁波',
								id: 3
							}
						],
						dot: false
					},
					{
						text: '江苏',
						children: [
							{
								// 名称
								text: '南京',
								id: 4,
								// 禁用选项
								disabled: true,
							},
							{
								text: '无锡',
								id: 5,
							},
							{
								text: '九江',
								id: 6,
							},
							{
								text: '常州',
								id: 7,
							}
						],
						badge: 1
					},
					{
						text: '福建',
						disabled: true,
						children: [
							{
								// 名称
								text: '厦门',
								id: 8,
							},
							{
								// 名称
								text: '泉州',
								id: 9,
							}
						]
					}
				],
				city_ids1: [5],
				city_ids2: [3],
				city_ids3: [2],
				city_ids4: [],
				city_ids5: [2,3],
				city_ids6: [2],
				city_ids7: [7]
			}
		},
		methods: {
			onItem(res) {
				console.log(res);
			},
			getCityNames(ids) {
				if(!ids) return;
				if(ids.length == 0) {
					return '';
				}
				let city_name = [];
				this.items.map(function (item, index) {
					item.children.map(function (city, ind) {
						ids.map(function (id, i) {
							if(id == city.id) {
								city_name.push(city.text);
							}
						})
					})
				})
				return city_name.join(',');
			},
			onCancel() {
				this.$refs.popup_citys2.close();
			},
			onConfirm(res) {
				let ids = [];
				res.map(function (item, ind) {
					ids.push(item.id);
				})
				this.city_ids4 = ids;
				this.$refs.popup_citys2.close();
			},
			onCancel2() {
				this.$refs.popup_citys3.close();
			},
			onConfirm2(res) {
				let ids = [];
				res.map(function (item, ind) {
					ids.push(item.id);
				})
				this.city_ids6 = ids;
				this.$refs.popup_citys3.close();
			},
			onCancel3() {
				this.$refs.popup_citys4.close();
			},
			onConfirm3(res) {
				let ids = [];
				res.map(function (item, ind) {
					ids.push(item.id);
				})
				this.city_ids7 = ids;
				this.$refs.popup_citys4.close();
			}
		},
		created() {
			
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #F4F4F4 !important;
	}
	.test {
		padding-bottom: 800rpx;
		.title {
			padding: 20rpx;
			font-weight: 700;
		}
		.val {
			display: flex;
			align-items: center;
			height: 80rpx;
			padding: 0 20rpx;
			background: #ffffff;
			margin-bottom: 20rpx;
		}
	}
</style>

```