按钮

介绍

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按钮

按钮在默认情况下为行内块级元素,通过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>

API

Props

参数 说明 类型 可选值 默认值
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 用于
组件,点击分别会触发 组件的 submit/reset 事件
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 -

Events

事件名 回调参数 说明
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 成功的回调

Slots

名称 说明 Bindings
default 按钮文字