更新记录

1.2.3（2022-03-15） 下载此版本

修改按钮默认颜色

1.2.2（2022-03-09） 下载此版本

修复部分样式失效的问题

1.2.1（2022-03-07） 下载此版本

调整插件属性，适配微信小程序

平台兼容性

zg-button

解决原生button组件的样式不能随着uni.scss的变量的值变化的问题；按钮默认是display:block类型；点击事件用法与普通view一样。

props

event

基本用法

<zg-button>按钮</zg-button>
<zg-button type="primary">按钮</zg-button>
<zg-button type="warn">按钮</zg-button>
<zg-button type="error">按钮</zg-button>

尺寸

设置size属性

<zg-button size="small">按钮</zg-button>
<zg-button size="base">按钮</zg-button>
<zg-button size="large">按钮</zg-button>

空心

设置plain属性

<zg-button plain>按钮</zg-button>
<zg-button type="primary" plain>按钮</zg-button>
<zg-button type="warn" plain>按钮</zg-button>
<zg-button type="error" plain>按钮</zg-button>

禁用

设置disabled属性

<zg-button disabled>按钮</zg-button>
<zg-button type="primary" disabled>按钮</zg-button>
<zg-button type="warn" disabled>按钮</zg-button>
<zg-button type="error" disabled>按钮</zg-button>

加载中

设置loading属性

<zg-button loading>按钮</zg-button>
<zg-button type="primary" loading>按钮</zg-button>
<zg-button type="warn" loading>按钮</zg-button>
<zg-button type="error" loading>按钮</zg-button>

块级按钮

设置block属性

<zg-button block size="small">按钮</zg-button>
<zg-button block>按钮</zg-button>
<zg-button block size="large">按钮</zg-button>
<zg-button type="primary" block>按钮</zg-button>
<zg-button type="warn" block>按钮</zg-button>
<zg-button type="error" block>按钮</zg-button>

文字按钮

设置text属性

<zg-button text>按钮</zg-button>
<zg-button type="primary" text>按钮</zg-button>
<zg-button type="warn" text>按钮</zg-button>
<zg-button type="error" text>按钮</zg-button>

点击事件

<zg-button @click="onClick">按钮</zg-button>