# Button按钮

Button按钮:可自定义宽高,设置字体大小,阴影,圆角,镂空等,支持表单提交。

# 示例代码

	<tui-button margin="0 0 30rpx 0" :size="34" bold>页面主操作</tui-button>
	<tui-button margin="0 0 30rpx 0" disabled loading :size="34" bold>页面主操作 Loading</tui-button>
	<tui-button margin="0 0 30rpx 0" disabled disabledGray :size="34" bold>页面主操作 disabled</tui-button>
	<tui-button margin="0 0 30rpx 0" :size="34" bold type="gray-primary">页面主操作</tui-button>
	<tui-button margin="0 0 30rpx 0" :size="34" bold type="gray-danger">页面次要操作</tui-button>
	<tui-button margin="0 0 30rpx 0" :size="34" bold type="gray-green">页面次要操作</tui-button>
	<tui-button margin="0 0 30rpx 0" :size="34" bold type="gray-warning">页面次要操作</tui-button>
	<tui-button margin="0 0 30rpx 0" :size="34" bold type="warning">页面次要操作</tui-button>
	<tui-button margin="0 0 30rpx 0" :size="34" bold type="green">页面次要操作</tui-button>
	<tui-button margin="0 0 30rpx 0" :size="34" bold type="danger">页面次要操作</tui-button>
	<tui-button margin="0 0 30rpx 0" :size="34" bold type="black">页面次要操作</tui-button>
	<tui-button margin="0 0 30rpx 0" :size="34" bold type="white">页面次要操作</tui-button>
	<view class="tui-btn__box">
		<tui-button width="372rpx" height="84rpx" :size="34" bold type="green" open-type="contact">打开客服会话</tui-button>
	</view>
	<view class="tui-btn__box">
		<tui-button width="372rpx" height="84rpx" :size="34" bold type="green" open-type="share">触发用户转发</tui-button>
	</view>
	<view class="tui-btn__box">
		<tui-button width="372rpx" height="84rpx" :size="34" bold type="green" open-type="getPhoneNumber" @getphonenumber="handleGetPhoneNumber">获取用户手机号</tui-button>
	</view>
	<view class="tui-btn__box">
		<tui-button width="372rpx" height="84rpx" :size="34" bold type="green" open-type="getUserInfo">获取用户信息</tui-button>
	</view>
	<view class="tui-btn__box">
		<tui-button width="372rpx" height="84rpx" :size="34" bold type="green" open-type="openSetting">打开设置权限页</tui-button>
	</view>
	<!-- #ifndef H5 -->
	<view class="tui-btn__box">
		<tui-button width="372rpx" height="84rpx" :size="34" bold type="green" open-type="feedback">打开意见反馈</tui-button>
	</view>
	<!-- #endif -->

# 组件样式

... 此处省略n行

# 脚本说明

# props

参数 类型 描述 默认值
type String 样式类型,可传入[primary, white, danger, warning, green,blue, gray,black] primary
shadow Boolean 否加阴影 false
width String 宽度 单位rpx或 % 100%
height String 高度 单位rpx 96rpx
size Number 字体大小 单位rpx 32
margin String margin调整与其他元素之间间距 0
shape String 形状 circle(圆角), square(默认方形),rightAngle(平角) square
plain Boolean 是否镂空 false
link Boolean link样式,去掉边框,结合plain一起使用 false
disabled Boolean 是否禁用 false
disabledGray Boolean 禁用后背景是否为灰色 (非空心button生效) false
loading loading 是否展示loading false
formType String 参考官方formType ""
openType String 参考官方openType ""
index [Number, String] 索引 0
preventClick Boolean 是否阻止用户重复点击,设为true则200ms内只执行一次点击事件,默认false false

# methods

名称 描述
@getuserinfo 参考官方@getuserinfo
@contact 参考官方@contact
@getphonenumber 参考官方@getphonenumber
@error 参考官方@error
@click 按钮点击事件,设置formType时无需使用

# 示例

# H5预览地址

https://www.thorui.cn/h5/#/pages/extend/button/button

# H5二维码

# 小程序二维码