uni-app表单组件一

button（按钮）

常用属性介绍：

size属性（按钮的大小）：

值	说明
default	默认大小
mini	小尺寸

显示效果：

type（按钮的样式类型）

值	说明
default（默认）	白色
warn	红色（type属性为warn 一般用于需要慎重点击的按钮）
primary	微信小程序为绿色，App、H5、百度小程序、支付宝小程序为蓝色，字节跳动小程序为红色，QQ小程序为浅蓝

显示效果：（此处为微信小程序）

plain （按钮是否镂空，背景色透明）

值	说明
false（默认）	不镂空
true	镂空

plain属性为false的时候可以省略
显示效果

disabled（是否禁用）
App-nvue 平台，在 ios 上为雪花，Android上为圆圈

值	说明
false（默认）	不禁用
true	禁用

disabled属性为false的时候可以省略
显示效果：（此时type为default‘默认’；你也可以尝试其它）

loading（名称前是否带loading图标）

值	说明
false（默认）	不带loading图标
true	带loading图标

显示效果：（此时type为‘primary ；你也可以尝试其它）

form-type（用于

组件，点击分别会触发 组件的 submit/reset 事件）

值	说明
submit （默认）	提交表单
reset	重置表单

open-type（开放能力）

值	说明	平台
feedback	打开“意见反馈”页面，用户可提交反馈内容并上传日志	App、微信小程序、QQ小程序
share	触发用户转发	微信小程序、百度小程序、支付宝小程序、字节跳动小程序、QQ小程序
getUserInfo	获取用户信息，可以从@getuserinfo回调中获取到用户信息，包括手机号、头像、昵称等信息	微信小程序、百度小程序、QQ小程序
contact	打开客服会话，如果用户在会话中点击消息卡片后返回应用，可以从 @contact 回调中获得具体信息	微信小程序、百度小程序
getPhoneNumber	获取用户手机号，可以从@getphonenumber回调中获取到用户信息	微信小程序、百度小程序、字节跳动小程序
launchApp	打开APP，可以通过app-parameter属性设定向APP传的参数	微信小程序、QQ小程序
openSetting	打开授权设置页	微信小程序、百度小程序
getAuthorize	支持小程序授权	支付宝小程序
contactShare	分享到通讯录好友	支付宝小程序
lifestyle	关注生活号	支付宝小程序
openGroupProfile	呼起QQ群资料卡页面，可以通过group-id属性设定需要打开的群资料卡的群号，同时manifest中必须配置groupIdList	QQ小程序基础库1.4.7版本+

以上表格内容来自uni-app官网button组件
以下button组件的属性可自行尝试

属性名	类型	默认值	说明	生效时机	平台差异说明
hover-class	String	button-hover	指定按钮按下去的样式类。当 hover-class=“none” 时，没有点击态效果		App-nvue 平台暂不支持
hover-start-time	Number	20	按住后多久出现点击态，单位毫秒
hover-stay-time	Number	70	手指松开后点击态保留时间，单位毫秒
app-parameter	String		打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效	open-type=“launchApp”	微信小程序、QQ小程序
hover-stop-propagation	boolean	false	指定是否阻止本节点的祖先节点出现点击态		微信小程序
lang	string	‘en’	指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。		微信小程序
session-from	string		会话来源，open-type="contact"时有效	open-type=“contact”	微信小程序
send-message-title	string	当前标题	会话内消息卡片标题，open-type="contact"时有效	open-type=“contact”	微信小程序
send-message-path	string	当前分享路径	会话内消息卡片点击跳转小程序路径，open-type="contact"时有效	open-type=“contact”	微信小程序
send-message-img	string		截图 会话内消息卡片图片，open-type="contact"时有效	open-type=“contact”	微信小程序
show-message-card	boolean	false	是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，open-type="contact"时有效	open-type=“contact”	微信小程序
@getphonenumber	Handler		获取用户手机号回调	open-type=“getPhoneNumber”	微信小程序
@getuserinfo	Handler		用户点击该按钮时，会返回获取到的用户信息，从返回参数的detail中获取到的值同uni.getUserInfo	open-type=“getUserInfo”	微信小程序
@error	Handler		当使用开放能力时，发生错误的回调	open-type=“launchApp”	微信小程序
@opensetting	Handler		在打开授权设置页并关闭后回调	open-type=“openSetting”	微信小程序
@launchapp	Handler		打开 APP 成功的回调	open-type=“launchApp”	微信小程序

以下是我的测试代码（仅供参考）：

checkbox-group（多项选择器）

内部由多个 checkbox 组成。

属性名	类型	说明
@change	EventHandle	中选中项发生改变是触发 change 事件，detail = {value:[选中的checkbox的value的数组]}

checkbox（多选项目）

属性名	类型	默认值	说明
value	string		标识，选中时触发 <checkbox-group> 的 change 事件，并携带 的 value。
disabled	Boolean	false	是否禁用
checked	Boolean	false	当前是否选中，可用来设置默认选中
color	Color		checkbox的颜色，同css的color

checked属性

	
			
					选中状态
			
			
					未选中状态
			
	

选中与未选中状态在微信小程序中的样式：

disabled属性

		
				未选中状态
		
		
				禁用状态
		

禁用与未禁用状态在微信小程序中的样式：

color属性

		
				颜色改变
		

颜色在微信小程序中：

我测试的全部代码（包括value属性）

测试效果（微信小程序）

注意

• checkbox的默认颜色，在不同平台不一样。微信小程序是绿色的，头条小程序为红色，其他平台是蓝色的。更改颜色使用color属性。
• 如需调节checkbox大小，可通过css的scale方法调节，如缩小到70%style="transform:scale(0.7)"

form（表单）

将组件内的用户输入的 提交

属性名	类型	说明	平台差异
report-submit	Boolean	是否返回 formId 用于发送模板消息	微信小程序、支付宝小程序
report-submit-timeout	number	等待一段时间（毫秒数）以确认 formId 是否生效。如果未指定这个参数，formId 有很小的概率是无效的（如遇到网络失败的情况）。指定这个参数将可以检测 formId 是否有效，以这个参数的时间作为这项检测的超时时间。如果失败，将返回 requestFormId:fail 开头的 formId	微信小程序2.6.2
@submit	EventHandle	携带 form 中的数据触发 submit 事件，event.detail = {value : {‘name’: ‘value’} , formId: ‘’}，report-submit 为 true 时才会返回 formId
@reset	EventHandle	表单重置时会触发 reset 事件

测试代码：

测试结果（微信小程序）

当选择了选项一并提交时：

点击确定便会将你所选择的打印在控制台
点击重置将恢复未选择状态

input（输入框）

属性名	类型	说明	平台差异
value	String	输入框的初始内容
type	String	input 的类型
password	Boolean（默认false）	是否是密码类型
placeholder	String	输入框为空时占位符
placeholder-style	String	指定 placeholder 的样式
placeholder-class	String	“input-placeholder” 指定 placeholder 的样式类
disabled	Boolean（默认false）	是否禁用
maxlength	Number （默认140）	最大输入长度，设置为 -1 的时候不限制最大长度
cursor-spacing	Number （默认0）	指定光标与键盘的距离，单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离	App、微信小程序、百度小程序、QQ小程序
focus	Boolean （默认false）	获取焦点	在 H5 平台能否聚焦以及软键盘是否跟随弹出，取决于当前浏览器本身的实现。
confirm-type	String （默认done）	设置键盘右下角按钮的文字，仅在 type=“text” 时生效
confirm-hold	Boolean （默认false）	点击键盘右下角按钮时是否保持键盘不收起	App、微信小程序、支付宝小程序、百度小程序、QQ小程序
cursor	Number	指定focus时的光标位置
selection-start	Number （默认-1）	光标起始位置，自动聚集时有效，需与selection-end搭配使用
selection-end	Number （默认-1）	光标结束位置，自动聚集时有效，需与selection-start搭配使用
adjust-position	Boolean （默认true）	键盘弹起时，是否自动上推页面	App（softinputMode 为 adjustResize 时无效）、微信小程序、百度小程序、QQ小程序
hold-keyboard	Boolean （默认false）	focus(获得焦点)时，点击页面的时候不收起键盘	微信小程序2.8.2
@input	EventHandle	当键盘输入时，触发input事件，event.detail = {value}
@focus	EventHandle	输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度	仅微信小程序、App（2.2.3+） 、QQ小程序支持 height
@blur	EventHandle	输入框失去焦点时触发，event.detail = {value: value}
@confirm	EventHandle	点击完成按钮时触发，event.detail = {value: value}
@keyboardheightchange	EventHandle	键盘高度发生变化的时候触发此事件，event.detail = {height: height, duration: duration}	微信小程序2.7.0

type 有效值

• text 文本输入键盘
• number 数字输入键盘 注意iOS的vue页面弹出的数字键盘并非9宫格方式
• idcard 身份证输入键盘 支持微信、支付宝、百度、QQ小程序
• digit 带小数点的数字键盘 支持App的nvue页面、微信、支付宝、百度、头条、QQ小程序
  斜体样式