更新记录

0.0.1（2026-03-11） 下载此版本

Changelog

1.0.0 (2026-03-11)

Features

• button: 新增 pl-button 组件，实现 Vant 风格按钮 UI
• platform: 兼容 H5、微信小程序、支付宝小程序、抖音小程序、App 等多端
• api: 支持 size (large/medium/small/mini)、type (primary/success/warning/danger/info/error)、plain、hairline、round、square 等属性
• loading: 支持 loading 状态切换、loading-text 文案、loading-type 图标类型
• open-type: 支持小程序原生开放能力透传（getPhoneNumber, getUserInfo, contact 等）
• icon: 支持 icon 图片链接与字体图标类名
• style: 支持 custom-class 自定义根样式类
• router: 支持 url/to/replace 属性进行页面跳转与路由导航

平台兼容性

uni-app(4.61)

pluis-button 按钮组件

一个基于 uni-app 的轻量级、跨端按钮组件，API 风格对齐 Vant UI，同时完美支持小程序原生开放能力（如获取用户信息、手机号、客服等）。

特性

• 多端兼容：支持 H5、微信小程序、支付宝小程序、抖音小程序、App 等 uni-app 支持的所有平台。
• Vant 风格：属性命名与用法与 Vant Button 保持一致，零成本上手。
• 开放能力：透传小程序 open-type 及相关回调事件，无缝对接原生能力。
• 丰富样式：支持朴素、细边框、圆角、方形、块级、自定义颜色、渐变色等。
• 加载状态：支持 loading 动画、自定义加载文案与图标类型。

安装方式

本组件符合 uni_modules 规范（暂未发布到插件市场，可手动集成）。

1. 将 components/pl-button 目录复制到你的项目的 components 目录下。
2. 组件符合 easycom 规范，直接在页面中使用 <pl-button> 即可，无需手动 import。

或者作为插件全局注册（可选）：

// main.js
import PlButtonPlugin from './plugins/pl-button/index.js'
// ...
app.use(PlButtonPlugin)

快速上手

基础用法

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

朴素按钮

<pl-button plain type="primary">朴素按钮</pl-button>
<pl-button plain type="success">朴素按钮</pl-button>

细边框

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

禁用状态

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

加载状态

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

形状与尺寸

<pl-button square type="primary">方形按钮</pl-button>
<pl-button round type="primary">圆形按钮</pl-button>
<pl-button block type="primary">块级元素</pl-button>

<pl-button size="large">大号按钮</pl-button>
<pl-button size="medium">普通按钮</pl-button>
<pl-button size="small">小型按钮</pl-button>
<pl-button size="mini">迷你按钮</pl-button>

图标按钮

<pl-button icon="star-o" type="primary" />
<pl-button icon="https://fastly.jsdelivr.net/npm/@vant/assets/user-active.png" type="primary">按钮</pl-button>

自定义颜色

<pl-button color="#7232dd">单色按钮</pl-button>
<pl-button color="#7232dd" plain>单色按钮</pl-button>
<pl-button color="linear-gradient(to right, #ff6034, #ee0a24)">渐变色按钮</pl-button>

页面导航

<!-- H5跳转 -->
<pl-button url="https://github.com">URL 跳转</pl-button>
<!-- 路由跳转 -->
<pl-button to="/pages/index/index">路由跳转</pl-button>

小程序开放能力

支持 open-type 及相关回调，属性与 uni-app/微信小程序原生 button 保持一致。

<pl-button open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">获取手机号</pl-button>
<pl-button open-type="getUserInfo" @getuserinfo="onGetUserInfo">获取用户信息</pl-button>
<pl-button open-type="contact">客服会话</pl-button>

API

Props

Events

(支持所有 uni-app button 组件的原生事件)

开源协议

MIT License