更新记录

0.0.1（2023-06-06）

一个基于Vue3和TypeScript开发的 Button 按钮组件。

平台兼容性

组件库官方文档：fant-mini-plus

组件库提供更多vue3组件，比单独引入更加强大

Button 按钮

按钮用于触发一个操作，如提交表单。

代码演示

按钮类型

按钮支持 default、primary、error、warning、success 五种类型，默认为 default。

<hd-button type="default">默认按钮</hd-button>
<hd-button type="primary">主要按钮</hd-button>
<hd-button type="error">危险按钮</hd-button>
<hd-button type="warning">警告按钮</hd-button>
<hd-button type="success">成功按钮</hd-button>

按钮尺寸

按钮支持 normal、large、small、mini 五种尺寸，默认为 normal。

<hd-button type="default" size="normal">默认按钮（中等）</hd-button>
<hd-button type="primary" size="large">大号按钮</hd-button>
<hd-button type="default" size="small">小号按钮</hd-button>
<hd-button type="default" size="mini">迷你按钮</hd-button>

按钮形状

按钮支持 square直角、roundsquare小圆角、round全圆角 三种形状，默认为 square。

<hd-button type="default" shape="square">直角</hd-button>
<hd-button type="default" shape="roundsquare">小圆角</hd-button>
<hd-button type="default" shape="round">全圆角</hd-button>

朴素按钮

通过plain属性将按钮设置为朴素按钮，朴素按钮的文字为按钮颜色，背景为白色。

<hd-button plain type="primary">朴素按钮</hd-button>
<hd-button plain type="warning">朴素按钮</hd-button>

细边框

设置 hairline 属性可以展示 0.5px 的细边框。

<hd-button plain type="primary">默认按钮</hd-button>
<hd-button plain hairline type="primary">细边框按钮</hd-button>

禁用状态

通过 disabled 属性来禁用按钮，禁用状态下按钮不可点击。

<hd-button disabled type="primary">禁用状态</hd-button>
<hd-button disabled type="error">禁用状态</hd-button>

加载状态

通过 loading 属性设置按钮为加载状态。通过loading-type指定加载动画。

<hd-button loading type="primary" />
<hd-button loading type="primary" loading-type="flower" loading-text="加载中..." />

自定义颜色

通过color属性可以自定义按钮的颜色。

<hd-button color="#7232dd">单色按钮</hd-button>
<hd-button color="#7232dd" plain>单色按钮</hd-button>
<hd-button color="linear-gradient(to right, #4bb0ff, #6149f6)">
  渐变色按钮
</hd-button>

小程序能力

提供小程序按钮获取开放能力，详细见 Props 和 Events;

开放能力，具体请看 uniapp 稳定关于 button 组件部分说明: https://uniapp.dcloud.io/component/button;

Props

Events

Slots

联系方式

有不明白或者建议可以扫码交流

联系我们