button组件基于uniapp的button组件进行了部分改动,大多数都是样式上的改动,功能基本延续了uniapp按钮的所有功能,与uniapp使用方法一致;
<z-button>默认按钮</z-button>
<z-button type="default">默认按钮</z-button>
<z-button type="primary">主要按钮</z-button>
<z-button type="info">信息按钮</z-button>
<z-button type="danger">危险按钮</z-button>
<z-button type="warning">警告按钮</z-button>
通过设置属性round
将按钮变为圆形按钮,设置属性square
将按钮变为方形按钮
<z-button type="primary" square>方形按钮</z-button>
<z-button type="info" round>圆形按钮</z-button>
通过设置属性size
来改变按钮的大小,可选值有large
大号按钮,small
小号按钮,mini
超小号按钮
<z-button type="primary" size="large">大号按钮</z-button>
<z-button type="primary" size="normal">普通按钮</z-button>
<z-button type="primary" size="small">小型按钮</z-button>
<z-button type="primary" size="mini">迷你按钮</z-button>
在按钮中加入plain
属性,即可设置按钮为边框按钮
<z-button plain type="primary">边框按钮</z-button>
在按钮中加入disabled
属性,即可设置按钮为禁用状态
<z-button disabled type="primary">禁用按钮</z-button>
在按钮中加入loading
属性,即可设置按钮为加载状态。同时,可以使用loading-type
属性,设置加载状态的类型,默认为circular
,可选值为spinner
。值得一提的是,加载中的模板也可以作用于按钮上,但是需要指定尺寸,以及按钮宽高,否则将出现位置错乱的情况。
<z-button loading type="primary"></z-button>
<z-button loading type="primary" loading-type="spinner"></z-button>
<z-button loading loading-text="加载中..." type="info"></z-button>
加入icon
属性并且设置一个图标名称,即可在按钮中显示图标,同时图标也支持自定义图片
<z-button type="primary" icon="plus"></z-button>
<z-button type="primary" icon="happy">按钮</z-button>
<z-button plain type="info" icon="https://cdn.520ztc.com/zebra-ui/images/assets/demo-select.png">按钮</z-button>
按钮在默认情况下为行内块级元素,通过block
属性可以将按钮的元素类型设置为块级元素。
<z-button type="primary" block>块级按钮</z-button>
通过设置color
属性即可实现自定义颜色,支持渐变色
<z-button color="#7232dd">单色按钮</z-button>
<z-button plain color="#7232dd">单色按钮</z-button>
<z-button color="linear-gradient(to right, #ff6034, #ee0a24)">渐变按钮</z-button>
通过custom-style
属性,即可将按钮自定义成你喜欢的样子。使用方式与行内样式style一致。
<z-button :custom-style="{height:'60rpx',width:'200rpx'}" type="primary">改变宽高</z-button>
<z-button :custom-style="{fontSize:'12rpx'}" type="primary">改变字号</z-button>
<z-button :custom-style="{padding:'0 10rpx'}" type="primary">改变边距</z-button>
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
type | 按钮的类型 | string | default primary info warning danger |
default |
size | 按钮的尺寸大小 | string | normal large small mini |
normal |
block | 是否为块级元素 | boolean | false |
|
round | 是否为圆形按钮 | boolean | false |
|
plain | 是否为边框按钮 | boolean | false |
|
square | 是否为方形按钮 | boolean | false |
|
loading | 是否显示为加载状态 | boolean | false |
|
disabled | 是否禁用按钮 | boolean | false |
|
lang | 指定返回用户信息的语言,zh_CN 简体中文,zh_TW 繁体中文,en 英文 (微信小程序) | string | zh_CN zh_TW en |
en |
form-type | 用于 | string | submit reset |
- |
color | 按钮颜色,支持传入linear-gradient 渐变色 |
string | - | |
custom-style | 自定义样式,与行内样式 style 写法一致 | object | - | |
custom-class | 自定义类,部分小程序不支持,请谨慎使用 | string | - | |
open-type | 开放能力,详情请查看 uniapp 按钮组件 | string | - | |
session-from | 会话来源 | string | - | |
send-message-title | 会话内消息卡片标题,open-type="contact"时有效 | string | - | |
send-message-path | 会话内消息卡片点击跳转小程序路径,open-type="contact"时有效 | string | - | |
send-message-img | 会话内消息卡片图片,open-type="contact"时有效 | string | - | |
show-message-card | 是否显示会话内消息卡片,设置此参数为 true,用户进入客服会话会在右下角显示"可能要发送的小程序"提示,用户点击后可以快速发送小程序消息,open-type="contact"时有效 | boolean | false |
|
app-parameter | 打开 APP 时,向 APP 传递的参数,open-type=launchApp 时有效 | string | - | |
hover-stop-propagation微信小程序 |
指定是否阻止本节点的祖先节点出现点击态 | boolean | false |
|
hover-start-time | 按住后多久出现点击态,单位毫秒 | number | 20 |
|
hover-stay-time | 手指松开后点击态保留时间,单位毫秒 | number | 70 |
|
loading-size | 加载图标大小 | string | 40rpx |
|
loading-type | 加载状态图标类型 | string | circular spinner |
circular |
loading-text | 加载状态提示文字 | string | - | |
icon | 左侧图标名称或图片链接,可选值见 Icon 组件 | string | - | |
class-prefix | 图标类名前缀,同 Icon 组件的 class-prefix 属性 | string | zebra-icon |
|
loading-template | 加载状态模板类型 | string | a b c d e f |
- |
事件名 | 回调参数 | 说明 |
---|---|---|
click | event object - event |
点击事件,在按钮不为加载状态且不为禁用状态时可触发此事件 |
getphonenumber微信小程序 |
event object - event |
获取用户手机号,可以从 getphonenumber 回调中获取到用户信息 |
getuserinfo微信小程序 |
event object - event |
用户点击该按钮时,会返回获取到的用户信息 |
error微信小程序 |
event object - event |
当使用开放能力时,发生错误的回调 |
opensetting微信小程序 |
event object - event |
在打开授权设置页并关闭后回调 |
launchapp微信小程序 |
event object - event |
从小程序打开 App 成功的回调 |
名称 | 说明 | Bindings |
---|---|---|
default | 按钮文字 |