Button 按钮

介绍

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

导入

import Button from '@/components/basic/Button.vue'

用法

基础用法

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

<template>
  <FlexRow wrap :padding="10" :gap="10">
    <Button text="primary" type="primary" />
    <Button text="success" type="success" />
    <Button text="default" type="default" />
    <Button text="danger" type="danger" />
    <Button text="warning" type="warning" />
  </FlexRow>
</template>

关于他们的主题颜色修改，可参考 主题与颜色 。

朴素按钮

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

<template>
  <FlexRow wrap :padding="10" :gap="10">
    <Button plain text="primary" type="primary" />
    <Button plain text="success" type="success" />
    <Button plain text="default" type="default" />
    <Button plain text="danger" type="danger" />
    <Button plain text="warning" type="warning" />
  </FlexRow>
</template>

禁用状态

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

也可不提供 onPress 函数，此时按钮也无法响应点击。

<template>
  <FlexRow wrap :padding="10" :gap="10">
    <Button touchable="false" text="primary" type="primary" />
    <Button touchable="false" text="success" type="success" />
    <Button touchable="false" text="default" type="default" />
  </FlexRow>
</template>

自定义颜色

<template>
  <FlexRow wrap :padding="10" :gap="10">
    <Button text="自定义颜色" type="custom" color="#f00" pressedColor="#ff0" textColor="#fff" />
  </FlexRow>
</template>

加载状态

<template>
  <FlexRow wrap :padding="10" :gap="10">
    <Button loading="true" type="primary" icon="top-filling" />
    <Button loading="true" loadingText="加载中" type="success" />
  </FlexRow>
</template>

按钮形状

通过 square 设置方形按钮，通过 round 设置圆形按钮。

<template>
  <FlexRow wrap :padding="10" :gap="10">
    <Button shape="square" text="方形按钮" type="primary" />
    <Button shape="round" text="圆形按钮" type="success" />
    <Button shape="round" radius="5" text="可以通过raduis设置圆角大小" type="primary" />
  </FlexRow>
</template>

图标

通过 icon 属性设置按钮图标，支持 Icon 组件里的所有图标，也可以传入图标 URL。

<template>
  <FlexRow wrap :padding="10" :gap="10">
    <Button icon="top-filling" type="primary" />
    <Button icon="http://test.com/images/test.png" text="按钮" type="primary" />
    <Button icon="download" plain text="按钮" type="success" />
  </FlexRow>
</template>

按扭尺寸

支持 large、normal、small、mini 四种尺寸，默认为 normal。

<template>
  <FlexRow wrap center :padding="10" :gap="10">
    <Button text="大号按钮" type="primary" size="large" />
    <Button text="普通按钮" type="primary" size="medium" />
    <Button text="小型按钮" type="primary" size="small" />
    <Button text="迷你按钮" type="primary" size="mini" />
  </FlexRow>
</template>

API 参考

Button

按钮组件。

Props

名称	说明	类型	必填	默认值
text	按钮文字	string	-	-
type	按钮支持 default、primary、success、warning、danger、custom 自定义 六种类型	ButtomType	-	'default'
block	占满父级主轴	boolean	-	false
plain	通过 plain 属性将按钮设置为朴素按钮，朴素按钮的文字为按钮颜色，背景为白色。	boolean	-	false
loading	通过 loading 属性设置按钮为加载状态，加载状态下默认会隐藏按钮文字，可以通过 loadingText 设置加载状态下的文字。	boolean	-	false
loadingText	加载状态下的文字。	string	-	false
loadingColor	加载状态圆圈颜色	string	-	-
shape	按钮形状 通过 square 设置方形按钮，通过 round 设置圆形按钮。	"square" ︱ "round"	-	'round'
icon	左侧图标。支持 Icon 组件里的所有图标，也可以传入图标的图片 URL（http/https）。	string	-	-
iconProps	当使用图标时，左侧图标的附加属性	IconProps	-	-
rightIcon	右侧图标。支持 Icon 组件里的所有图标，也可以传入图标的图片 URL（http/https）。	string	-	-
rightIconProps	当使用图标时，右侧图标的附加属性	IconProps	-	-
touchable	是否可以点击	boolean	-	true
radius	当按扭为round圆形按扭时的圆角大小。	number	-	5
size	按钮尺寸. 支持 large、medium、small、mini 四种尺寸。	ButtomSizeType	-	'medium'
color	通过 color 属性可以自定义按钮的背景颜色，仅在 type 为 custom 时有效	string	-	grey
textColor	按钮文字的颜色。	string	-	-
pressedTextColor	按下时按钮文字的颜色。	string	-	-
textStyle	按钮文字的样式。	TextStyle	-	-
pressedColor	按下时的颜色，仅在 type 为 custom 时有效	string	-	pressed.primary
disabledColor	禁用时的颜色，仅在 type 为 custom 时有效	string	-	grey
padding	强制控制按钮的边距; 如果是数字，则设置所有方向边距; 两位数组 [vetical,horizontal]; 四位数组 [top,right,down,left]	number ｜ number[]	-	-
viewProps	外层容器参数	FlexProps	-	-
innerStyle	自定义样式	ViewStyle	-	-

Slots

名称	说明
default	按钮的文字，等同于 text 属性
leftIcon	左侧图标插槽
rightIcon	右侧图标插槽

Events

名称	说明	参数
click	点击事件	$event

主题变量

名称	类型	默认值	说明
ButtonBorderWidth	number	1.5	-
ButtonDangerBackgroundColor	string	danger	-
ButtonDangerColor	string	white	-
ButtonDisableOpacity	number	0.5	-
ButtonLargeFonstSize	number	20	-
ButtonLargerFonstSize	number	28	-
ButtonMediumFonstSize	number	14	-
ButtonMiniFonstSize	number	10.5	-
ButtonPaddingHorizontalLarge	number	20	-
ButtonPaddingHorizontalLarger	number	30	-
ButtonPaddingHorizontalMedium	number	15	-
ButtonPaddingHorizontalMini	number	0	-
ButtonPaddingHorizontalSmall	number	10	-
ButtonPaddingVerticalLarge	number	15	-
ButtonPaddingVerticalLarger	number	20	-
ButtonPaddingVerticalMedium	number	10	-
ButtonPaddingVerticalMini	number	0	-
ButtonPaddingVerticalSmall	number	5	-
ButtonPlainDangerBorderColor	string	danger	-
ButtonPlainDangerColor	string	danger	-
ButtonPlainDefaultBorderColor	string	border	-
ButtonPlainDefaultColor	string	text	-
ButtonPlainPrimaryBorderColor	string	primary	-
ButtonPlainPrimaryColor	string	primary	-
ButtonPlainSuccessBorderColor	string	success	-
ButtonPlainSuccessColor	string	success	-
ButtonPlainWarningBorderColor	string	warning	-
ButtonPlainWarningColor	string	warning	-
ButtonPrimaryBackgroundColor	string	primary	-
ButtonPrimaryColor	string	white	-
ButtonSmallFonstSize	number	12	-
ButtonSuccessBackgroundColor	string	success	-
ButtonSuccessColor	string	white	-
ButtonWarningBackgroundColor	string	warning	-
ButtonWarningColor	string	white	-