Skip to content

Button 按钮

基础用法

  • 内置一些主题,设计样式更方便
vue
<template>
	<sn-button text="按钮"></sn-button>
</template>

更多演示请下载 demo 查看

属性

参数说明类型默认值可选值
text按钮文本内容String--
disabled是否禁用Booleanfalsetrue | false
loading是否加载状态Booleanfalsetrue | false
long是否长按钮Booleanfalsetrue | false
dashed是否镂空且显示虚线边框Booleanfalsetrue | false
round是否显示为圆形(为 trueborderRadius 强制设为 50%Booleanfalsetrue | false
roundSize圆形按钮(round=true)的直径String45px-
borderRadius按钮圆角大小String$normal-
padding按钮内边距String12px
type按钮主题样式类型Stringinfoinfo | primary | success | error | warning
level按钮等级Stringfirstfirst | second | third | least
align按钮文本对齐方向Stringcenter-
textColor按钮文本颜色String--
disabledTextColor禁用状态下按钮文本颜色String--
bgColor按钮背景颜色String--
activeBgColor按钮按下时背景颜色String--
disabledBgColor禁用状态下按钮颜色String--
textSize按钮文本大小String--
textFont按钮文本字体String--
customStyle自定义按钮样式UTSJSONObject{}-
customTextStyle自定义按钮文本样式UTSJSONObject{}-

事件

名称类型说明
click(e: UniPointerEvent) => void点击按钮时触发

插槽

名称说明
default替换按钮内部原有的 text ,可以是任意组件

使用 MIT 协议