Pure Ui 文档
搜索文档 K

Appearance

按钮 ​

按钮组件。

文本 ​

  • 按钮文本可以通过 text 属性设置。
  • 也可以通过默认插槽设置按钮内容。
vue
<template>
	<!-- 按钮文本 -->
	<pure-button text="按钮"></pure-button>

	<!-- 按钮内容 -->
	<pure-button>
		<pure-icon name="__loading"></pure-icon>
	</pure-button>
</template>

边框 ​

  • 按钮默认无边框。
  • 主题按钮、幽灵按钮、镂空按钮默认有边框。
  • 可以通过 border 属性设置边框。
  • 边框颜色默认为按钮文字颜色，即 currentColor。
vue
<template>
	<pure-button text="边框按钮" border></pure-button>
</template>

主题 ​

通过 theme 属性设置按钮主题。有关主题的使用请参考 主题。

vue
<template>
	<!-- 内置主题 -->
	<pure-button text="主要按钮" theme="primary"></pure-button>
	<pure-button text="成功按钮" theme="success"></pure-button>
	<pure-button text="警告按钮" theme="warning"></pure-button>
	<pure-button text="危险按钮" theme="danger"></pure-button>
	<pure-button text="信息按钮" theme="info"></pure-button>

	<!-- 自定义主题 -->
	<pure-button text="自定义主题" theme="haha"></pure-button>
	<pure-button text="自定义主题" theme="--my-theme-hoho"></pure-button>
</template>

<style scoped lang="scss">
page {
	--pure-theme-haha: #007bff;
	--my-theme-hoho: #ff007b;
}
</style>

幽灵按钮 ​

  • 幽灵按钮是指按钮文字颜色与背景颜色相同，但背景颜色相对颜色较浅。
  • 通过 ghost 属性设置幽灵按钮。
vue
<template>
	<!-- 内置主题 -->
	<pure-button text="主要按钮" ghost theme="primary"></pure-button>
	<pure-button text="成功按钮" ghost theme="success"></pure-button>
	<pure-button text="警告按钮" ghost theme="warning"></pure-button>
	<pure-button text="危险按钮" ghost theme="danger"></pure-button>
	<pure-button text="信息按钮" ghost theme="info"></pure-button>

	<!-- 自定义主题 -->
	<pure-button text="自定义主题" ghost theme="haha"></pure-button>
	<pure-button text="自定义主题" ghost theme="--my-theme-hoho"></pure-button>
</template>

<style scoped lang="scss">
page {
	--pure-theme-haha: #007bff;
	--my-theme-hoho: #ff007b;
}
</style>

镂空按钮 ​

  • 镂空按钮是指按钮背景透明。
  • 通过 plain 属性设置镂空按钮。
vue
<template>
	<!-- 内置主题 -->
	<pure-button text="主要按钮" plain theme="primary"></pure-button>
	<pure-button text="成功按钮" plain theme="success"></pure-button>
	<pure-button text="警告按钮" plain theme="warning"></pure-button>
	<pure-button text="危险按钮" plain theme="danger"></pure-button>
	<pure-button text="信息按钮" plain theme="info"></pure-button>

	<!-- 自定义主题 -->
	<pure-button text="自定义主题" plain theme="haha"></pure-button>
	<pure-button text="自定义主题" plain theme="--my-theme-hoho"></pure-button>
</template>

<style scoped lang="scss">
page {
	--pure-theme-haha: #007bff;
	--my-theme-hoho: #ff007b;
}
</style>

图标 ​

  • 通过 iconName 属性设置前置图标。
  • 通过 afterIconName 属性设置后置图标。
  • 通过 iconOpts 属性设置前置图标配置。
  • 通过 afterIconOpts 属性设置后置图标配置。
vue
<template>
	<pure-button text="前置图标" iconName="__arrow-left"></pure-button>
	<pure-button text="后置图标" afterIconName="__arrow-right"></pure-button>
	<pure-button text="前后图标" iconName="__arrow-left" afterIconName="__arrow-right"></pure-button>
</template>

按钮形状 ​

通过 shape 属性设置按钮形状，可选值为：

  • square —— 矩形
  • round —— 圆角
  • cube —— 方块按钮
  • circle —— 圆形按钮
vue
<template>
	<pure-button text="矩形按钮" shape="square"></pure-button>
	<pure-button text="圆角按钮" shape="round"></pure-button>
	<pure-button text="方块按钮" shape="cube"></pure-button>
	<pure-button text="圆形按钮" shape="circle"></pure-button>
</template>

块状按钮 ​

通过 block 属性设置按钮是否为块状按钮，表现样式为宽度 100%。

vue
<template>
	<pure-button text="块状按钮" block theme="primary"></pure-button>
</template>

链接按钮 ​

  • 通过 link 属性设置按钮是否为连接按钮，表现样式类似于超链接。
  • 通过 underline 属性设置是否显示下划线，默认值为 false。
vue
<template>
	<pure-button text="连接按钮" link theme="primary"></pure-button>
	<pure-button text="带下划线" link theme="primary" underline></pure-button>
</template>

禁用状态 ​

通过 disabled 属性设置按钮是否为禁用状态，默认值为 false。

vue
<template>
	<pure-button text="连接按钮" disabled theme="primary"></pure-button>
	<pure-button text="带下划线" disabled theme="primary"></pure-button>
</template>

加载状态 ​

  • 通过 loading 属性设置按钮是否为加载状态，默认值为 false。
  • 通过 loadingText 属性设置加载状态下的按钮文字，默认值为空。
vue
<template>
	<pure-button text="加载按钮" loading theme="primary"></pure-button>
	<pure-button text="加载按钮" loading loadingText="加载中" theme="success"></pure-button>
</template>

按钮防抖 ​

  • 通过 debounce 属性设置是否开启按钮防抖，默认值为 true。
  • 通过 time 属性设置防抖间隔，单位为毫秒，默认值为 800。
  • 通过 tips 属性设置触发防抖时的提示文字，默认值为空。
vue
<template>
	<pure-button text="防抖按钮" debounce tips="请稍后再试" theme="primary"></pure-button>
</template>

属性 ​

名称类型默认值说明
hoverClassStringpure-hover按下去的样式类
textString按钮文字
borderBooleanfalse是否显示边框
disabledBooleanfalse是否禁用
themeString按钮主题
iconNameString前置图标名称
iconOptsObject前置图标选项 参考
afterIconNameString后置图标名称
afterIconOptsObject后置图标选项 参考
loadingBooleanfalse加载状态
loadingTextString加载状态文字
loadingIconNameString__loading加载状态图标名称
loadingIconOptsObject加载状态图标选项 参考
ghostBooleanfalse是否幽灵按钮
plainBooleanfalse是否镂空按钮
shapeString按钮形状
linkStringround按钮形状
shapeStringround按钮形状
blockBooleanfalse是否块级按钮
linkBooleanfalse是否链接按钮
underlineBooleanfalse是否下划线按钮
debounceBooleantrue是否开启防抖
timeNumber800防抖间隔时间，单位毫秒
tipsString防抖提示文字
openTypeString开放能力 参考
formTypeString用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件 参考
hoverStartTimeNumber20按住后多久出现点击态，单位毫秒 参考
hoverStayTimeNumber70手指松开后点击态保留时间，单位毫秒 参考
appParameterString打开 APP 时，向 APP 传递的参数 参考
hoverStopPropagationBooleanfalse指定是否阻止本节点的祖先节点出现点击态 参考
langStringzh-CN指定返回用户信息的语言 参考
sessionFromString会话来源 参考
sendMessageTitleString会话内消息卡片标题 参考
sendMessagePathString会话内消息卡片点击跳转小程序路径 参考
sendMessageImgString会话内消息卡片图片 参考
showMessageCardString是否显示会话内消息卡片 参考
groupIdString打开群资料卡时，传递的群号 参考
guildIdString打开频道页面时，传递的频道号 参考
publicIdString打开公众号资料卡时，传递的号码 参考
dataImIdString客服的抖音号 参考
dataImTypeStringIM 卡片类型 参考
dataGoodsIdString商品的 id 参考
dataOrderIdString订单的 id 参考
dataBizLineString商品类型 参考
scopeString支付宝小程序获取用户信息或获取用户手机号时，需同时设置此属性 参考

事件 ​

名称参数说明
onClick点击事件
onDebounce防抖触发事件
onGetPhoneNumberevent获取用户手机号回调 参考
onGetUserInfoevent获取用户信息回调 参考
onErrorevent当使用开放能力时，发生错误的回调 参考
onOpenSettingevent在打开授权设置页并关闭后回调 参考
onLaunchAppevent从小程序打开 App 成功的回调 参考
onContactevent客服消息回调 参考
onChooseAvatarevent获取用户头像回调 参考
onAgreePrivacyAuthorizationevent用户同意隐私协议事件回调 参考
onAddGroupAppevent添加群应用的回调 参考
onChooseAddressevent调起用户编辑并选择收货地址的回调 参考
onChooseInvoiceTitleevent用户选择发票抬头的回调 参考
onSubscribeevent订阅消息授权回调 参考
onLoginevent登录回调 参考
onIMevent监听跳转 IM 的成功回调 参考

插槽 ​

名称参数说明
#loading加载状态
#loading-icon加载图标
#loading-text加载提示文本
#icon前置图标
#default默认，按钮文本，按钮内容
#after-icon后置图标

样式变量 ​

名称说明
--pure-button-display布局类型
--pure-button-margin内边距
--pure-button-padding外边距
--pure-button-font-size文本大小
--pure-button-font-weight文本粗细
--pure-button-color文本颜色
--pure-button-width宽度
--pure-button-height高度
--pure-button-border-radius圆角大小
--pure-button-line-height行高
--pure-button-border边框样式
--pure-button-border-width边框粗细
--pure-button-border-style边框类型
--pure-button-border-color边框颜色
--pure-button-background背景
--pure-button-background-opacity背景透明度
--pure-button-gap按钮内容之间的间距
--pure-button-icon-font-size图标文本大小
--pure-button-icon-font-weight图标文本粗细
--pure-button-icon-color图标文本颜色
--pure-button-icon-margin图标外边距
--pure-button-loading-icon-font-size加载图标文本大小
--pure-button-loading-icon-font-weight加载图标文本粗细
--pure-button-loading-icon-color加载图标文本颜色
--pure-button-loading-icon-margin加载图标外边距
--pure-button-front-icon-font-size前置图标文本大小
--pure-button-front-icon-font-weight前置图标文本粗细
--pure-button-front-icon-color前置图标文本颜色
--pure-button-front-icon-margin前置图标外边距
--pure-button-after-icon-font-size后置图标文本大小
--pure-button-after-icon-font-weight后置图标文本粗细
--pure-button-after-icon-color后置图标文本颜色
--pure-button-after-icon-margin后置图标外边距
--pure-button-loading-animation-duration加载图标转一圈所需的时间，单位毫秒
--pure-button-loading-animation-timing-function加载图标的动画函数
--pure-button-disabled-opacity禁用状态时的透明度
--pure-button-underline-top下划线的布局 top 位置
--pure-button-underline-bottom下划线的布局 bottom 位置
--pure-button-underline-left下划线的布局 left 位置
--pure-button-underline-right下划线的布局 right 位置
--pure-button-underline-width下划线的宽度
--pure-button-underline-height下划线的高度
--pure-button-underline-color下划线的颜色
--pure-button-underline-transform下划线的 transform 属性

Pure Ui 文档

Copyright © 2025 济南晨霜信息技术有限公司