You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
466 lines
13 KiB
466 lines
13 KiB
10 months ago
|
# 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>
|
||
|
|
|
||
|
|
|
||
|
|
```
|