# Button 按钮

概述

Button 按钮，支持自定义大小、颜色等。

# 支持平台

目前开发小程序与H5推荐使用 FirstUI nvue版本 (opens new window)。

安卓系统版本	安卓uni-app	安卓uniapp-x	iOS系统版本	iOS uniapp	iOS uniapp-x	小程序	H5/Web
5.0	×	✓	9.0	×	×	×	✓

# 引入

以下介绍两种常用的引入方式。

第一种：在页面中引用、注册

import fuiButton from "@/components/firstui/fui-button/fui-button.uvue"
export default {
	components:{
		fuiButton
	}
}

1
2
3
4
5
6

第二种：easycom组件规范

传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。

First UI easycom配置请查看快速上手。

如果不了解easycom，可先查看官网文档 (opens new window)。

# 代码演示

部分示例演示，完整使用请参考示例程序以及文档API。

基础使用

通过 text 属性设置按钮显示文本。（注意：直接使用slot时字体相关设置属性失效，须嵌套text标签设置字体样式。）

<fui-button text="默认按钮"></fui-button>

按钮类型

通过 type 属性设置按钮的类型，不传值则默认为 primary 。

<fui-button type="success" text="success"></fui-button>
<fui-button type="warning" text="warning"></fui-button>

1
2

禁用状态

通过 disabled 属性设置按钮是否禁用，disabledBackground 属性设置禁用状态下背景色，disabledColor 属性设置禁用状态下字体颜色。

<fui-button :disabled="true" text="禁用按钮"></fui-button>
<fui-button margin="24rpx 0" :disabled="true" :loading="true" text="禁用按钮"></fui-button>
<fui-button :disabled="true" disabledBackground="#F8F8F8" disabledColor="#CCCCCC" text="禁用按钮">
</fui-button>

1
2
3
4

按钮形状

通过 radius 属性设置按钮圆角大小，从而控制按钮形状。

<fui-button radius="0">方形按钮</fui-button>
<fui-button radius="96rpx">圆形按钮</fui-button>

1
2

自定义颜色

通过 background 属性设置按钮背景色，color 属性设置按钮文字颜色，borderColor 属性设置按钮边框颜色。

<fui-button background="#fff" color="#465CFF" borderColor="#465CFF">朴素按钮</fui-button>

TIP

若组件宽度为 100% 时，注意设置外层容器的宽度，避免 flex 布局下，宽度被挤压。若宽度被挤压可在组件外层套个view，将view宽度设置成100%。

# Slots

插槽名称	说明
default	标签内显示内容

# Props

属性名	类型	说明	默认值	平台差异说明
type	String	按钮类型，可取值：primary、success、 warning、danger、link、purple、gray	primary	-
background	String	按钮背景色，当传入值时type失效	-	-
text	String	按钮显示文本	-	-
color	String	按钮字体颜色	#fff	-
disabledBackground	String	按钮禁用状态下背景色	-	-
disabledColor	String	按钮禁用状态下字体颜色	-	-
borderWidth	String	按钮边框宽度	0.5px	-
borderColor	String	按钮边框颜色	-	-
btnSize	String	按钮大小，可选值：medium、small、mini，优先级高于width和height属性	-	-
width	String	按钮宽度	100%	-
height	String	按钮高度	96rpx	-
size	Number	字体大小，单位rpx	32	-
bold	Boolean	字体是否加粗	false	-
margin	String	margin值，同css	'0rpx'	-
radius	String	圆角大小	16rpx	-
plain	Boolean	是否镂空	false	-
highlight	Boolean	是否需要点击效果	true	-
disabled	Boolean	是否禁用	false	-
loading	Boolean	是否显示加载图标	false	-
iconColor	String	loading圆环背景色	#B2B2B2	-
activeColor	String	loading圆环高亮部分颜色	#FFFFFF	-
formType V1.2.6+	String	用于 form 组件，点击分别会触发 form 组件的 submit/reset 事件，可选值： submit/reset	-	-

# Events

事件名	类型	说明	回调参数
@onclick	(event: MouseEvent) => void	按钮点击事件	MouseEvent

# MouseEvent

详见 (opens new window)

示例预览

# 示例代码地址

Button 按钮

← Icon 图标 Footer 页脚 →