button | uni-app-x

# button

组件类型：UniButtonElement

按钮

# 兼容性

Web	微信小程序	Android	iOS
4.0	4.41	3.9	4.11

# 属性

名称

类型

默认值

兼容性

描述

disabled

boolean

false

是否禁用

hover-class

string(string.ClassString)

"button-hover"

指定按下去的样式类。当 hover-class="none" 时，没有点击态效果

hover-stop-propagation

boolean

指定是否阻止本节点的祖先节点出现点击态

hover-start-time

number

按住后多久出现点击态，单位毫秒

hover-stay-time

number

手指松开后点击态保留时间，单位毫秒

size

string

"default"

按钮的大小

合法值

兼容性

描述

default

默认大小

mini

小尺寸

type

string

"default"

按钮的样式类型

合法值

兼容性

描述

default

白色

primary

蓝色

warn

红色

plain

boolean

false

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

boolean

名称前是否带 loading 图标

form-type

string

用于 form 组件，点击分别会触发 form 组件的 submit/reset 事件

合法值

兼容性

描述

submit

提交表单

reset

重置表单

open-type

string

开放能力

合法值

兼容性

描述

agreePrivacyAuthorization

用户同意隐私协议按钮。用户点击一次此按钮后，所有已声明过的隐私接口可以正常调用。

feedback

打开“意见反馈”页面，用户可提交反馈内容并上传日志

触发用户转发

getUserInfo

获取用户信息，可以从getuserinfo回调中获取到用户信息

contact

打开客服会话，如果用户在会话中点击消息卡片后返回应用，可以从 contact 回调中获得具体信息

getPhoneNumber

获取用户手机号，可以从getphonenumber回调中获取到用户信息

launchApp

打开APP，可以通过app-parameter属性设定向APP传的参数

openSetting

打开授权设置页

chooseAvatar

获取用户头像，可以从chooseavatar回调中获取到头像信息

getAuthorize

支持小程序授权

lifestyle

关注生活号

contactShare

分享到通讯录好友

openGroupProfile

呼起QQ群资料卡页面，可以通过group-id属性设定需要打开的群资料卡的群号，同时manifest.json中必须配置groupIdList

openGuildProfile

呼起频道页面，可以通过guild-id属性设定需要打开的频道ID

openPublicProfile

打开公众号资料卡，可以通过public-id属性设定需要打开的公众号资料卡的号码，同时manifest.json中必须配置publicIdList

shareMessageToFriend

在自定义开放数据域组件中,向指定好友发起分享据

addFriend

添加好友，对方需要通过该小程序进行授权，允许被加好友后才能调用成功用户授权

addColorSign

添加彩签，点击后添加状态有用户提示，无回调

addGroupApp

添加群应用（只有管理员或群主有权操作），添加后给button绑定addgroupapp事件接收回调数据

addToFavorites

收藏当前页面，点击按钮后会触发Page.onAddToFavorites方法

chooseAddress

选择用户收货地址，可以从chooseaddress回调中获取到用户选择的地址信息

chooseInvoiceTitle

选择用户发票抬头，可以从chooseinvoicetitle回调中获取到用户选择发票抬头信息

订阅类模板消息，需要用户授权才可发送

favorite

触发用户收藏

watchLater

触发用户稍后再看

openProfile

触发打开用户主页

liveActivity

getRealtimePhoneNumber

lang

string

指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。

合法值

兼容性

描述

zh_CN

zh_TW

session-from

string

会话来源

send-message-title

string

会话内消息卡片标题

send-message-path

string

会话内消息卡片点击跳转应用路径

send-message-img

string

会话内消息卡片图片

show-message-card

boolean

显示会话内消息卡片

app-parameter

string

打开 APP 时，向 APP 传递的参数

group-id

string

打开群资料卡时，传递的群号

guild-id

string

打开频道页面时，传递的频道号

public-id

string

打开公众号资料卡时，传递的号码

@getuserinfo

(event: UniEvent) => void

用户点击该按钮时，会返回获取到的用户信息，回调的detail数据与uni.getUserInfo返回的一致

@contact

(event: UniEvent) => void

客服消息回调

@getphonenumber

(event: UniEvent) => void

获取用户手机号回调

@error

(event: UniEvent) => void

当使用开放能力时，发生错误的回调

@opensetting

(event: UniEvent) => void

在打开授权设置页后回调

@launchapp

(event: UniEvent) => void

打开 APP 成功的回调

@chooseavatar

(event: UniEvent) => void

获取用户头像回调

@chooseaddress

(event: UniEvent) => void

调起用户编辑并选择收货地址的回调

@chooseinvoicetitle

(event: UniEvent) => void

用户选择发票抬头的回调

@addgroupapp

(event: UniEvent) => void

添加群应用的回调

@subscribe

(event: UniEvent) => void

订阅消息授权回调

@login

(event: UniEvent) => void

登录回调

phone-number-no-quota-toast

boolean

createliveactivity

eventhandle

@getrealtimephonenumber

eventhandle

@agreeprivacyauthorization

eventhandle

在web平台，由于0.5px有兼容性问题，button的边框使用伪类实现。
在app平台，HBuilderX4.02及以上版本调整为原生实现button组件，默认边框不占高度，解决button实际渲染宽高与Web端不一致的问题；HBuilderX4.01及以下版本封装text实现button组件，由于不支持伪类，默认边框使用 border 样式实现，会导致button的实际的渲染宽高在app端比web端多1px。
button的默认边框宽度为0.5px，当type属性为plain时，边框宽度是1px，此时在web平台button实际的渲染宽高会大于其他类型1px，在app平台button实际的渲染高度与其他类型一致。
button 的text区域文字，app平台HBuilderX4.02及以上版本支持 \n 方式换行，HBuilderX4.01及以下版本不支持，会直接显示 \n 字符；Web端 \n 会变成一个空格。
button按下后触发hover-class效果，在app平台，手指不松开、一直在屏幕上移动、离开button组件范围后，hover-class效果消失，同时也不会触发点击事件；在web平台，手指移动一点后，即便未离开button范围，hover-class效果也会消失，同时也不会触发点击事件。
无论在哪个平台，hover-class消失后松开手指，都不会触发点击事件。
button 设置hover-class属性时需注意，app平台HBuilderX4.04及以下版本与web平台有差异，HBuilderX4.05版本统一为以下规则：
- 如果hover-class属性值设置为none，在style样式里面设置了同名的none样式，none样式将不起作用，没有点击态效果
- 如果hover-class属性值设置为button-hover或者不设置hover-class属性值，在style样式里面设置了同名的button-hover样式，点击效果将使用button-hover样式
- 如果hover-class属性值设置为无效值（或非法值），没有点击态效果
open-type="agreePrivacyAuthorization"，用于开发者在让用户同意隐私协议时，放置“同意”按钮。它并非强制性的，它只是开发者和插件作者之间的一种通信方式。并不是没有点下这个按钮，技术上就拦截了涉及隐私的API的调用。详见

# 子组件

不可以嵌套组件

# 示例

hello uni-app x

Template

Script



<template>
  <view class="main">
    <button id="testButton" :disabled="disabled_boolean" :size="size_enum[size_enum_current].name"
      :type="type_enum[type_enum_current].name" :plain="plain_boolean" @click="button_click"
      @touchstart="button_touchstart" @touchmove="button_touchmove" @touchcancel="button_touchcancel"
      @touchend="button_touchend" @tap="button_tap" @longpress="button_longpress" class="btn"
      :class="default_style ? (disabled_boolean ? 'custom-btn-disable' : 'custom-btn') : ''"
      :hover-class="default_style ? 'is-hover' : 'button-hover'">
      {{ text }}
    </button>
  </view>
  <scroll-view style="flex: 1">
    <view class="content">
      <boolean-data :defaultValue="false" title="按钮是否镂空，背景色透明" @change="change_plain_boolean"></boolean-data>
      <boolean-data :defaultValue="false" title="是否禁用" @change="change_disabled_boolean"></boolean-data>
      <boolean-data :defaultValue="false" title="修改默认样式和点击效果(高优先)" @change="change_default_style"></boolean-data>
      <enum-data :items="size_enum" title="按钮的大小" @change="radio_change_size_enum"></enum-data>
      <enum-data :items="type_enum" title="按钮的类型" @change="radio_change_type_enum"></enum-data>
      <input-data :defaultValue="text" title="按钮的文案" type="text" @confirm="confirm_text_input"></input-data>
      <view style="height: 10px;"></view>
      <button @click="navigateToChild">更多示例</button>
      <view style="height: 10px;"></view>
      <!-- #ifdef APP -->
      <button @click="openPrivacyDialog">open-type实现App隐私政策弹框</button>
      <view style="height: 10px;"></view>
      <!-- #endif -->
    </view>
  </scroll-view>
</template>

<style>
  .main {
    padding: 5px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    flex-direction: row;
    justify-content: center;
  }

  .main .list-item {
    width: 100%;
    height: 100px;
    border: 1px solid #666;
  }

  .custom-btn {
    color: #ffffff;
    background-color: #1AAD19;
    border-color: #1AAD19;
  }

  .custom-btn-disable {
    color: rgba(255, 255, 255, 0.7);
    background-color: rgba(26, 173, 25, 0.7);
    border-color: rgba(26, 173, 25, 0.7);
  }

  .is-hover {
    color: rgba(255, 255, 255, 0.6);
    background-color: #179b16;
    border-color: #179b16;
  }

  .button-hover {
    color: rgba(0, 0, 0, 0.6);
    background-color: #dedede;
  }
</style>

# 参见

# hover-class 属性值

# button样式修改

button在元素的text区域直接写文字，和text组件一样。可以这么理解，button是一个特殊的text组件，文字样式可以直接写在button组件的style或class上。

button组件属性中的size和type，属于预置样式，方便开发者使用。开发者也可以通过style和class来自定义样式。

button虽然可以内嵌text组件，但不建议通过text组件来修改button样式，因为会导致hove-class不生效。尤其是uvue中样式不继承。建议button组件text区域直接写文字，然后在button组件的style或class属性编写样式。

style和class的优先级，高于size和type属性。

<template>
	<button size="default" type="default"
	style="color:#ffffff;backgroundColor:#1AAD19;borderColor:#1AAD19"
	hover-class="is-hover">按钮</button>
</template>
<style>
.is-hover {
	color: rgba(255, 255, 255, 0.6);
	background-color: #179b16;
	border-color: #179b16;
  }
</style>

# button点击

button 组件的点击遵循 vue 标准的 @click事件。

button 组件没有 url 属性，如果要跳转页面，可以在@click中编写，也可以在button组件外面套一层 navigator 组件。举例，如需跳转到about页面，可按如下几种代码写法执行：

<template>
	<view>
		<navigator url="/pages/about/about"><button>通过navigator组件跳转到about页面</button></navigator>
		<button @click="goto('/pages/about/about')">通过方法跳转到about页面</button>
	</view>
</template>
<script>
	export default {
		methods: {
			goto(url:string) {
				uni.navigateTo({
					url:url
				})
			}
		}
	}
</script>