m-button 按钮

简述

通用按钮组件，支持多种样式、尺寸与颜色、加载态与禁用态，以及微信开放能力（如获取手机号）。

注意

openType、@getphonenumber 等依赖各端实现；H5 / App 部分能力不可用或与小程序表现不同。

平台差异说明

App（vue）	App（nvue）	H5	小程序
√	√	√	√

演示地址

与线上 H5 演示基座 分包一致（文档站右下角预览 iframe 亦指向同一路径）。

类型	地址
分包路径	pages_demo/button/button
线上 H5（hash）	打开演示

基本使用

<template>
	<view>
		<m-button type="primary" @click="handleClick">确定</m-button>
	</view>
</template>

<script setup lang="uts">
	const handleClick = () => {
		console.log('点击了按钮')
	}
</script>

Props

参数	说明	类型	默认值
type	样式类型，primary / white / danger / warning / green / blue / gray / black / brown / gray-primary / gray-danger / gray-warning / gray-green	string	primary
shadow	是否显示阴影	boolean	false
width	宽度，单位 rpx 或 %	string	100%
height	高度，单位 rpx	string	- (自动计算)
btnSize	预设尺寸 medium / small / mini / tiny（超迷你）	string	-
size	字体大小，单位 rpx	number | string	0 (自动)
bold	字体加粗	boolean	false
margin	外边距	string	0
shape	形状 circle (圆角) / square (方形) / rightAngle (平角)	string	square
plain	是否空心边框	boolean	false
link	是否链接样式	boolean	false
disabled	是否禁用	boolean	false
disabledGray	禁用后是否灰色背景	boolean	false
loading	是否显示加载中	boolean	false
formType	表单类型 submit / reset	string	-
openType	微信开放能力	string	-
appParameter	openType 额外参数	string	-
preventClick	是否防止重复点击（200ms 内只响应一次）	boolean	false
index	索引	number | string	0

Events

事件名	说明	回调参数
click	点击按钮时触发	{ index: number }
getuserinfo	获取用户信息	detail
getphonenumber	获取手机号	detail
contact	打开客服	detail
error	错误	detail
chooseavatar	选择头像	detail
launchapp	打开app	detail

类型说明

type 可选值

值	说明
primary	主色调 - 蓝色
danger	危险 - 红色
warning	警告 - 橙色
green	成功 - 绿色
blue	蓝色
gray	灰色
white	白色
black	黑色
brown	棕色
gray-primary	浅灰底 + 主色强调
gray-danger	浅灰底 + 危险色强调
gray-warning	浅灰底 + 警告色强调
gray-green	浅灰底 + 成功色强调

btnSize 预设尺寸

未传 size（或为 0）时，字号由 getSize 按 btnSize 推导（数值经 toCssLength 转为 rpx）；显式传入非零 size 时优先。档位字符串会做 trim + 小写匹配。

宽/高映射仅包含 medium / small / mini / tiny；large 仅影响字号（34rpx），宽高仍由 width / height 或默认 height 96rpx 等规则决定。

值	宽度	高度	默认字号（未传 size）
large	（沿用 width，默认 100%）	（默认 96rpx 或自定义 height）	34rpx
medium	368rpx	80rpx	30rpx
small	240rpx	80rpx	26rpx
mini	116rpx	64rpx	18rpx
tiny	112rpx	48rpx	12rpx

插槽

名称	说明
default	按钮文字

示例

主要样式

<m-button type="primary">主按钮</m-button>
<m-button type="danger">危险按钮</m-button>
<m-button type="warning">警告按钮</m-button>
<m-button type="green">成功按钮</m-button>

空心按钮

<m-button type="primary" plain>空心按钮</m-button>

圆角按钮

<m-button type="primary" shape="circle">圆角按钮</m-button>

禁用状态

<m-button type="primary" disabled>禁用按钮</m-button>

加载中

<m-button type="primary" loading>加载中</m-button>

开放能力 - 获取手机号

<m-button
	type="primary"
	open-type="getphonenumber"
	@getphonenumber="handleGetPhone"
>获取手机号</m-button>