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
mk 8cbafbf996
引入uview组件 图片上传 事件上传 需求上传表单实现 语音上传 语音回显还未做 		10 months ago
..
components/jia-cascader 引入uview组件 图片上传 事件上传 需求上传表单实现 语音上传 语音回显还未做 10 months ago
changelog.md 引入uview组件 图片上传 事件上传 需求上传表单实现 语音上传 语音回显还未做 10 months ago
package.json 引入uview组件 图片上传 事件上传 需求上传表单实现 语音上传 语音回显还未做 10 months ago
readme.md 引入uview组件 图片上传 事件上传 需求上传表单实现 语音上传 语音回显还未做 10 months ago

readme.md

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>