按钮 Button
- 一个基础的按钮组件
- 支持防抖功能（默认开启）
- 支持按钮图标
- 支持
loading
提示
为了组件简单设计原则，另外在实际开发中，不同项目对按钮要求的样式差异较大，按钮组件未内置主题，你可以通过设置 --pure-button-theme-color 变量来设置按钮的主题。建议在实际项目开发中，拿到设计稿后，根据设计稿的样式来将不同主题的按钮通过在 App.vue 中定义全局主题 class 的形式定好按钮主题，在使用时直接给按钮组件添加对应 class 来使用主题按钮。
提示
另外，为了方便使用，我们还设计了一些简单的辅助类，具体使用参考下方示例。
插件市场地址
https://ext.dcloud.net.cn/plugin?name=pure-button
基础使用
通过 text 属性设置按钮文本。
vue
<pure-button text="默认按钮"></pure-button>带图标的按钮
通过 icon 属性设置按钮图标名称即可使用。
vue
<pure-button text="图标按钮" icon="__gouwudai"></pure-button>只显示图标
如果需要只显示图标，可将 text 属性设置为空字符串或不设置 text 属性。
vue
<pure-button icon="__shebei"></pure-button>加载状态
通过 loading 属性设置按钮的加载状态。
vue
<pure-button text="加载按钮" loading></pure-button>
<pure-button text="加载按钮" loading loadingText="加载中..."></pure-button>防抖
- 通过
debounce属性可以开启或关闭防抖功能 - 防抖间隔默认为
800ms - 通过
debounceTime属性可以设置防抖间隔，单位为ms - 通过
debounceTip属性可以设置是否显示防抖提示 - 通过
debounceTipText属性可以设置防抖提示文本
vue
<pure-button text="防抖按钮" icon="__shandian"></pure-button>
<pure-button text="开启防抖提示" icon="__shandian" debounceTip></pure-button>
<pure-button text="自定义防抖提示" icon="__shandian" debounceTip debounceTipText="点击太快啦！！！"></pure-button>带副文本的按钮
- 为了方便使用，按钮组件支持带副文本的按钮
- 通过
subtext属性设置副文本即可 - 副文本颜色通过
opacity属性设置为先对于住文本色的浅色形式，默认值为0.7
vue
<pure-button text="带副文本的按钮" subtext="我是副文本"></pure-button>关于主题
通过 --pure-button-theme-color 可以设置简单的主题按钮。
vue
<view style="--pure-button-theme-color: #1989fa;">
<pure-button text="主要按钮"></pure-button>
</view>
<!-- 如果将 `style` 写到组件上，需设置 `mergeVirtualHostAttributes`，合并小程序组件虚拟节点外层属性 -->
<pure-button text="成功按钮" style="--pure-button-theme-color: #07c160;"></pure-button>
<pure-button text="危险按钮" style="--pure-button-theme-color: #ee0a24;"></pure-button>
<pure-button text="警告按钮" style="--pure-button-theme-color: #ff976a;"></pure-button>
<pure-button text="信息按钮" style="--pure-button-theme-color: #999999;"></pure-button>提示
如果你的项目设置了 mergeVirtualHostAttributes 合并由 Vue 组件编译而成的小程序组件虚拟节点外层属性功能，可以直接将 style 写到组件上，否则需要写到组件的父元素或组件元素上。
辅助类
提示
需在 App.vue 中引入 pure-styles 辅助类文件。
css
@import "@/uni_modules/pure-styles/index.css";vue
<view class="pure-button-round">
<pure-button text="圆角按钮" @click="handleClick"></pure-button>
</view>
<!-- 如果将 `class` 写到组件上，需设置 `mergeVirtualHostAttributes`，合并小程序组件虚拟节点外层属性 -->
<pure-button text="方形按钮" class="pure-button-square"></pure-button>
<pure-button text="朴素按钮" class="pure-button-plain"></pure-button>
<pure-button text="块级按钮" class="pure-button-block"></pure-button>提示
如果你的项目设置了 mergeVirtualHostAttributes 合并由 Vue 组件编译而成的小程序组件虚拟节点外层属性功能，可以直接将 class 写到组件上，否则需要写到组件的父元素或组件元素上。
Props
| 属性名 | 说明 | 类型 | 默认值 | 可选值 | 版本 |
|---|---|---|---|---|---|
hoverClass | 同 view 的 hover-class | String | "pure-button-hover-class" | - | +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 |
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 | 是否显示防抖提示 | Boolean | false | true | +1.0.0 |
debounceTipText | 防抖提示文本 | String | 操作过快，请放缓操作节奏 | - | +1.0.0 |
<button> 组件的原生属性 | 参考 | - | - | - | +1.0.0 |
Event
| 事件名 | 说明 | 回调参数 | 版本 |
|---|---|---|---|
click | 点击事件 | - | 1.0.0 |
<button> 组件的原生事件 | 参考 | - | 1.0.0 |
样式变量
| 变量名 | 默认值 | 版本 |
|---|---|---|
--pure-button-theme-color | #1989fa | +1.0.0 |
--pure-button-display | inline-flex 或 flex | +1.0.0 |
--pure-button-flex-direction | row | +1.0.0 |
--pure-button-align-items | center | +1.0.0 |
--pure-button-justify-content | center | +1.0.0 |
--pure-button-background | var(--pure-button-theme-color, #1989fa) 或 #ffffff | +1.0.0 |
--pure-button-height | 44px 或 56px | +1.0.0 |
--pure-button-border-radius | 4px 或 0px 或 1000px | +1.0.0 |
--pure-button-border | none | +1.0.0 |
--pure-button-border-width | 1px | +1.0.0 |
--pure-button-border-style | solid | +1.0.0 |
--pure-button-border-color | var(--pure-button-theme-color, #1989fa) | +1.0.0 |
--pure-button-padding | 0 16px | +1.0.0 |
--pure-button-text-align | center | +1.0.0 |
--pure-button-color | #ffffff 或 var(--pure-button-theme-color, #1989fa) | +1.0.0 |
--pure-button-hover-opacity | 0.8 | +1.0.0 |
--pure-button-disabled-opacity | 0.5 | +1.0.0 |
--pure-button-content-display | flex | +1.0.0 |
--pure-button-content-flex-direction | row | +1.0.0 |
--pure-button-content-align-items | center | +1.0.0 |
--pure-button-content-justify-content | 5px | +1.0.0 |
--pure-button-content-gap | 4px | +1.0.0 |
--pure-button-text-display | flex | +1.0.0 |
--pure-button-text-flex-direction | column | +1.0.0 |
--pure-button-text-align-items | center | +1.0.0 |
--pure-button-text-justify-content | center | +1.0.0 |
--pure-button-text-gap | 0px | +1.0.0 |
--pure-button-subtext-font-size | 0.7em | +1.0.0 |
--pure-button-subtext-color | - | +1.0.0 |
--pure-button-subtext-opacity | 0.7 | +1.0.0 |
--pure-button-loading-display | flex | +1.0.0 |
--pure-button-loading-flex-direction | row | +1.0.0 |
--pure-button-loading-align-items | center | +1.0.0 |
--pure-button-loading-justify-content | center | +1.0.0 |
--pure-button-loading-gap | 4px | +1.0.0 |
--pure-button-loading-animation | - | +1.0.0 |
--pure-button-loading-animation-duration | 1.2s | +1.0.0 |
--pure-button-loading-animation-timing-function | linear | +1.0.0 |
--pure-button-loading-animation-iteration-count | infinite | +1.0.0 |