Skip to content

Button 按钮

基本用法

基本按钮。

html
<wd-button>主要按钮</wd-button>
<wd-button type="success">成功按钮</wd-button>
<wd-button type="info">信息按钮</wd-button>
<wd-button type="warning">警告按钮</wd-button>
<wd-button type="error">危险按钮</wd-button>

禁用

设置 disabled 属性。

html
<wd-button disabled>默认按钮</wd-button>

幽灵按钮

设置 plain 属性。

html
<wd-button plain>主要按钮</wd-button>

细边框幽灵按钮

设置 hairline 属性。

html
<wd-button plain hairline>主要按钮</wd-button>

按钮大小

设置 size ,支持 'small'、'medium'、'large',默认为 'medium'。

html
<wd-button size="small">小号按钮</wd-button>
<wd-button size="medium">中号按钮</wd-button>
<wd-button size="large">大号按钮</wd-button>

加载中按钮

设置 loading 属性,让按钮处于加载中状态。加载中的按钮是禁止点击的。

html
<wd-button loading>加载中</wd-button>

文字按钮

type 设置为 text。文字按钮不支持其他颜色。

html
<wd-button type="text">文字按钮</wd-button>

图标按钮

type 设置为 icon,同时设置 icon 属性,icon 为图标的类名,可以直接使用 Icon 图标 章节中的图标类名。

html
<wd-button type="icon" icon="picture"></wd-button>

带图标的按钮

设置 icon 属性,不需要设置 typeicon,即可以直接使用带图标的按钮。

html
<wd-button icon="edit-outline"></wd-button>

结合classPrefix可以使用自定义图标,参见 Icon 自定义图标

html
<wd-button classPrefix="fish" icon="kehuishouwu">可回收</wd-button>

块状按钮

设置 block 属性。

html
<wd-button block>主要按钮</wd-button>

自定义样式

通过 custom-classcustom-style 属性可以自定义按钮的样式,这里我们使用custom-class给按钮添加一个 Material Design 3 风格的box-shadow

html
<view class="page-class">
  <wd-button custom-class="custom-shadow">主要按钮</wd-button>
  <wd-button type="success" custom-class="custom-shadow">成功按钮</wd-button>
  <wd-button type="info" custom-class="custom-shadow">信息按钮</wd-button>
  <wd-button type="warning" custom-class="custom-shadow">警告按钮</wd-button>
  <wd-button type="error" custom-class="custom-shadow">危险按钮</wd-button>
</view>
scss
.page-class {
  :deep() {
    .custom-shadow {
      box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
    }
  }
}

Attributes

参数说明类型可选值默认值最低版本
type按钮类型stringprimary / success / info / warning / error / text / iconprimary-
round圆角按钮boolean-true-
plain幽灵按钮boolean-false-
hairline是否细边框boolean-false-
loading加载中按钮boolean-false-
block块状按钮boolean-false-
size按钮尺寸stringsmall / medium / largemedium-
disabled禁用按钮boolean-false-
icon图标类名string---
loading-color加载图标颜色string---
open-type微信开放能力string---
hover-stop-propagation指定是否阻止本节点的祖先节点出现点击态boolean-false-
lang指定返回用户信息的语言,zh_CN 简体中文,zh_TW 繁体中文,en 英文stringzh_CN / zh_TWen-
session-from会话来源,open-type="contact"时有效string---
session-message-title会话内消息卡片标题,open-type="contact"时有效string-当前标题-
session-message-path会话内消息卡片点击跳转小程序路径,open-type="contact"时有效string-当前分享路径-
send-message-img会话内消息卡片图片,open-type="contact"时有效string-截图-
app-parameter打开 APP 时,向 APP 传递的参数,open-type=launchApp 时有效string---
show-message-card是否显示会话内消息卡片,设置此参数为 true,用户进入客服会话会在右下角显示"可能要发送的小程序"提示,用户点击后可以快速发送小程序消息,open-type="contact"时有效boolean-false-
classPrefix类名前缀,用于使用自定义图标,参见iconstring-'wd-icon'0.1.27
button-id按钮的唯一标识,可用于设置隐私同意授权按钮的 idstring--1.3.6
scope支付宝小程序使用,当 open-type 为 getAuthorize 时有效。ButtonScopephoneNumber / userInfo-1.3.14

ButtonOpenType 开放能力

属性说明
feedback打开“意见反馈”页面,用户可提交反馈内容并上传日志。
share触发用户转发
getUserInfo获取用户信息,可以从@getuserinfo 回调中获取到用户信息
contact打开客服会话,如果用户在会话中点击消息卡片后返回应用,可以从 @contact 回调中获得具体信息
getPhoneNumber获取用户手机号,可以从@getphonenumber 回调中获取到用户信息
launchApp小程序中打开 APP,可以通过 app-parameter 属性设定向 APP 传的参数
openSetting打开授权设置页
chooseAvatar获取用户头像,可以从@chooseavatar 回调中获取到头像信息
getAuthorize支持小程序授权,支付宝小程序配合scope使用,可以实现getPhoneNumbergetUserInfo功能。
lifestyle关注生活号,支付宝小程序
contactShare分享到通讯录好友,支付宝小程序
agreePrivacyAuthorization用户同意隐私协议按钮。可通过 @agreeprivacyauthorization 监听用户同意隐私协议事件。

Events

事件名称说明参数最低版本
click点击事件event-
getuserinfo获取用户信息detail-
contact客服消息回调,open-type="contact"时有效detail-
getphonenumber获取用户手机号回调,open-type=getPhoneNumber 时有效detail-
error当使用开放能力时,发生错误的回调,open-type=launchApp 时有效detail-
launchapp打开 APP 成功的回调,open-type=launchApp 时有效detail-
opensetting在打开授权设置页后回调,open-type=openSetting 时有效detail-

外部样式类

类名说明最低版本
custom-class根节点样式-

源代码

文档
组件

Released under the MIT License.

Released under the MIT License.