# jia-cascader （内部携带最新省市区编码 需要可自取）
# Props

| 属性名           | 类型            | 说明                                                         | 默认值            |
| ---------------- | --------------- | ------------------------------------------------------------ | ----------------- |
| readonly         | Boolean       | 只读   															 ｜false
| border           | Boolean       | 边框    														 ｜ true 															
| clearIcon        | Boolean       | 清除按钮      													 ｜ true
| placeholder      | String        | 默认提示      												     ｜请选择
| popupTitle       | String        | 弹窗标题      												     ｜请选择
| itemList         | Array           | 级联数据， 如果下一级是请求返回，则为第一级数据，否则为所有数据 | [ ]               |
| defaultItemList  | Array           | 初始化默认选中数据，当一次性传入所有数据时，默认值可为字符串数组，如：['安徽省','阜阳市','颍上县'] | [ ]               |
| defaultKey       | V1.7.2+ String  | 默认值字段key，可传值：text，value，仅当一次性传入所有数据时有效 | text              |
| headerLine       | Boolean         | 是否显示header底部细线                                     | true              |
| headerBgColor    | String          | header背景颜色                                              | #FFFFFF           |
| tabsHeight       | String          | 顶部标签栏高度                                              | 88rpx             |
| text             | String          | 默认显示文字                                                | 请选择           |
| size             | Number          | tabs 文字大小                                                | 28                |
| color            | String          | tabs 文字颜色                                                | #555              |
| activeColor      | String          | 选中颜色                                                    | #5677fc           |
| bold             | Boolean         | 选中后文字加粗                                              | true              |
| showLine         | Boolean         | 选中后是否显示底部线条                                      | true              |
| lineColor        | String          | 线条颜色                                                    | #5677fc           |
| checkMarkSize    | Number          | icon 大小                                                   | 15                |
| checkMarkColor   | String          | icon 颜色                                                   | #5677fc           |
| imgWidth         | String          | item 图片宽度                                               | 40rpx             |
| imgHeight        | String          | item 图片高度                                               | 40rpx             |
| radius           | String          | 图片圆角                                                    | 50%               |
| textColor        | String          | item text颜色                                               | #333              |
| textActiveColor  | String          | item text选中后颜色                                         | #333              |
| textBold         | Boolean         | 选中后字体是否加粗                                          | true              |
| textSize         | Number          | item text字体大小                                           | 28                |
| nowrap           | Boolean         | text 是否不换行                                              | false             |
| subTextColor     | String          | item subText颜色                                            | #999              |
| subTextSize      | Number          | item subText字体大小                                        | 24                |
| padding          | String          | item padding                                                | 20rpx 30rpx       |
| firstItemTop     | String          | 占位高度，第一条数据距离顶部距离                           | 20rpx             |
| height           | String          | swiper 高度                                                 | 300px             |
| backgroundColor  | String          | item swiper 内容部分背景颜色                                | #FFFFFF           |
| request          | Boolean         | 子级数据是否请求返回（默认false，一次性返回所有数据）       | false             |
| receiveData      | Array           | 子级数据（当有改变时，默认为当前选中项新增子级数据，request为true时生效） | [ ]               |
| reset            | [Number, String]| 改变reset值则重置所有数据  

    



# 事件方法

| 属性            | 类型             | 说明              | 返回值  |
|----------|-----|------------------|----------------- |--------|
| popupopened    | Events   |       弹框打开时触发         |        |
| popupclosed    | Events   |       弹框关闭时触发         |        |
| completeChange | Events   | 	    选择器中item项点击时触发|	      |
| inputChange    | Events   | 	    选择结果数据           |	      |



# inputChange事件回调参数说明：
- layer 当前所属层级
- subIndex 当前层级点击项索引值
- subItem项 当前层级点击项所有数据，由父组件传入的数据

# completeChange事件回调参数说明：
- result 当前选择的结果
- text 所有层级选择的text值拼接数据，如：安徽省合肥市庐阳区
- value 最后一级点击项的value值
- subText 最后一级点击项的text值
- src 最后一级点击项的src值

# temList 属性Object参数说明
属性 receiveData 数据格式与 itemList中子集数据一致，数据为约定格式，尽量保持一致。

``` js
[{
    src: "", //图标地址
    text: "",//主文本
    subText: "",//副文本
    value: 0, //value值 
    children:[{
  	  text: "",//主文本
  	  subText: "",//副文本
  	  value: 0,//value值
  	  children:[] //子级数据 如果数据长度为0则表示没有下一级数据了
     }] //子级数据
}]
```

# defaultItemList 属性Object参数说明
数据为约定格式，尽量保持一致，当一次性传入所有数据时，默认值可为字符串数组。

``` js
[{
  	text: "", //选中的text
  	subText: '', //选中的subText
  	value: '', //选中的value
  	src: '', //选中的src，没有则传空或不传
  	index: 0, //选中数据在当前layer索引
  	list: [{
  		src: "",//图标地址
  		text: "", //主文本
  		subText: "",//副文本
  		value: 101 //value值 
  	 }] //当前layer下所有数据集合
}]

```

使用方法示例

在template中使用

``` vue
<template>
<template>
	<view>
		<jia-cascader request :itemList="itemList" :receiveData="receiveData" :defaultItemList="defaultItemList" @completeChange="complete" @inputChange="change"></jia-cascader>
	</view>
</template>

<script>
// data 数据 及 方法
export default {
	data() {
		return {
			itemList: [],
			receiveData: [],
			defaultItemList: [
				{
					src: '',
					text: '高一(3)班',
					subText: '30人',
					value: 102,
					index: 1, //选中数据在当前layer索引
					list: [
						{
							src: '',
							text: '高一(1)班',
							subText: '30人',
							value: 101
						},
						{
							src: '',
							text: '高一(2)班',
							subText: '30人',
							value: 102
						},
						{
							src: '',
							text: '高一(3)班',
							subText: '30人',
							value: 103
						},
						{
							src: '',
							text: '高一(1)班',
							subText: '30人',
							value: 101
						},
						{
							src: '',
							text: '高一(2)班',
							subText: '30人',
							value: 102
						},
						{
							src: '',
							text: '高一(1)班',
							subText: '30人',
							value: 101
						},
						{
							src: '',
							text: '高一(2)班',
							subText: '30人',
							value: 102
						},
						{
							src: '',
							text: '高一(1)班',
							subText: '30人',
							value: 101
						},
						{
							src: '',
							text: '高一(2)班',
							subText: '30人',
							value: 102
						},
						{
							src: '',
							text: '高一(1)班',
							subText: '30人',
							value: 101
						},
						{
							src: '',
							text: '高一(2)班',
							subText: '30人',
							value: 102
						},
						{
							src: '',
							text: '高一(1)班',
							subText: '30人',
							value: 101
						},
						{
							src: '',
							text: '高一(2)班',
							subText: '30人',
							value: 102
						},
						{
							src: '',
							text: '高一(1)班',
							subText: '30人',
							value: 101
						},
						{
							src: '',
							text: '高一(2)班',
							subText: '30人',
							value: 102
						},
						{
							src: '',
							text: '高一(1)班',
							subText: '30人',
							value: 101
						}
					] //当前layer下所有数据集合
				},
				{
					text: '周小小', //选中的text
					subText: '女', //选中的subText
					value: 11103, //选中的value
					src: '', //选中的src，没有则传空或不传
					index: 2, //选中数据在当前layer索引
					list: [
						{
							text: '张三',
							subText: '男',
							value: 11101
						},
						{
							text: '王五',
							subText: '男',
							value: 11102
						},
						{
							text: '周小小',
							subText: '女',
							value: 11103
						},
						{
							text: '周小小',
							subText: '女',
							value: 11103
						},
						{
							text: '周小小',
							subText: '女',
							value: 11103
						}
					] //当前layer下所有数据集合
				}
			]
		};
	},
	onLoad() {
		this.itemList = [
			{
				src: ' ',
				text: '高一(1)班',
				subText: '30人',
				value: 101
			},
			{
				src: ' ',
				text: '高一(2)班',
				subText: '30人',
				value: 102
			},
			{
				src: ' ',
				text: '高一(3)班',
				subText: '30人',
				value: 103
			},
			{
				src: ' ',
				text: '高一(4)班',
				subText: '28人',
				value: 104
			},
			{
				src: ' ',
				text: '高一(5)班',
				subText: '28人',
				value: 105
			},
			{
				src: ' ',
				text: '高一(6)班',
				subText: '28人',
				value: 106
			},
			{
				src: ' ',
				text: '高一(7)班',
				subText: '28人',
				value: 107
			},
			{
				src: ' ',
				text: '高一(8)班',
				subText: '38人',
				value: 108
			},
			{
				src: ' ',
				text: '高一(9)班',
				subText: '38人',
				value: 109
			},
			{
				src: ' ',
				text: '高一(10)班',
				subText: '38人',
				value: 110
			},
			{
				src: ' ',
				text: '高一(11)班',
				subText: '38人',
				value: 111
			},
			{
				src: ' ',
				text: '高一(12)班',
				subText: '38人',
				value: 112
			}
		];
	},
	methods: {
		change(e) {
			console.log(e);
			/**
  		 *   layer: 0  第几级 index
  			 src: '/static/images/basic/color.png'
  			 subIndex: 2   //当前层级下选中项index
  			 subText: '30人'  //选中项数据
  			 text: '高一(3)班'
  			 value: 103 //选中项value数据
  		 * */

			// 模拟请求
			let value = e.value;
			let layer = e.layer;
			if (layer === 7) {
				//实际中以请求数据为准，无下级数据则传空数组
				this.receiveData = [];
			} else {
				uni.showLoading({
					title: '请稍候...'
				});
				setTimeout(() => {
					uni.hideLoading();
					//请求完成后将数据处理成以下格式，传入，最后一级没有则传空数组
					switch (layer) {
						case 0:
							this.receiveData = [
								{
									text: '张三',
									subText: '男',
									value: 11101
								},
								{
									text: '王五',
									subText: '男',
									value: 11102
								},
								{
									text: '周小小',
									subText: '女',
									value: 11103
								},
								{
									text: '周小小',
									subText: '女',
									value: 11103
								},
								{
									text: '周小小',
									subText: '女',
									value: 11103
								}
							];
							break;
						case 1:
							this.receiveData = [
								{
									text: '他(她)说',
									value: 11101
								}
							];
							break;
						case 2:
							this.receiveData = [
								{
									text: '这是一个',
									value: 11101
								}
							];
							break;
						case 3:
							this.receiveData = [
								{
									text: '级联选择器',
									value: 11101
								}
							];
							break;
						case 4:
							this.receiveData = [
								{
									text: '测试例子',
									value: 11101
								}
							];
							break;
						case 5:
							this.receiveData = [
								{
									text: '总共',
									value: 11101
								}
							];
							break;
						case 6:
							this.receiveData = [
								{
									text: '8级数据',
									value: 11101
								}
							];
							break;
						default:
							break;
					}
				}, 800);
			}
		},
		complete(e) {
			console.log(e);
			console.log('您选择的数据为：' + e.text);
		}
	}
};
</script>


```