按钮 Button

按钮组件。

兼容性

• 兼容：✅
• 不兼容：❌
• 未知：❔

H5	安卓	苹果	微信	支付宝	百度	抖音	QQ	快手	飞书	京东
✅	✅	✅	✅	✅	✅	✅	✅	✅	✅	✅

小红书	鸿蒙	360	华为快应用	快应用联盟
✅	❔	❔	❔	❔

插件市场地址

DCloud 插件市场地址

基础使用

• 通过 text 属性设置按钮文本。

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

主题按钮

• 给按钮添加对应的辅助类名。

提示

辅助类使用规则

<template>
    <pure-button text="主要按钮" class="pure-button-primary"></pure-button>
    <pure-button text="成功按钮" class="pure-button-success"></pure-button>
    <pure-button text="危险按钮" class="pure-button-danger"></pure-button>
    <pure-button text="警告按钮" class="pure-button-warning"></pure-button>
    <pure-button text="信息按钮" class="pure-button-info"></pure-button>
</template>

图标按钮

• 通过 icon 属性设置按钮图标名称。

<template>
    <pure-button text="图标按钮" icon="__gouwudai"></pure-button>
    <pure-button icon="__shebei"></pure-button>
</template>

禁用按钮

• 通过 disabled 属性设置禁用状态。

<template>
    <pure-button text="禁用按钮" disabled></pure-button>
</template>

加载按钮

• 通过 loading 属性设置按钮的加载状态。
• 通过 loadingText 属性设置按钮的加载文本。

<template>
    <pure-button text="加载按钮" loading></pure-button>
    <pure-button text="加载按钮" loading loadingText="加载中..."></pure-button>
</template>

按钮防抖

• 通过 debounce 属性开启或关闭防抖功能。
• 通过 debounceTime 属性设置防抖间隔，单位为 ms，默认为 800ms。
• 通过 debounceTip 属性可以设置防抖提示文本。

<template>
    <pure-button text="防抖按钮" icon="__shandian"></pure-button>
    <pure-button text="开启防抖提示" icon="__shandian" debounceTip="点击太快啦"></pure-button>
</template>

按钮副文本

• 为了方便使用，按钮组件支持设置副文本，通过 subtext 属性设置副文本。
• 副文本文字颜色相对于主文本颜色较浅，是通过 opacity 实现的，默认值为 0.75。
• 副文本的字体大小是相对于主文本的字体大小的 0.75em。

<template>
    <pure-button text="带副文本的按钮" subtext="我是副文本"></pure-button>
</template>

圆角按钮

• 通过添加辅助类 pure-button-round 使用。

提示

辅助类使用规则

<template>
    <pure-button text="圆角按钮" class="pure-button-round"></pure-button>
</template>

方形按钮

• 通过添加辅助类 pure-button-square 使用。

提示

辅助类使用规则

<template>
    <pure-button text="方形按钮" class="pure-button-square"></pure-button>
</template>

朴素按钮

• 通过添加辅助类 pure-button-plain 使用。

提示

辅助类使用规则

<template>
    <pure-button text="朴素按钮" class="pure-button-primary pure-button-plain"></pure-button>
    <pure-button text="朴素按钮" class="pure-button-success pure-button-plain"></pure-button>
    <pure-button text="朴素按钮" class="pure-button-danger pure-button-plain"></pure-button>
    <pure-button text="朴素按钮" class="pure-button-warning pure-button-plain"></pure-button>
    <pure-button text="朴素按钮" class="pure-button-info pure-button-plain"></pure-button>
</template>

浅化背景

• 通过添加辅助类 pure-button-light 使用。

提示

辅助类使用规则

<template>
    <pure-button text="浅化背景" class="pure-button-primary pure-button-light"></pure-button>
    <pure-button text="浅化背景" class="pure-button-success pure-button-light"></pure-button>
    <pure-button text="浅化背景" class="pure-button-danger pure-button-light"></pure-button>
    <pure-button text="浅化背景" class="pure-button-warning pure-button-light"></pure-button>
    <pure-button text="浅化背景" class="pure-button-info pure-button-light"></pure-button>
</template>

反转按钮

• 文字在左，图标在右。
• 通过添加辅助类 pure-button-reversal 使用。

提示

辅助类使用规则

<template class="pure-button-success pure-button-reversal">
    <pure-button text="反转按钮" icon="__shebei"></pure-button>
</template>

块级按钮

• 通过添加辅助类 pure-button-block 使用。

提示

辅助类使用规则

<template>
    <pure-button text="块级按钮" class="pure-button-block"></pure-button>
</template>

链接按钮

• 通过添加辅助类 pure-button-link 使用。
• 通过添加辅助类 pure-button-underline 给连接按钮添加下划线。

提示

辅助类使用规则

<template>
    <pure-button class="pure-button-primary pure-button-link" text="链接按钮" @onClick="handleClick"></pure-button>
    <pure-button class="pure-button-warning pure-button-link pure-button-underline" text="链接按钮" @onClick="handleClick"></pure-button>
</template>

Props

属性名	说明	类型	默认值	可选值	版本
hoverClass	同 view 的 hover-class	String	"pure-hover"	-	+1.0.0
text	按钮主文本	String	""	-	+1.0.0
subtext	按钮副文本	String	""	-	+1.0.0
icon	按钮图标名称，同图标组件（Icon）的 name 属性，参考	String	""	-	+1.0.0
iconMode	图片图标的裁剪模式，同图标组件（Icon）的 mode 属性，参考	String	undefined	-	+1.0.0
disabled	禁用状态	Boolean	false	true	+1.0.0
disabledClass	禁用类名	String	pure-disabled	-	+1.0.0
loading	加载状态	Boolean	false	true	+1.0.0
loadingText	加载提示文本	String	""	-	+1.0.0
loadingIcon	加载图标名称，同图标组件（Icon）的 name 属性，参考	String	__loading	-	+1.0.0
debounce	是否开启防抖功能	Boolean	true	false	+1.0.0
debounceTime	防抖时间间隔	[String, Number]	800	-	+1.0.0
debounceTip	防抖提示文本，有则提示，没有则不提示	String	""	-	+1.0.0
<button> 组件的原生属性	参考	-	-	-	+1.0.0

Event

事件名	说明	回调参数	版本
onClick	点击事件	-	+1.0.0
<button> 组件的原生事件	参考	-	+1.0.0

Slots

名称	说明	参数	版本
default	默认，文本区域	-	+1.0.0
icon	图标	-	+1.0.0
right	右侧区域	-	+1.0.0
loading	加载	-	+1.0.0