按钮
按钮组件。
属性
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
hoverClass | String | pure-hover | 指定按下去的样式类 |
border | Boolean | false | 按钮是否有边框 |
text | String | - | 按钮文本 |
disabled | Boolean | false | 禁用状态 |
theme | String | - | 按钮主题 |
iconName | String | - | 前置图标名称 |
iconMode | String | - | 前置图标图片的裁剪、缩放模式 参考 |
iconOpts | Object | - | 前置图标的配置 参考 |
afterIconName | String | - | 后置图标名称 |
afterIconMode | String | - | 后置图标图片的裁剪、缩放模式 参考 |
afterIconOpts | Object | - | 后置图标的配置 参考 |
loading | Boolean | false | 加载状态 |
loadingText | String | - | 加载提示文本 |
loadingIconName | String | __loading1 | 加载图标名称 |
loadingIconMode | String | - | 加载图标图片的裁剪、缩放模式 参考 |
loadingIconOpts | Object | - | 加载图标的配置 参考 |
ghost | Boolean | false | 是否是幽灵按钮 |
plain | Boolean | false | 是否是镂空按钮 |
shape | String | - | 按钮形状 |
block | Boolean | false | 是否是块级按钮 |
link | Boolean | false | 是否是链接按钮 |
underline | Boolean | false | 是否显示下划线 |
debounce | Boolean | true | 是否开启防抖 |
time | Number | 800 | 防抖间隔，即两次点击之间的间隔，毫秒 |
tips | String | - | 防抖提示文本 |
formType | String | - | 用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件 参考 |
hoverStartTime | Number | 20 | 按住后多久出现点击态，单位毫秒 参考 |
hoverStayTime | Number | 70 | 手指松开后点击态保留时间，单位毫秒 参考 |
appParameter | String | - | 打开 APP 时，向 APP 传递的参数 参考 |
hoverStopPropagation | Boolean | false | 指定是否阻止本节点的祖先节点出现点击态 参考 |
lang | String | zh-CN | 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文 参考 |
sessionFrom | String | - | 会话来源 参考 |
sendMessageTitle | String | - | 会话内消息卡片标题 参考 |
sendMessagePath | String | - | 会话内消息卡片点击跳转小程序路径 参考 |
sendMessageImg | String | - | 会话内消息卡片图片 参考 |
showMessageCard | Boolean | false | 是否显示会话内消息卡片 参考 |
groupId | String | - | 打开群资料卡时，传递的群号 参考 |
guildId | String | - | 打开频道页面时，传递的频道号 参考 |
publicId | String | - | 打开公众号资料卡时，传递的号码 参考 |
dataImId | String | - | 客服的抖音号 参考 |
dataImType | String | - | IM卡片类型 参考 |
dataGoodsId | String | - | 商品 ID 参考 |
dataBizLine | String | - | 商品类型 参考 |
scope | String | - | 支付宝小程序获取用户手机号、获取用户信息时需设置 参考 |
size | String | - | 按钮尺寸（宽、高） |
fontSize | String | - | 按钮字体大小 |
fontWeight | [String, Number] | - | 按钮字体粗细 |
color | String | - | 按钮字体颜色 |
radius | String | - | 按钮圆角大小 |
background | String | - | 按钮背景 |
bgOpacity | String | - | 按钮背景透明度 |
width | String | - | 按钮宽度 |
height | String | - | 按钮高度 |
margin | String | - | 按钮外边距 |
padding | String | - | 按钮内边距 |
lineHeight | String | - | 按钮文本内容行高 |
borderWidth | String | - | 按钮边框宽度 |
borderStyle | String | - | 按钮边框样式 |
borderColor | String | - | 按钮边框颜色 |
事件
| 名称 | 参数 | 说明 |
|---|---|---|
@onClick | - | [参考] 点击按钮时触发 |
@onGetPhoneNumber | event | [参考] 获取用户手机号回调，支付宝小程序还需设置 scope，参考 [参考] |
@onGetUserInfo | event | [参考] 获取用户手机号的回调，，支付宝小程序还需设置 scope，参考 [参考] |
@onError | event | [参考] 当使用开放能力时，发生错误的回调 |
@onOpenSetting | event | [参考] 在打开授权设置页并关闭后回调 |
@onLaunchApp | event | [参考] 从小程序打开 App 成功的回调 |
@onContact | event | [参考] 客服消息回调 |
@onChooseAvatar | event | [参考] 获取用户头像回调 |
@onAgreePrivacyAuthorization | event | [参考] 用户同意隐私协议事件回调 |
@onAddGroupApp | event | [参考] 添加群应用的回调 |
@onChooseAddress | event | [参考] 调起用户编辑并选择收货地址的回调 |
@onChooseInvoiceTitle | event | [参考] 用户选择发票抬头的回调 |
@onSubscribe | event | [参考] 订阅消息授权回调 |
@onLogin | event | [参考] 登录回调 |
@onIM | event | [参考] 监听跳转 IM 的成功回调 |
插槽
| 名称 | 参数 | 说明 |
|---|---|---|
#loading | - | 加载状态 |
#loadingIcon | - | 加载图标 |
#loadingText | - | 加载提示文本 |
#icon | - | 前置图标 |
#default | - | 默认，按钮文本，按钮内容 |
#afterIcon | - | 后置图标 |
按钮内容
- 通过
text属性设置按钮文本。 - 通过默认插槽设置按钮文本或内容。
vue
<template>
<pure-button text="按钮"></pure-button>
<pure-button>按钮</pure-button>
</template>边框按钮
- 按钮默认无边框，通过
border属性设置按钮是否显示边框。 - 通过
borderWidth属性设置按钮边框宽度。 - 通过
borderStyle属性设置按钮边框类型。 - 通过
borderColor属性设置按钮边框颜色。
vue
<template>
<pure-button text="边框按钮" border></pure-button>
<pure-button text="自定义边框宽度" borderWidth="2px"></pure-button>
<pure-button text="自定义边框样式" borderStyle="dashed"></pure-button>
<pure-button text="自定义边框颜色" borderColor="red"></pure-button>
</template>按钮主题
通过 theme 属性来设置按钮主题，主题使用详见主题。
vue
<template>
<pure-button theme="primary">主要</pure-button>
<pure-button theme="success">成功</pure-button>
<pure-button theme="warning">警告</pure-button>
<pure-button theme="danger">危险</pure-button>
<pure-button theme="info">信息</pure-button>
</template>按钮形状
- 通过
shape属性来设置按钮形状。 - 按钮默认为有
'5px'的圆角。
| 值 | 说明 |
|---|---|
square | 矩形按钮 |
round | 圆角按钮 |
cube | 方块按钮，表现为一个正方形 |
circle | 圆形按钮，表现为一个正圆 |
vue
<template>
<pure-button shape="square">矩形按钮</pure-button>
<pure-button shape="round">圆角按钮</pure-button>
<pure-button shape="cube">方块按钮</pure-button>
<pure-button shape="circle">圆形按钮</pure-button>
</template>禁用状态
通过 disabled 属性来设置按钮是否禁用，默认值为 false。
vue
<template>
<pure-button disabled>禁用按钮</pure-button>
</template>按钮图标
按钮支持设置前后两个图标。
- 通过
iconName属性来设置按钮前置图标。 - 通过
afterIconName属性来设置按钮后置图标。
vue
<template>
<pure-button iconName="__liwu">按钮</pure-button>
<pure-button afterIconName="__shezhi">按钮</pure-button>
</template>加载状态
- 通过
loading属性来设置按钮是否为加载状态，默认值为false。 - 通过
loadingText属性来设置按钮加载状态下的文本，默认值为空。
vue
<template>
<pure-button loading loadingText="登录中">登录</pure-button>
</template>幽灵按钮
- 通过
ghost属性来设置按钮是否为幽灵按钮，默认值为false。
vue
<template>
<pure-button ghost theme="primary">幽灵按钮</pure-button>
<pure-button ghost theme="success">幽灵按钮</pure-button>
<pure-button ghost theme="warning">幽灵按钮</pure-button>
<pure-button ghost theme="danger">幽灵按钮</pure-button>
<pure-button ghost theme="info">幽灵按钮</pure-button>
</template>镂空按钮
- 通过
plain属性来设置按钮是否为镂空按钮，默认值为false。
vue
<template>
<pure-button plain theme="primary">镂空按钮</pure-button>
<pure-button plain theme="success">镂空按钮</pure-button>
<pure-button plain theme="warning">镂空按钮</pure-button>
<pure-button plain theme="danger">镂空按钮</pure-button>
<pure-button plain theme="info">镂空按钮</pure-button>
</template>块级按钮
- 通过
block属性来将按钮设置为块级按钮，默认值为false。 - 块级按钮的表现形式为：宽度为
100%。
vue
<template>
<pure-button block theme="primary">块级按钮</pure-button>
</template>链接按钮
- 通过
link属性来将按钮设置为链接按钮，默认值为false。 - 链接按钮的表现形式为：类似于超链接。
- 通过
underline属性设置是否显示下划线，默认值为false。
vue
<template>
<pure-button link theme="primary">链接按钮</pure-button>
</template>防抖
为了方便使用，按钮内置了防抖功能，默认防抖时间为 800ms。
- 通过
debounce属性来开启防抖功能，默认值为true。 - 通过
time属性来设置防抖间隔时间，单位为ms，默认值为800ms。 - 通过
tips属性来设置触发防抖时的提示，为空则不提示，默认值为空。
vue
<template>
<pure-button shape="block" theme="warning" text="点击我时，两次时间间隔不能小于 5 秒" font-size="12px" height="44px" debounce time="5000" tips="点击的太快啦"></pure-button>
</template>按钮尺寸
- 通过
size属性将按钮宽高设置为同样大小。 - 通过
width属性单独设置按钮的宽度。 - 通过
height属性单独设置按钮的高度。
vue
<template>
<!-- 通过 size 竖向将按钮设置为方块 -->
<pure-button size="50px" iconName="__liwu"></pure-button>
<!-- 单独设置按钮的宽高 -->
<pure-button width="120px" height="50px">一个按钮</pure-button>
</template>文字大小
通过 font-size 属性来设置按钮文本的字体大小，默认 15px。
vue
<template>
<pure-button font-size="12px">按钮</pure-button>
<pure-button font-size="28rpx">按钮</pure-button>
</template>文本颜色
- 通过
color属性来设置按钮文本的颜色。
vue
<template>
<pure-button color="red">按钮</pure-button>
</template>圆角大小
- 通过
radius属性来设置按钮的圆角大小。
vue
<template>
<pure-button radius="15px">按钮</pure-button>
</template>按钮背景
- 通过
background属性来设置按钮的背景。 - 通过
bgOpacity属性可以设置背景的透明度。
vue
<template>
<pure-button background="red">颜色背景</pure-button>
<pure-button background="linear-gradient(to right, red, blue)">渐变背景</pure-button>
<pure-button background="url('/static/images/bg.jpg')">图片背景</pure-button>
<!-- 通过 bgOpacity 可以设置背景的透明度 -->
<pure-button background="red" bgOpacity="0.5">颜色背景</pure-button>
</template>样式变量
| 名称 | 说明 |
|---|---|
--pure-button-display | 按钮的显示类型 |
--pure-button-margin | 按钮外边距 |
--pure-button-padding | 按钮内边距 |
--pure-button-font-size | 按钮字体大小 |
--pure-button-font-weight | 按钮字体粗细 |
--pure-button-border-radius | 按钮边框圆角 |
--pure-button-line-height | 按钮行高 |
--pure-button-width | 按钮宽度 |
--pure-button-height | 按钮高度 |
--pure-button-border | 按钮边框 |
--pure-button-border-width | 按钮边框宽度 |
--pure-button-border-style | 按钮边框类型 |
--pure-button-border-color | 按钮边框颜色 |
--pure-button-background | 按钮背景 |
--pure-button-background-opacity | 按钮背景透明度 |
--pure-button-gap | 按钮内容之间的间距 |
--pure-button-icon-font-size | 按钮图标字体大小 |
--pure-button-icon-color | 按钮图标颜色 |
--pure-button-icon-font-weight | 按钮图标字体粗细 |
--pure-button-icon-margin | 按钮图标外边距 |
--pure-button-loading-animation-duration | 按钮加载动画持续时间 |
--pure-button-loading-animation-timing-function | 按钮加载动画时间函数 |
--pure-button-loading-icon-font-size | 按钮加载图标字体大小 |
--pure-button-loading-icon-color | 按钮加载图标颜色 |
--pure-button-loading-icon-font-weight | 按钮加载图标字体粗细 |
--pure-button-loading-icon-margin | 按钮加载图标外边距 |
--pure-button-front-icon-font-size | 按钮前置图标字体大小 |
--pure-button-front-icon-color | 按钮前置图标颜色 |
--pure-button-front-icon-font-weight | 按钮前置图标字体粗细 |
--pure-button-front-icon-margin | 按钮前置图标外边距 |
--pure-button-after-icon-font-size | 按钮后置图标字体大小 |
--pure-button-after-icon-color | 按钮后置图标颜色 |
--pure-button-after-icon-font-weight | 按钮后置图标字体粗细 |
--pure-button-after-icon-margin | 按钮后置图标外边距 |
--pure-button-disabled-opacity | 按钮禁用透明度 |
--pure-button-underline-top | 按钮下划线位置 |
--pure-button-underline-bottom | 按钮下划线位置 |
--pure-button-underline-left | 按钮下划线位置 |
--pure-button-underline-right | 按钮下划线位置 |
--pure-button-underline-color | 按钮下划线颜色 |
--pure-button-underline-transform | 按钮下划线 transform 属性 |