更新记录

1.0.0（2023-05-03） 下载此版本

完成

平台兼容性

uni.scss(按项目实际颜色)

$uni-color-primary: #007aff;
$uni-color-success: #4cd964;
$uni-color-warning: #f0ad4e;
$uni-color-error: #dd524d;
$uni-color-info: #909399; //默认色
$uni-color-disabled: #c0c4cc; //禁止色
$uni-color-default: #dcdfe6; 

Button 按钮

该组件基于官方的 button 组件

参数

https://uniapp.dcloud.io/component/button

slot

示例

基础用法

<ayi-button fill>普通</ayi-button>
<ayi-button type="primary" fill>主要</ayi-button>
<ayi-button type="success" fill>成功</ayi-button>
<ayi-button type="error" fill>失败</ayi-button>
<ayi-button type="warning" fill>警告</ayi-button>
<ayi-button type="info" fill>信息</ayi-button>

朴素

<ayi-button type="primary" plain fill>朴素</ayi-button>
<ayi-button round fill>圆角</ayi-button>
<ayi-button loading fill>加载中</ayi-button>
<ayi-button type="primary" shadow fill>阴影</ayi-button>

不同尺寸

<ayi-button>默认</ayi-button>
<ayi-button size="small">small</ayi-button>
<ayi-button size="mini">mini</ayi-button>
<ayi-button :height="80" :width="200">80*200</ayi-button>

带图标通过 slot

<ayi-button>
    <template #icon><ayi-icon name="search"></ayi-icon></template>
    默认
</ayi-button>
<ayi-button>
    <template #icon> <ayi-icon name="good-fill"></ayi-icon></template>
    点赞
</ayi-button>