Awesome

下载示例项目 可直接拖进项目运行

QQ交流群: 750104037 点我加入

作者想说

感谢各位小伙伴的不断建议，inputs组件的进步都是因为你们哦~！

如果该组件有什么问题还请大家说出来哦，还有如果有什么建议的话也可以提下呐 ~
如果觉得好用，可以回来给个五星好评么~~(❁´◡`❁)*✲ﾟ*  蟹蟹~拜托啦~

组件简介

本组件目前支持 
3.0.1 input
3.0.2 textarea
3.0.4 radio
3.0.5 checkbox
3.0.6 switch
3.0.7 slider
3.0.3 上传图片
3.0.8 日期选择
3.0.9 城市选择
3.1.2 省市区乡镇街道
3.1.0、3.1.1 picker可联动自定义
3.1.4 editor(官方示例)(v6.9新增)
3.1.5 infinitePics 无限上传图片(v6.9新增)
等类型的快速开发，自动判断、自动取值，只要你填写好每项的类型数据，就可以很方便的开发啦！
甚至，表单的类型、布局、取值可以由后端接口动态决定！有需要的小伙伴快点下载吧

提示

有该插件的拆分版: QS-inputs-split<br />

相较于QS-inputs-split
优点: 能根据后台生成对应的类型
缺点: 可拓展性差、兼容性差(只要支持H5、App、微信小程序)

更新说明

inputs组件使用说明

注：有引入官方的uni-Icons组件（删除图片的叉叉、input一键清除叉叉、input左边自定义图标、密码显隐图标），可自行修改

详细代码示例见页面底部或见示例项目

1. 传给inputs组件的属性

1.0.1 animationType属性说明

可作为父级属性统一传入，也可项内属性单独传入，目前支持的类型有：fadIn、refadIn、slide-left、slide-fade-left、slide-right、slide-fade-right、slide-fade-bottom、rotate3d-fade等。动画也可自定义，只要定义动画后定义好class属性就可以了。

1.0.2 changeReSet属性说明(废弃，3.7版本后自动初始化数据)

在父级传入的inputsArray改变时，可以选择重置数据，但是视图的重置需要先inputsArray=[ ]后setTimeout 300或者多少后重新赋值，过程中可以设置主按钮文字为‘加载中’等，可增强用户体验

1.0.3 cssMode属性说明(废弃，统一wrap布局)

1.0.4 ruleSet属性说明

1.0.4.0.1 ruleSet的itemArray属性说明

1.0.5 buttonStyle属性说明

1.0.6 titleSet属性说明

1.0.7 contentSet属性说明

1.0.8 inputDebounceSet属性说明(5.0新增)

注： input与textarea类型有效

1.0.9 focusStyle属性说明(5.5新增)

1.1.0 fontSizeScaleSet属性说明(5.7新增)(6.5修改)

注：fontSizeScaleSet设置的字体大小优先级小于titleSet与contentSet中设置的字体大小

1.1.1 verifyStatusSet属性说明(5.9新增)

1.1.2 @inputsChange回调说明(6.4新增)

inputs内任何类型的值变更时都会触发此回调, 该方法接收一个所变更类型的对象，该对象有如下参数:

1.1.3 otherSet属性说明(6.5新增)

1.1.3.0.1 requiredFieldsSet属性说明

1.1.3.0.2 getCodeSet属性说明

1.1.3.0.3 segmentationTitleSet属性说明(v7.0新增)

2. ref调用方法说明(列出的是可能用到的)

2.0.1 setFocus示例

传入参数:（Number | String | Function）, focus值(Boolean), 错误回调(Function)

//setFocus示例1
this.$refs.inputs.setFocus(2, true);

//setFocus示例2
this.$refs.inputs.setFocus((inputsArray)=>{ //可以接收一个参数也可以在下面自己获取当前inputsArray数组
	let i = inputsArray.findIndex((item)=>{	//findIndex方法 返回符合测试条件的第一个数组元素索引，如果没有符合条件的则返回 -1
		return item.title === '手机号校验';
	})
	return i;
	//可以不使用findIndex方法，但是必须return一个Number
}, true);

2.0.2 setInputsValue示例(暂不支持pic类型赋值)

传入参数:（Number | String | Function）, 值(Any), 错误回调(Function)

//setInputsValue示例1
this.$refs.inputs.setInputsValue(3, false);

//setInputsValue示例2
this.$refs.inputs.setInputsValue('textarea', 'setInputsValue示例2所设置的值');

//setInputsValue示例3
this.$refs.inputs.setInputsValue((inputsArray) => {
	let i = inputsArray.findIndex(item => item.title === 'textarea') //findIndex方法 返回符合测试条件的第一个数组元素索引，如果没有符合条件的则返回 -1
	return i;
	//可以不使用findIndex方法，但是必须return一个Number
}, 'setInputsValue示例3所设置的值');

//setInputsValue示例4
this.$refs.inputs.setInputsValue('notFind', 'setInputsValue示例4所设置的值', ()=>{
	uni.showToast({
	  title: '错误回调：找不到相应的index哦',
	  icon: 'none'
	})
});

2.0.3 setValue示例

传入参数:（Object | Array ）

//setFocus示例1
this.$refs.inputs.setValue([
  {
    title,  //匹配title属性, 优先级：2
    variableName,  //匹配variableName属性, 优先级：1
    index,  //匹配index属性, 优先级：3
    picsIndex,  //若为pics类型则需传是第几张图片
    valueType,  //若为editor类型，则需传数据类型
    value  //需设置的值, 值类型根据各类型而定, 一般与默认值相似
  }
]);

2.0.4 setPicsUpLoadData示例

传入参数:（Object | Array ）

//设置多项
this.$refs.inputs.setPicsUpLoadData(
	[
		{
			customId: 'setPicsData',
			data: {a:1,b:2}
		},
		{
			customId: 'setPicsData2',
			data: {c:3,d:4}
		}
	]
);

//设置一项
this.$refs.inputs.setPicsUpLoadData(
	{
		customId: 'setPicsData',
		data: {a:1,b:2}
	}
);

this.$refs.inputs.setPicsUpLoadData({
	setPicsDatas: [
		{
			customId: 'setPicsData',
			data: {a:1,b:2}
		},
		{
			customId: 'setPicsData2',
			data: {c:3,d:4}
		}
	],
	scb(obj) {
		console.log('设置图片上传的自定义数据成功: ' + JSON.stringify(obj));
		uni.showToast({title:'设置图片上传的自定义数据成功'});
	},
	fcb() {
		console.log('设置图片上传的自定义数据失败');
		uni.showToast({title:'设置图片上传的自定义数据失败'});
	}
});

2.0.5 clearPicsUpLoadData示例

传入参数:（Object | Array ）

//清除多项
this.$refs.inputs.clearPicsUpLoadData(
	[
		{
			customId: 'setPicsData'
		},
		{
			customId: 'setPicsData2'
		}
	]
);


//清除一项
this.$refs.inputs.clearPicsUpLoadData(
	{
		customId: 'setPicsData'
	}
);

//清除全部
this.$refs.inputs.clearPicsUpLoadData();


//有回调函数
this.$refs.inputs.clearPicsUpLoadData({
	scb(obj) {
		console.log('清除成功');
		uni.showToast({title:'清除成功'});
	}
}); 

3. inputsArray详解

inputsArray项内公共属性

注： 若inputsArray中的所有项都填写variableName属性时，将开启固定变量名模式， 详见4.0.1

目前共十一种类型

<span id="input">3.0.1 input</span>

3.0.1.0.1 filterFc示例 3.8更新

{
 title: '有过滤函数的input'，
 filterFc: function(value) { // 必须接收一个参数
  value = '过滤后的值';
  return value; //必须return
 }
}

3.0.1.0.2 verifyFc示例 4.3更新

{
	title: "手机号校验",
	verifyFc: function(value) {
		if (/^[1][3,4,5,7,8][0-9]{9}$/.test(value))
			return true;
		return false;
	},
	verifyErr: "手机号校验错误"
}

注：自定义组件模式下APP、小程序, 传递不了function，所以filterFc与verifyFc不可用, 可以使用verifyType、filterType弥补（可以在app.js文件中相对应的代码下增加类型）

3.0.1.0.3 verifyType属性可取值(内置正则校验)

3.0.1.0.4 filterType属性可取值(内置过滤函数)

<span id="textarea">3.0.2 textarea</span>

<span id="pics">3.0.3 上传图片</span>

<span id="pics-itemArray">3.0.3.0.1 pics的itemArray属性说明</span>

<span id="radio">3.0.4 radio(单选)</span>

<span id="radio-itemArray">3.0.4.0.1 radio的itemArray属性说明</span>

注：itemArray的color优先于外部的color

<span id="checkbox">3.0.5 checkbox(多选)</span>

<span id="1checkbox-itemArray">3.0.5.0.1checkbox的itemArray属性说明</span>

注：checkbox返回数据为:{value,status} 3.7更新

<span id="switch">3.0.6 switch</span>

<span id="slider">3.0.7 slider</span>

<span id="picker-date">3.0.8 picker-date 日期控件</span>

picker类型注意

若要设置picker的样式，比如我要设置picker高为5，picker内的行内样式高为1，这样可以显示5行，但是，不要把样式设置的太死，行内高设为.9或.8 即可，设置的太死会导致picker在选择最后一项时出现bug

3.0.8.0.1 mode属性说明

| 值| 值类型|说明| |------|----|----|----|-------| | picker-dateTime| String| 日期加时间| | picker-date| String| 日期| | picker-time| String| 时间|

注：所传的defaultDate若不在范围中，则将显示范围内的最后一年最后一月最后一日, defaultValue中所传的月份需-1;

<span id="picker-city">3.0.9 picker-city 城市选择</span>

注：picker-city取值时返回对象，可根据需求修改

<span id="picker-custom">3.1.0 picker-custom 自定义 （建议使用3.1.1 picker-custom2，返回的数据更简单）</span>

<span id="picker-custom-steps">3.1.0.0.1 picker-custom的steps属性说明</span>

3.1.0.0.2无联动示例1：

{ // 无联动示例1
	type: 'picker-custom',
	title: 'custom-无联动1',
	itemArray: [
		[0, 1, 2],
		[3, 4, 5]
	],
	defaultValue: [0, 0], //初始数据
	onceShowDefaultValue: true, //是否显示初始数据
}

//返回数据格式: {"result":[0,3],"value":[0,0]}

3.1.0.0.3 无联动示例2：

{ // 无联动示例2
	type: 'picker-custom',
	title: 'custom-无联动2',
	itemArray: [
		[{
			name: 'a', //name变量名需与下方steps.steps_1_value相同
			value: 'a' //可添加多项自定义想要的数据
		}, {
			name: 'b',
			value: 'b'
		}, {
			name: 'c',
			value: 'c'
		}],
		[{
			name: 'd',
			value: 'd'
		}, {
			name: 'e',
			value: 'e'
		}, {
			name: 'f',
			value: 'f'
		}]
	], //name变量名与下方steps.steps_1_value相同
	defaultValue: [0, 0], //初始数据
	onceShowDefaultValue: true, //是否显示初始数据
	steps: {
		steps_1_value: 'name'
	}
}

//返回数据格式: {"result":[{"name":"a","value":"a"},{"name":"d","value":"d"}],"value":[0,0]}

3.1.0.0.4 二级联动示例1：

{ // 二级联动示例1
	type: 'picker-custom',
	title: 'custom-二级联动示例1',
	defaultValue: [1, 0], //初始数据
	onceShowDefaultValue: true, //是否显示初始数据
	itemArray: [{
		value_1: '蔬菜', //value_1变量名需与下方steps.steps_1_value相同
		/*
		可添加多项自定义想要的数据
		*/
		item_2: ['青菜'] //item_2变量名需与下方steps.steps_1_value相同
	}, {
		value_1: '荤菜',
		item_2: ['猪肉']
	}],
	steps: {
		steps_1_value: 'value_1',
		steps_2_item: 'item_2'
	},
	linkageNum: 2, //2 表示为2级联动
	linkage: true //true 表示开启联动
}

//返回数据格式: {"result":{"steps1":{"value_1":"荤菜","item_2":["猪肉"]},"steps2":"猪肉"},"value":[1,0]}

3.1.0.0.5 二级联动示例2：

{ // 二级联动示例2
	type: 'picker-custom',
	title: 'custom-二级联动示例2',
	defaultValue: [0, 0], //初始数据
	onceShowDefaultValue: true, //是否显示初始数据
	itemArray: [{
		value_1: '蔬菜', //value_1变量名需与下方steps.steps_1_value相同
		/*
		可添加多项自定义想要的数据
		*/
		item_2: [{
			name: '青菜',
			value: '青菜' //可添加多项自定义想要的数据
		}] //item_2变量名需与下方steps.steps_1_value相同
	}, {
		value_1: '荤菜',
		item_2: [{
			name: '猪肉',
			value: '猪肉'
		}] //name变量名需与下方steps.steps_2_value相同
	}],
	steps: {
		steps_1_value: 'value_1',
		steps_2_value: 'name',
		steps_2_item: 'item_2'
	},
	linkageNum: 2, //2 表示为2级联动
	linkage: true //true 表示开启联动
}

//返回数据格式: {"result":{"steps1":{"value_1":"蔬菜","item_2":[{"name":"青菜","value":"青菜"}]},"steps2":{"name":"青菜","value":"青菜"}},"value":[0,0]}

3.1.0.0.6 三级联动示例1：

{ // 三级联动示例1
	type: 'picker-custom',
	title: 'custom',
	itemArray: [{
		value_1: '浙江', //value_1变量名需与下方steps.steps_1_value相同
		/*
		可添加多项自定义想要的数据
		*/
		item_2: [{		 //item_2变量名需与下方steps.steps_2_item相同
			value_2: '金华', //value_2变量名需与下方steps.steps_2_value相同
			/*
			可添加多项自定义想要的数据
			*/
			item_3: ['婺城区'] //item_3变量名需与下方steps.steps_3_item相同
		}, {
			value_2: '绍兴',
			item_3: ['越城区']
		}]
	}, {
		value_1: '江苏',
		item_2: [{
			value_2: '南京',
			item_3: ['玄武区'],
		}, {
			value_2: '无锡',
			item_3: ['锡山区']
		}]
	}],
	steps: {
		steps_1_value: 'value_1',
		steps_2_value: 'value_2',
		steps_2_item: 'item_2',
		steps_3_item: 'item_3'
	},
	defaultValue: [1, 0, 0], //初始数据
	onceShowDefaultValue: true, //是否显示初始数据
	linkageNum: 3, //3 表示为3级联动
	linkage: true //true 表示开启联动
}

//返回数据格式: {"result":{"steps1":{"value_1":"江苏","item_2":[{"value_2":"南京","item_3":["玄武区"]},{"value_2":"无锡","item_3":["锡山区"]}]},"steps2":{"value_2":"南京","item_3":["玄武区"]},"steps3":"玄武区"},"value":[1,0,0]}

3.1.0.0.7 三级联动示例2：

{ // 三级联动示例2
	type: 'picker-custom',
	title: 'custom-三级联动示例2',
	itemArray: [{
		value_1: '江西', //value_1变量名需与下方steps.steps_1_value相同
		/*
		可添加多项自定义想要的数据
		*/
		item_2: [{		 //item_2变量名需与下方steps.steps_2_item相同
			value_2: '南昌', //value_2变量名需与下方steps.steps_2_value相同
			/*
			可添加多项自定义想要的数据
			*/
			item_3: [{ 	//item_3变量名需与下方steps.steps_3_item相同
				name: '东湖' ,//name变量名需与下方steps.steps_3_value相同
				/*
				可添加多项自定义想要的数据
				*/
			}]
		}, {
			value_2: '九江',
			item_3: [{
				name: '德安'
			}]
		}]
	}, {
		value_1: '山东',
		item_2: [{
			value_2: '济南',
			item_3: [{
				name: '历下'
			}],
		}, {
			value_2: '青岛',
			item_3: [{
				name: '市南'
			}]
		}]
	}],
	steps: {
		steps_1_value: 'value_1',
		steps_2_value: 'value_2',
		steps_2_item: 'item_2',
		steps_3_value: 'name',
		steps_3_item: 'item_3'
	},
	defaultValue: [1, 0, 0], //初始数据
	onceShowDefaultValue: true, //是否显示初始数据
	linkageNum: 3, //3 表示为3级联动
	linkage: true //true 表示开启联动
}

//返回数据格式: {"result":{"steps1":{"value_1":"山东","item_2":[{"value_2":"济南","item_3":[{"name":"历下"}]},{"value_2":"青岛","item_3":[{"name":"市南"}]}]},"steps2":{"value_2":"济南","item_3":[{"name":"历下"}]},"steps3":{"name":"历下"}},"value":[1,0,0]}

注：picker-cutsom取值时无联动类型返回数组，联动类型返回对象

<span id="picker-custom2">3.1.1 picker-custom2 自定义（同类型优化版,返回数据更简单）</span>

<span id="picker-custom2-steps">3.1.1.0.1 picker-custom2的steps属性说明</span>

3.1.1.0.2 无联动示例1：

{
	type: 'picker-custom2',
	title: 'custom2-无联动示例1',
	itemArray: [
		[0, 1, 2],
		[3, 4, 5]
	],
	defaultValue: [0, 0], //初始数据
	onceShowDefaultValue: true, //是否显示初始数据
}

//返回数据格式: {"result":[0,3],"value":[0,0]}

3.1.1.0.3 无联动示例2：

{
	type: 'picker-custom2',
	title: 'custom2-无联动示例2',
	itemArray: [
		[{
			name: 'a', //name变量名需与下方steps.steps_1_value相同
			value: 'a' //可添加多项自定义想要的数据
		}, {
			name: 'b',
			value: 'b'
		}, {
			name: 'c',
			value: 'c'
		}],
		[{
			name: 'd',
			value: 'd'
		}, {
			name: 'e',
			value: 'e'
		}, {
			name: 'f',
			value: 'f'
		}]
	],
	steps: {
		step_1_value: 'name', //第一级显示的属性名
	},
	defaultValue: [0, 0], //初始数据
	onceShowDefaultValue: true, //是否显示初始数据
}

//返回数据格式: {"result":[{"name":"a","value":"a"},{"name":"d","value":"d"}],"value":[0,0]}

3.1.1.0.4 二级联动示例1：

{
	type: 'picker-custom2',
	title: 'custom2-二级联动示例',
	itemObject: {
		step_1: [{
			"name": "蔬菜"
		}, {
			"name": "荤菜"
		}],
		step_2: [
			['青菜', '白菜'], //对应step_1的江西
			['猪肉', '牛肉'] //对应step_1的山东
		]
	},
	steps: {
		step_1_value: 'name', //第一级显示的属性名
		step_2_value: '', //第二级显示的属性名
		step_3_value: '' //第三级显示的属性名
	},
	defaultValue: [1, 0], //初始数据
	onceShowDefaultValue: true, //是否显示初始数据
	linkageNum: 2, //3 表示为3级联动
	linkage: true //true 表示开启联动
}

//返回数据格式: {"data":{"result":{"steps1":{"name":"荤菜"},"steps2":"牛肉"},"value":[1,1]},"index":19,"type":"custom2"}

3.1.1.0.5 三级联动示例1：

{
	type: 'picker-custom2',
	title: 'custom2-三级联动示例',
	itemObject: {
		step_1: [{
			"name": "江西"
		}, {
			"name": "山东"
		}],
		step_2: [
			['南昌', '九江'], //对应step_1的江西
			['济南', '青岛'] //对应step_1的山东
		],
		step_3: [
			[
				[ //对应step_2的南昌
					'东湖'
				],
				[ //对应step_2的九江
					'德安'
				]
			],
			[
				[ //对应step_2的济南
					'历下',
				],
				[ //对应step_2的青岛
					'市南',
				]
			]
		]
	},
	steps: {
		step_1_value: 'name', //第一级显示的属性名
		step_2_value: '', //第二级显示的属性名
		step_3_value: '' //第三级显示的属性名
	},
	defaultValue: [1, 0, 0], //初始数据
	onceShowDefaultValue: true, //是否显示初始数据
	linkageNum: 3, //3 表示为3级联动
	linkage: true //true 表示开启联动
}

//返回数据格式: {"data":{"result":{"steps1":{"name":"山东"},"steps2":"青岛","steps3":"市南"},"value":[1,1,0]},"index":20,"type":"custom2"}

注：picker-cutsom取值时无联动类型返回数组，联动类型返回对象

<span id="picker-provincialStreet">3.1.2 picker-provincialStreet 省市区乡镇街道选择</span>

乡镇街道数据文件完整的需1.5MB左右，目前使用的是600KB，只有街道name无code，若需完整街道数据文件，可以找我拿，甚至自定义生成省市区街道数据格式的方法也可以找我拿，若需求多，可上传为另一个插件

注：picker-provincialStreet取值时返回对象，可根据需求修改， 若无此类型需求并且嫌此组件体积过大可将乡镇街道数据文件(QuShe-inputs/mpvue-citypicker/city-data/streets.js)删除，并注释相关import代码(QuShe-inputs/mpvue-citypicker/picker-provincialStreet.vue)！

<span id="text">3.1.3 text 用于展示信息</span>

注：text类型在取值时不会判断该项，但是会占一个位子

<span id="editor">3.1.4 editor 官方editor组件 支持度随官方editor （v6.9新增）</span>

注：editor类型是唯一的，只能有一个, 并且只在APP、微信小程序中的自定义组件模式下有效，需传入usingComponents属性为true, editor不支持动态增删

<span id="infinitePics">3.1.5 infinitePics 无限上传图片（v6.9新增）</span>

注：支持多选择，加强大图预览

4.其他

4.0.1 固定变量名模式(v6.5新增)

  在固定变量名模式下，inputs动态改变长度时，不会对已有值的项进行初始化
所谓固定变量名模式就是inputsArray中的所有项都填写唯一的自定义变量名属性--variableName
  经测试，在自定义组件模式下，inputsArray使用unshift、splice等会改变长度的方法时，switch能够监听到inputsArray的长度改变，而模板模式不能监听到长度的改变，只有对inputsArray重新赋值才能监听到长度的改变
  而若switch能监听到inputsArray长度改变时，可以去除一些无用的数据,故若使用模板模式编译则对inputsArray长度变化时，建议对inputsArray重新赋值
  示例见示例项目中的动态增删inputsArray示例
  `editor不支持动态增删`

inputs代码示例

html中使用

<template>
  <view>
	<inputs 
	id="inputs" 
	ref="inputs" 
	:inputsArray="inputsArray" 
	activeName="获取输入" 
	:ruleSet="ruleSet" 
	ifRule 
	ifCode 
	@chaildOpenEvent="openWin"
	@activeFc="activeFc" 
	:onLoadData="onLoadData" 
	animationType="rotate3d-fade" 
	:animationDuration=".2" 
	submitReSet
	:buttonStyle="buttonStyle" 
	:inputDebounceSet="inputDebounceSet" 
	:focusStyle="focusStyle" 
	:fontSizeScaleSet="fontSizeScaleSet"
	:verifyStatusSet="verifyStatusSet"
	:usingComponents="usingComponents"
	@inputsChange="inputsChange($event)"/>

    

    <button type="primary" @tap="setfocus1()" style="margin-top: 50px;">设置textarea focus</button>
		<button type="primary" @tap="setfocus2()" style="margin-top: 5px;">设置input focus</button>
		<button type="primary" @tap="setInputsValue1()" style="margin-top: 5px;">外部指定inputs内部值示例1</button>
		<button type="primary" @tap="setInputsValue2()" style="margin-top: 5px;">外部指定inputs内部值示例2</button>
		<button type="primary" @tap="setInputsValue3()" style="margin-top: 5px;">外部指定inputs内部值示例3</button>
		<button type="primary" @tap="setInputsValue4()" style="margin-top: 5px;">外部指定inputs内部值示例4</button>
		<button type="primary" @tap="openTest()" style="margin-top: 5px;">打开test页面</button>
		<button type="primary" @tap="refActiveFc()" style="margin-top: 5px;">外部获取输入</button>
  </view>
</template>

JS中引入、注册并使用组件

<script>
	import inputs from "@/components/QuShe-inputs/inputs.vue";
	export default {
		data() {
			return {
				usingComponents: true,
				verifyStatusSet: {
					inputsId: 'inputs', // inputs组件的id属性值,自定义组件模式必填
					openVerifyStatus: true,
					openScroll: true,
					openChangeBorderColor: true,
					errNullColor: 'rgba(255,255,0,.7)',
					verifyErrorColor: 'rgba(245,16,92,.7)'
				},
				fontSizeScaleSet: { //inputs内的字体大小系数设置(字体大小为屏幕宽高度以此系数)
					allScale: .018,
					titleScale: .018,
					contentScale: .017
				},
				focusStyle: { //控制input或textarea类型focus或blur时的边框颜色
					focusBorderStyle: '#999999',
					blurBorderStyle: '#f8f8f8'
				},
				inputDebounceSet: { //input、textarea防抖设置
					openInputDebounce: true,
					delay: 500
				},
				"buttonStyle": { //按钮样式
					"activeButton": "background-color: #c0ebd7;border-radius: 30px;box-shadow: 2px 2px 1px 1px #c0ebd7;", //主按钮样式
					"changeButton": "background-color: #c0ebd7;border-radius: 30px;box-shadow: 2px 2px 1px 1px #c0ebd7;", //picker类型更改按钮样式
					"selectButton": "background-color: #c0ebd7;border-radius: 30px;box-shadow: 2px 2px 1px 1px #c0ebd7;", //picker类型选择按钮样式
					"confirmButton": "background-color: #c0ebd7;border-radius: 30px;box-shadow: 2px 2px 1px 1px #c0ebd7;", //picker类型弹出框中确定按钮样式
					"getcodeButton": "background-color: #c0ebd7;border-radius: 30px;box-shadow: 2px 2px 1px 1px #c0ebd7;" //获取验证码按钮样式
				},
				"inputsArray": [{
						"segmentationTitle": "展示信息", //分割大标题
						"border_top": "1px solid #f2f2f2", //上划线
						"type": "text",
						"title": "text示例",
						"content": "展示text信息展示text信息展示text信息展示text信息展示text信息展示text信息",
						"ellipsis": true
					}, {
						"segmentationTitle": "表单组件", //分割大标题
						"type": "slider", //类型
						"title": "slider", //标题
						"defaultValue": 50, //默认值
						"min": 0,
						"max": 100,
						"show_value": true,
						"disabled": false,
						"activeColor": "#c0ebd7",
						"step": 1,
						"border_top": "1px solid #f2f2f2", //上划线
						"variableName": "slider" //自定义变量名
					},
					{
						"type": "textarea",
						"title": "textarea",
						"defaultValue": "今天也要加油鸭~" //默认值
					},
					{
						"type": "switch",
						"title": "switch",
						"color": "#c0ebd7",
						"defaultValue": true,
						"scale": '.8', //比例大小
						"variableName": "switch" //自定义变量名
					},
					{
						"title": "radio",
						"type": "radio",
						"itemArray": [{ //子循环数组
							"name": "aa",
							"value": "aa",
							"defaultValue": true
						}, {
							"name": "bb",
							"value": "bb"
						}],
						"color": "#c0ebd7",
						"scale": '.8', //比例大小
					},
					{
						"title": "checkbox",
						"type": "checkbox",
						"itemArray": [{ //子循环数组
							"name": "a",
							"value": "a",
							"defaultValue": true
						}, {
							"name": "b",
							"value": "b",
							// "defaultValue": true,
							"disabled": true
						}, {
							"name": "c",
							"value": "c",
							"defaultValue": true
						}],
						"variableName": "checkbox",
						"scale": '.8', //比例大小
						"color": "#c0ebd7"
					}, {
						"title": "内置正则校验Email",
						"verifyType": "Email", // 内置正则校验
						"defaultValue": "494843897@qq"
					}, {
						"title": "内置过滤函数",
						"filterType": "twoDecimalPlaces",
						"ignore": true,
						"placeholder": "限制输入小数点后一位"
					}, {
						"title": "手机号校验",
						verifyFc: function(value) {
							if (/^[1][3,4,5,7,8][0-9]{9}$/.test(value))
								return true;
							return false;
						},
						"verifyErr": "手机号校验错误",
						"ignore": true
					}, {
						"title": "input",
						"ignore": true, //是否可忽略该值(判断时此项值可以为空)
						"defaultValue": "今天也要加油鸭~",
						"tapClear": true, //input一键清除功能
						"password": true, //input密码类型
						"icon": "search", //input左边图标
						"iconColor": "#c0ebd7", //input图标颜色
						filterFc: function(value) { //input值过滤函数
							//自定义过滤函数
							value = "filter过滤后的值";
							return value;
						},
						"variableName": "input" //自定义变量名
					}, {
						"segmentationTitle": "上传图片",
						"type": "pics",
						"title": "pics",
						"itemArray": [{
							"title": "测试1",
							"ignore": true
						}, {
							"title": "测试2",
							"ignore": true
						}, {
							"title": "测试3",
							"ignore": true
						}],
						"variableName": "pic",
						"border_top": "1px solid #f2f2f2",
						"clearColor": "#c0ebd7",
						"customId": "自定义一标识"
					},
					{
						"segmentationTitle": "picker类型",
						"border_top": "1px solid #f2f2f2",
						"type": "picker-provincialStreet",
						"title": "provincialStreet",
						"onceShowDefaultValue": true, //初始化时显示初始值
						"variableName": "provincialStreet"
					},
					{
						"type": "picker-date",
						"title": "date"
					},
					{
						"type": "picker-city",
						"title": "city",
						"defaultValue": [10, 6, 0],
						"onceShowDefaultValue": true,
						"variableName": "city"
					},
					{ // 无联动示例1
						"segmentationTitle": "picker-custom示例",
						"border_top": "1px solid #f2f2f2",
						"type": "picker-custom",
						"title": "custom-无联动示例1",
						"itemArray": [
							[0, 1, 2],
							[3, 4, 5]
						],
						"defaultValue": [0, 0], //初始数据
						"onceShowDefaultValue": true, //是否显示初始数据
					},
					{ // 无联动示例2
						"type": "picker-custom",
						"title": "custom-无联动示例2",
						"itemArray": [
							[{
								"name": "a", //name变量名需与下方steps.steps_1_value相同
								"value": "a" //可添加多项自定义想要的数据
							}, {
								"name": "b",
								"value": "b"
							}, {
								"name": "c",
								"value": "c"
							}],
							[{
								"name": "d",
								"value": "d"
							}, {
								"name": "e",
								"value": "e"
							}, {
								"name": "f",
								"value": "f"
							}]
						],
						"defaultValue": [0, 0], //初始数据
						"onceShowDefaultValue": true, //是否显示初始数据
						"steps": {
							"steps_1_value": "name"
						}
					},
					{ // 二级联动示例1
						"type": "picker-custom",
						"title": "custom-二级联动示例1",
						"defaultValue": [1, 0], //初始数据
						"onceShowDefaultValue": true, //是否显示初始数据
						"itemArray": [{
							"value_1": "蔬菜", //value_1变量名需与下方steps.steps_1_value相同
							/*
							可添加多项自定义想要的数据
							*/
							"item_2": ["青菜"] //item_2变量名需与下方steps.steps_2_item相同
						}, {
							"value_1": "荤菜",
							"item_2": ["猪肉"]
						}],
						"steps": {
							"steps_1_value": "value_1",
							"steps_2_item": "item_2"
						},
						"linkageNum": 2, //2 表示为2级联动
						"linkage": true //true 表示开启联动
					},
					{ // 二级联动示例2
						"type": "picker-custom",
						"title": "custom-二级联动示例2",
						"defaultValue": [0, 0], //初始数据
						"onceShowDefaultValue": true, //是否显示初始数据
						"itemArray": [{
							"value_1": "蔬菜", //value_1变量名需与下方steps.steps_1_value相同
							/*
							可添加多项自定义想要的数据
							*/
							"item_2": [{ //item_2变量名需与下方steps_2_item相同
								"name": "青菜", //name变量名需与下方steps.steps_2_value相同
								"value": "青菜" //可添加多项自定义想要的数据
							}]
						}, {
							"value_1": "荤菜",
							"item_2": [{
								"name": "猪肉",
								"value": "猪肉"
							}]
						}],
						"steps": {
							"steps_1_value": "value_1",
							"steps_2_value": "name",
							"steps_2_item": "item_2"
						},
						"linkageNum": 2, //2 表示为2级联动
						"linkage": true //true 表示开启联动
					},
					{ // 三级联动示例1
						"type": "picker-custom",
						"title": "custom-三级联动示例1",
						"itemArray": [{
							"value_1": "浙江", //value_1变量名需与下方steps.steps_1_value相同
							/*
							可添加多项自定义想要的数据
							*/
							"item_2": [{ //item_2变量名需与下方steps.steps_2_item相同
								"value_2": "金华", //value_2变量名需与下方steps.steps_2_value相同
								/*
								可添加多项自定义想要的数据
								*/
								"item_3": ["婺城区"] //item_3变量名需与下方steps.steps_3_item相同
							}, {
								"value_2": "绍兴",
								"item_3": ["越城区"]
							}]
						}, {
							"value_1": "江苏",
							"item_2": [{
								"value_2": "南京",
								"item_3": ["玄武区"],
							}, {
								"value_2": "无锡",
								"item_3": ["锡山区"]
							}]
						}],
						"steps": {
							"steps_1_value": "value_1",
							"steps_2_value": "value_2",
							"steps_2_item": "item_2",
							"steps_3_item": "item_3"
						},
						"defaultValue": [1, 0, 0], //初始数据
						"onceShowDefaultValue": true, //是否显示初始数据
						"linkageNum": 3, //3 表示为3级联动
						"linkage": true //true 表示开启联动
					},
					{ // 三级联动示例2
						"type": "picker-custom",
						"title": "custom-三级联动示例2",
						"itemArray": [{
							"value_1": "江西", //value_1变量名需与下方steps.steps_1_value相同
							/*
							可添加多项自定义想要的数据
							*/
							"item_2": [{ //item_2变量名需与下方steps.steps_2_item相同
								"value_2": "南昌", //value_2变量名需与下方steps.steps_2_value相同
								/*
								可添加多项自定义想要的数据
								*/
								"item_3": [{ //item_3变量名需与下方steps.steps_3_item相同
									"name": "东湖", //name变量名需与下方steps.steps_3_value相同
									/*
									可添加多项自定义想要的数据
									*/
								}]
							}, {
								"value_2": "九江",
								"item_3": [{
									"name": "德安"
								}]
							}]
						}, {
							"value_1": "山东",
							"item_2": [{
								"value_2": "济南",
								"item_3": [{
									"name": "历下"
								}],
							}, {
								"value_2": "青岛",
								"item_3": [{
									"name": "市南"
								}]
							}]
						}],
						"steps": {
							"steps_1_value": "value_1",
							"steps_2_value": "value_2",
							"steps_2_item": "item_2",
							"steps_3_value": "name",
							"steps_3_item": "item_3"
						},
						"defaultValue": [1, 0, 0], //初始数据
						"onceShowDefaultValue": true, //是否显示初始数据
						"linkageNum": 3, //3 表示为3级联动
						"linkage": true //true 表示开启联动
					}, {
						"type": "picker-custom2",
						"title": "custom2-无联动示例1",
						"itemArray": [
							[0, 1, 2],
							[3, 4, 5]
						],
						"steps": {
							"step_1_value": "", //第一级显示的属性名
							"step_2_value": "", //第二级显示的属性名
							"step_3_value": "" //第三级显示的属性名
						},
						"defaultValue": [0, 0], //初始数据
						"onceShowDefaultValue": true, //是否显示初始数据
					}, {
						"type": "picker-custom2",
						"title": "custom2-无联动示例2",
						"itemArray": [
							[{
								"name": "a", //name变量名需与下方steps.steps_1_value相同
								"value": "a" //可添加多项自定义想要的数据
							}, {
								"name": "b",
								"value": "b"
							}, {
								"name": "c",
								"value": "c"
							}],
							[{
								"name": "d",
								"value": "d"
							}, {
								"name": "e",
								"value": "e"
							}, {
								"name": "f",
								"value": "f"
							}]
						],
						"steps": {
							"step_1_value": "name", //第一级显示的属性名
							"step_2_value": "", //第二级显示的属性名
							"step_3_value": "" //第三级显示的属性名
						},
						"defaultValue": [0, 0], //初始数据
						"onceShowDefaultValue": true, //是否显示初始数据
					},
					{
						"type": "picker-custom2",
						"title": "custom2-二级联动示例",
						"itemObject": {
							"step_1": [{
								"name": "蔬菜",
								"value": "001"
							}, {
								"name": "荤菜",
								"value": "002"
							}],
							"step_2": [
								["青菜", "白菜"], //对应step_1的蔬菜
								["猪肉", "牛肉"] //对应step_1的荤菜
							]
						},
						"steps": {
							"step_1_value": "name", //第一级显示的属性名
							"step_2_value": "", //第二级显示的属性名
							"step_3_value": "" //第三级显示的属性名
						},
						"defaultValue": [1, 0], //初始数据
						"onceShowDefaultValue": true, //是否显示初始数据
						"linkageNum": 2, //3 表示为3级联动
						"linkage": true //true 表示开启联动
					},
					{
						"type": "picker-custom2",
						"title": "custom2-三级联动示例",
						"itemObject": {
							"step_1": [{
								"name": "江西"
							}, {
								"name": "山东"
							}],
							"step_2": [
								["南昌", "九江"], //对应step_1的江西
								["济南", "青岛"] //对应step_1的山东
							],
							"step_3": [
								[
									[ //对应step_2的南昌
										"东湖"
									],
									[ //对应step_2的九江
										"德安"
									]
								],
								[
									[ //对应step_2的济南
										"历下",
									],
									[ //对应step_2的青岛
										"市南",
									]
								]
							]
						},
						"steps": {
							"step_1_value": "name", //第一级显示的属性名
							"step_2_value": "", //第二级显示的属性名
							"step_3_value": "" //第三级显示的属性名
						},
						"defaultValue": [1, 0, 0], //初始数据
						"onceShowDefaultValue": true, //是否显示初始数据
						"linkageNum": 3, //3 表示为3级联动
						"linkage": true //true 表示开启联动
					}, {
						"title": "手机号",
						"phone": true,
						"defaultValue": "13305679845",
						"customId": "验证码自定义标识"
					}
				],
				"ruleSet": {
					"color": "#c0ebd7",
					"checkbox_color": "#c0ebd7",
					"itemArray": [{
						"name": "某规则",
						"value": "aa"
					}],
				},
				"onLoadData": "data_",
			}
		},
		methods: {
			openWin(value) {
				//打开规则或协议页
				//若有一个以上的rule，则根据value打开规则页面
				console.log(value);
			},
			activeFc(res) {
				uni.showToast({
					title: "获取输入成功"
				})
				console.log(JSON.stringify(res));
			},
			openTest() {
				uni.navigateTo({
					url: '../test/test'
				})
			},
			setfocus1() { //设置focus示例1
				this.$refs.inputs.setFocus(2, true);
			},
			setfocus2() { //设置focus示例2
				this.$refs.inputs.setFocus((inputsArray) => {
					let i = inputsArray.findIndex((item) => { //findIndex方法 返回符合测试条件的第一个数组元素索引，如果没有符合条件的则返回 -1
						return item.title === '手机号校验';
					})
					return i;
					//可以不使用findIndex方法，但是必须return一个Number
				}, true);
			},
			setInputsValue1() {
				this.$refs.inputs.setInputsValue(3, false);
			},
			setInputsValue2() {
				this.$refs.inputs.setInputsValue('textarea', 'setInputsValue示例2所设置的值');
			},
			setInputsValue3() {
				this.$refs.inputs.setInputsValue((inputsArray) => {
					let i = inputsArray.findIndex(item => item.title === 'textarea') //findIndex方法 返回符合测试条件的第一个数组元素索引，如果没有符合条件的则返回 -1
					return i;
					//可以不使用findIndex方法，但是必须return一个Number
				}, 'setInputsValue示例3所设置的值');
			},
			setInputsValue4() {
				this.$refs.inputs.setInputsValue('notFind', 'setInputsValue示例4所设置的值', ()=>{
					uni.showToast({
						title: '错误回调：找不到相应的index哦',
						icon: 'none'
					})
				});
			},
			refActiveFc() {
				console.log('触发绑定的activeFc方法');
				this.$refs.inputs.activeFc();
			},
			inputsChange(res) {
				console.log('pickerChange绑定事件回调:' + JSON.stringify(res));
			}
		},
		components: {
			inputs
		}
	}
</script>

历次更新说明