Press UI

# Button 按钮

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

# 引入

import PressButton from 'press-ui/press-button/press-button';

export default {
  components: {
    PressButton,
  }
}

# 代码演示

# 按钮类型

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

<press-button type="default">默认按钮</press-button>
<press-button type="primary">主要按钮</press-button>
<press-button type="info">信息按钮</press-button>
<press-button type="warning">警告按钮</press-button>
<press-button type="danger">危险按钮</press-button>

# 朴素按钮

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

<press-button plain type="primary">朴素按钮</press-button>
<press-button plain type="info">朴素按钮</press-button>

# 细边框

设置hairline属性可以开启 0.5px 边框，基于伪类实现。

<press-button plain hairline type="primary">细边框按钮</press-button>
<press-button plain hairline type="info">细边框按钮</press-button>

# 禁用状态

通过disabled属性来禁用按钮，此时按钮的click事件不会触发。

<press-button disabled type="primary">禁用状态</press-button>
<press-button disabled type="info">禁用状态</press-button>

# 加载状态

<press-button loading type="primary" />
<press-button loading type="primary" loading-type="spinner" />
<press-button loading type="info" loading-text="加载中..." />

# 按钮形状

<press-button square type="primary">方形按钮</press-button>
<press-button round type="info">圆形按钮</press-button>

# 图标按钮

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

<press-button icon="star-o" type="primary" />
<press-button icon="star-o" type="primary">按钮</press-button>
<press-button icon="https://mike-1255355338.cos.ap-guangzhou.myqcloud.com/press%2Fimg%2Fpress-ui-avatar.png" type="info">
  按钮
</press-button>

# 按钮尺寸

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

<press-button type="primary" size="large">大号按钮</press-button>
<press-button type="primary" size="normal">普通按钮</press-button>
<press-button type="primary" size="small">小型按钮</press-button>
<press-button type="primary" size="mini">迷你按钮</press-button>

# 块级元素

通过block属性可以将按钮的元素类型设置为块级元素。

<press-button type="primary" block>块级元素</press-button>

# 自定义颜色

通过color属性可以自定义按钮的颜色。

<press-button color="#7232dd">单色按钮</press-button>
<press-button color="#7232dd" plain>单色按钮</press-button>
<press-button color="linear-gradient(to right, #4bb0ff, #6149f6)">
  渐变色按钮
</press-button>

# E-SPORT

扩充了type字段，可为以下几种。

<press-button type="e-sport-primary">primary</press-button>
<press-button type="e-sport-primary-bg">primary-bg</press-button>
<press-button type="e-sport-primary-bg-lg">primary-bg-lg</press-button>
<press-button type="e-sport-primary-bg-xl">primary-bg-xl</press-button>
<press-button type="e-sport-secondary">secondary</press-button>
<press-button type="e-sport-border">border</press-button>

# E-SPORT-DISABLE

E-SPORT类型的按钮加上disabled，即为禁用状态。

<press-button disabled type="e-sport-primary">primary</press-button>
<press-button disabled type="e-sport-primary-bg">primary-bg</press-button>
<press-button disabled type="e-sport-primary-bg-lg">primary-bg-lg</press-button>
<press-button disabled type="e-sport-primary-bg-xl">primary-bg-xl</press-button>
<press-button disabled type="e-sport-secondary">secondary</press-button>
<press-button disabled type="e-sport-border">border</press-button>

# E-SPORT-LOADING

E-SPORT类型的按钮加上loading，即为加载中状态。

<press-button loading type="e-sport-primary">primary</press-button>
<press-button loading type="e-sport-primary-bg">primary-bg</press-button>
<press-button loading type="e-sport-primary-bg-lg">primary-bg-lg</press-button>
<press-button loading type="e-sport-primary-bg-xl">primary-bg-xl</press-button>
<press-button loading type="e-sport-secondary">secondary</press-button>
<press-button loading type="e-sport-border">border</press-button>

# API

# Props

参数 说明 类型 默认值
id 标识符 string -
type 按钮类型，可选值参见下方 string default
size 按钮尺寸，可选值为 normal large small mini string normal
color 按钮颜色，支持传入linear-gradient渐变色 string -
icon 左侧图标名称或图片链接，可选值见 Icon 组件 string -
class-prefix 图标类名前缀，同 Icon 组件的 class-prefix 属性 string press-icon-plus
plain 是否为朴素按钮 boolean false
block 是否为块级元素 boolean false
round 是否为圆形按钮 boolean false
square 是否为方形按钮 boolean false
disabled 是否禁用按钮 boolean false
hairline 是否使用 0.5px 边框 boolean false
loading 是否显示为加载状态 boolean false
loading-text 加载状态提示文字 string -
loading-type 加载状态图标类型，可选值为 spinner string circular
loading-size 加载图标大小 string 20px
custom-style 自定义样式 string -
open-type 微信开放能力，可参考 微信官方文档 (opens new window) string -
app-parameter 打开 APP 时，向 APP 传递的参数 string -
lang 指定返回用户信息的语言，zh_CN 简体中文，
zh_TW 繁体中文，en 英文		 string en
session-from 会话来源 string -
business-id 客服消息子商户 id number -
send-message-title 会话内消息卡片标题 string 当前标题
send-message-path 会话内消息卡片点击跳转小程序路径 string 当前分享路径
send-message-img 会话内消息卡片图片 string 截图
show-message-card 显示会话内消息卡片 string false
dataset open-type 为 share 时，可在 onShareAppMessage 事件的 event.target.dataset.detail 中看到传入的值 any -
form-type 用于 form 组件，可选值为submit reset，点击分别会触发 form 组件的 submit/reset 事件 string -
custom-class 根节点样式类 string -
hover-class 按钮按下去的样式类 string -
loading-class 按钮加载中的样式类 string -

# Events

事件名 说明 参数
click 点击按钮，且按钮状态不为加载或禁用时触发 -
getuserinfo 用户点击该按钮时，会返回获取到的用户信息，
从返回参数的 detail 中获取到的值同 wx.getUserInfo		 -
contact 客服消息回调 -
getphonenumber 获取用户手机号回调 -
error 当使用开放能力时，发生错误的回调 -
opensetting 在打开授权设置页后回调 -
chooseavatar 当 open-type 的值为 chooseAvatar 时，选择头像之后的回调 -

Button 提供的是 click 事件而不是原生 tap 事件，按钮禁用时，click 事件不会触发，tap 事件依然会触发。

# Button Type

type 可选值有：

  • primary
  • info
  • warning
  • danger
  • e-sport-primary
  • e-sport-primary-bg
  • e-sport-primary-bg-lg
  • e-sport-primary-bg-xl
  • e-sport-secondary
  • e-sport-border

# 条件编译

如果是非 uni-app 的 Vue 项目，需要配置相应的条件编译的 Webpack Loader 或者 Vite Plugin。

以下几个变量需要定义（true 或者 false）：

  • VUE2
  • VUE3
  • MP
  • H5
  • APP
  • APP-PLUS

# 在线调试

横屏

← Cell →