按钮

介绍

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>

Props

Events

Slots