elink-star
/
epmet-work-uni
12
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
城阳工作端uniH5前端代码
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.
23 Commits
1 Branch
0 Tags
18 MiB
 
 
Branch: master
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'master'
${ noResults }
epmet-work-uni/uni_modules/jia-cascader/readme.md

13 KiB
Raw Permalink Blame History

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中子集数据一致，数据为约定格式，尽量保持一致。

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

defaultItemList 属性Object参数说明

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

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

使用方法示例

在template中使用

<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>