按钮 Button
按钮组件。
重要提示
重要提示
需在 App.vue 中引入 pure-styles 样式，@import '@/uni_modules/pure-styles/index.css';
兼容性
- 兼容：✅
- 不兼容：❌
- 未知：❔
| H5 | 安卓 | 苹果 | 微信 | 支付宝 | 百度 | 抖音 | 快手 | 飞书 | 京东 | |
|---|---|---|---|---|---|---|---|---|---|---|
| ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| 小红书 | 鸿蒙 | 360 | 华为快应用 | 快应用联盟 |
|---|---|---|---|---|
| ✅ | ❔ | ❔ | ❔ | ❔ |
插件市场地址
基础使用
- 通过
text属性设置按钮文本。
vue
<template>
<pure-button text="默认按钮"></pure-button>
</template>主题按钮
- 给按钮添加对应的辅助类名。
提示
vue
<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属性设置按钮图标名称。
vue
<template>
<pure-button text="图标按钮" icon="__gouwudai"></pure-button>
<pure-button icon="__shebei"></pure-button>
</template>禁用按钮
- 通过
disabled属性设置禁用状态。
vue
<template>
<pure-button text="禁用按钮" disabled></pure-button>
</template>加载按钮
- 通过
loading属性设置按钮的加载状态。 - 通过
loadingText属性设置按钮的加载文本。
vue
<template>
<pure-button text="加载按钮" loading></pure-button>
<pure-button text="加载按钮" loading loadingText="加载中..."></pure-button>
</template>按钮防抖
- 通过
debounce属性开启或关闭防抖功能。 - 通过
debounceTime属性设置防抖间隔，单位为ms，默认为800ms。 - 通过
debounceTip属性可以设置防抖提示文本。
vue
<template>
<pure-button text="防抖按钮" icon="__shandian"></pure-button>
<pure-button text="开启防抖提示" icon="__shandian" debounceTip="点击太快啦"></pure-button>
</template>按钮副文本
- 为了方便使用，按钮组件支持设置副文本，通过
subtext属性设置副文本。 - 副文本文字颜色相对于主文本颜色较浅，是通过
opacity实现的，默认值为0.75。 - 副文本的字体大小是相对于主文本的字体大小的
0.75em。
vue
<template>
<pure-button text="带副文本的按钮" subtext="我是副文本"></pure-button>
</template>圆角按钮
- 通过添加辅助类
pure-button-round使用。
提示
vue
<template>
<pure-button text="圆角按钮" class="pure-button-round"></pure-button>
</template>方形按钮
- 通过添加辅助类
pure-button-square使用。
提示
vue
<template>
<pure-button text="方形按钮" class="pure-button-square"></pure-button>
</template>朴素按钮
- 通过添加辅助类
pure-button-plain使用。
提示
vue
<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-reversal使用。
提示
vue
<template class="pure-button-success pure-button-reversal">
<pure-button text="反转按钮" icon="__shebei"></pure-button>
</template>块级按钮
- 通过添加辅助类
pure-button-block使用。
提示
vue
<template>
<pure-button text="块级按钮" class="pure-button-block"></pure-button>
</template>链接按钮
- 通过添加辅助类
pure-button-link使用。 - 通过添加辅助类
pure-button-underline给连接按钮添加下划线。
提示
vue
<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 |
辅助类
| 类名 | 说明 | 版本 |
|---|---|---|
pure-button-primary | 主题-主要按钮 | +1.0.0 |
pure-button-success | 主题-成功按钮 | +1.0.0 |
pure-button-danger | 主题-危险按钮 | +1.0.0 |
pure-button-warning | 主题-警告按钮 | +1.0.0 |
pure-button-info | 主题-信息按钮 | +1.0.0 |
pure-button-block | 块级按钮 | +1.0.0 |
pure-button-round | 圆角按钮 | +1.0.0 |
pure-button-square | 方形按钮 | +1.0.0 |
pure-button-plain | 朴素按钮 | +1.0.0 |
pure-button-reversal | 反转按钮 | +1.0.0 |
pure-button-link | 链接按钮 | +1.0.0 |
pure-button-underline | 下划线按钮 | +1.0.0 |