Appearance
引入组件
局部引入
ts
// parent.vue
const FButton = defineAsyncComponent(() => import('@/components/formaui/f-button/f-button.vue'))基础用法
type属性：按钮类型（默认primary）
例：
primary、success、danger、warning
html
<f-button>按钮</f-button>
<f-button margin="16rpx 0 0" type="success">按钮</f-button>
<f-button margin="16rpx 0 0" type="warning">按钮</f-button>
<f-button margin="16rpx 0 0" type="danger">按钮</f-button>
shape属性：按钮形状（默认square）
例：
square(默认方形)、circle(圆角)、rightAngle(平角)。
html
<f-button>按钮</f-button>
<f-button margin="16rpx 0 0" type="warning" shape="round">按钮</f-button>
<f-button margin="16rpx 0 0" type="danger" shape="rightAngle">按钮</f-button>
plain属性：空心按钮
html
<f-button margin="16rpx 0 0" plain>按钮</f-button>
<f-button margin="16rpx 0 0" type="warning" plain>按钮</f-button>
<f-button margin="16rpx 0 0" type="danger" plain>按钮</f-button>
<f-button margin="16rpx 0 0" plain text-color="#000" border-color="#f0f">按钮</f-button>
disabled属性：禁用状态
html
<f-button disabled>按钮</f-button>
<f-button margin="16rpx 0 0" type="warning" disabled>按钮</f-button>
<f-button margin="16rpx 0 0" type="danger" disabled>按钮</f-button>
loading属性：加载状态
html
<f-button loading>按钮</f-button>
<f-button margin="16rpx 0 0" type="warning" disabled loading>按钮</f-button>
<f-button margin="16rpx 0 0" type="danger" disabled loading>按钮</f-button>
width属性：按钮宽度（默认100%）height属性：按钮高度（默认80rpx）
html
<f-button width="372rpx" height="84rpx">按钮</f-button>
<f-button margin="16rpx 0 0" type="warning" width="280rpx" height="90rpx">按钮</f-button>
<f-button margin="16rpx 0 0" type="danger" width="200rpx" height="80rpx">按钮</f-button>
bg-color属性：按钮背景色
html
<f-button bg-color="#FC8F98">按钮</f-button>
<f-button margin="16rpx 0 0" bg-color="linear-gradient(117deg, #d78ffc 0%, #7316a3 100%)">按钮</f-button>
<f-button margin="16rpx 0 0" text-color="#000" bg-color="linear-gradient(117deg, #7bc7d3 0%, #1498ad 100%)">按钮</f-button>插槽
| 名称 | 说明 |
|---|---|
| default | 显示内容 |
属性
| 名称 | 类型 | 说明 | 默认值 |
|---|---|---|---|
type | string | 样式类型，可传入[primary、success、warning、danger] | primary |
shape | string | 按钮形状，可传入[square、round、rightAngle] | square |
plain | boolean | 是否为空心按钮 | false |
width | string | 按钮宽度 | 100% |
height | string | 按钮高度 | 80rpx |
margin | string | 按钮外边距 | 0rpx |
padding | string | 按钮内边距 | 0rpx |
loading | boolean | 按钮加载状态 | false |
bgColor | string | 按钮背景色 | - |
borderColor | string | 按钮边框颜色 | - |
borderRadius | string | 按钮边框圆角 | 12rpx |
dashed | boolean | 按钮边框虚线 | false |
textColor | string | 按钮文字颜色 | #FFFFFF |
fontSize | string | 按钮文字大小 | 28rpx |
formType | string | 参考formType | - |
openType | string | 参考openType | - |
appParameter | string | 打开 APP 时，向 APP 传递的参数，open-type=launchApp 时有效 | - |
preventClickDuration | number | 防止重复点击时间间隔，单位毫秒，默认 200 毫秒 | 200 |
事件
| 事件名 | 说明 | 回调参数 |
|---|---|---|
click | 点击事件，设置 formType 时无需使用 | - |
getuserinfo | 参考官方 | 用户信息 |
getphonenumber | 参考官方 | 手机号信息 |
chooseavatar | 参考官方 | 头像信息 |
launchapp | 参考官方 | 小程序打开 App 成功的回调 |
contact | 参考官方 | 客服消息回调信息 |