Btn 按钮

按钮组件，该组件内部实现以uni-app的button组件为基础，进行二次封装。

平台

App	小程序	H5
√	√	√

属性

属性名	类型	默认值	说明	平台
text	Number,String,Object	null	按钮文字 为Object时参考c-text的props	All
type	String	null	按钮类型 值primary,success,warning,danger,info,none 也支持scss变量$colors中扩展的主题 type=none，无样式	All
plaintext	Boolean	false	是否为纯文字按钮	All
plaintextBg	Boolean	false	纯文字按钮显示背景,plaintext=true时有效	All
size	String	base	按钮尺寸，值base,sm,lg 支持scss$btn-size中扩展的尺寸	All
fontSize	Number,String	null	文本大小	All
textColor	String	null	文本颜色 支持c-t-开头的颜色类	All
plain	Boolean	false	按钮是否镂空	All
disabled	Boolean	false	是否禁止状态	All
width	String,Number	null	宽	All
height	String,Number	null	高	All
radius	String,Number,Array	null	圆角，radius=round时为圆形	All
borderWidth	String,Number	null	边框宽度	All
icon	String,Object	null	前后置小图标	All
afterIcon	String,Object	null	后置小图标	All
loading	Boolean	false	是否显示loading	All
loadingIndicatorProps	Object	{}	loading指示器，详细参考c-loading-indicator的props	All
loadingText	String	null	loading文本	All
flexCol	Boolean	false	是否竖向布局	All
route	String,Object,Array	null	路由跳转 参考uni.$c.route()参数	All
throttleTime	Number,String	100	节流时间	All
color	String	null	自定义按钮颜色的色值 -使用后plain，plaintext属性将失效 -支持linear-gradient(tobottomright,#AD18F9,#05DFC7)渐变色，只支持两种颜色的渐变	All
tag	Boolean	false	开启tag 开启后将不具备原生button的功能，也无active效果	All
name	String	null	标识，用于在事件中返回	All
formType	String	null	参考uni-app的button组件	All
openType	String	null	参考uni-app的button组件	All
hoverClass	String	null	参考uni-app的button组件	All
hoverStartTime	Number	20	参考uni-app的button组件	All
hoverStayTime	Number	70	参考uni-app的button组件	All
appParameter	String	null	参考uni-app的button组件	All
hoverStopPropagation	Boolean	false	参考uni-app的button组件	All
lang	String	zh_CN	参考uni-app的button组件	All
sessionFrom	String	null	参考uni-app的button组件	All
sendMessageTitle	String	null	参考uni-app的button组件	All
sendMessagePath	String	null	参考uni-app的button组件	All
sendMessageImg	String	null	参考uni-app的button组件	All
showMessageCard	Boolean	false	参考uni-app的button组件	All
groupId	String	null	参考uni-app的button组件	All
guildId	String	null	参考uni-app的button组件	All
publicId	String	null	参考uni-app的button组件	All
dataImId	String	null	参考uni-app的button组件	All
dataImType	String	null	参考uni-app的button组件	All
dataGoodsId	String	null	参考uni-app的button组件	All
dataOrderId	String	null	参考uni-app的button组件	All
dataBizLine	String	null	参考uni-app的button组件	All
cClass	String,Array,Object	null	组件类	All
cStyle	String,Array,Object	null	组件样式	All
margin	String,Number,Array	null	外边距	All
padding	String,Number,Array	null	内边距	All
bgColor	String	null	背景色，支持c-bg-开头的背景色类	All

事件

事件名	说明
click	点击事件
getphonenumber	参考uni-app的button组件
getuserinfo	参考uni-app的button组件
error	参考uni-app的button组件
opensetting	参考uni-app的button组件
launchapp	参考uni-app的button组件
contact	参考uni-app的button组件
chooseavatar	参考uni-app的button组件
addgroupapp	参考uni-app的button组件
chooseaddress	参考uni-app的button组件
chooseinvoicetitle	参考uni-app的button组件
subscribe	参考uni-app的button组件
login	参考uni-app的button组件
im	参考uni-app的button组件

插槽

插槽名	说明
before	前置插槽
default	默认插槽

样式SCSS配置

可在uni.scss对默认按钮样式进行覆盖。

// 默认按钮背景颜色
$btn-default-bg-color: #f5f5f5;

// 纯文字按钮背景颜色
$btn-plaintext-bg-color: #f5f5f5;

// 按钮尺寸
$btn-size: (
        'sm':(
                'fontSize': 24rpx,
                'padding':12rpx 20rpx,
                'borderRadius':6rpx
        ),
        'base':(
                'fontSize': 28rpx,
                'padding':16rpx 28rpx,
                'borderRadius':10rpx
        ),
        'lg':(
                'fontSize': 32rpx,
                'padding':26rpx 36rpx,
                'borderRadius':16rpx
        ),
        // 可自定义扩展尺寸
);

自定义按钮

可以通过3中方式自定义按钮颜色。

1、通过color和textColor属性设置样式

<c-btn color="#AD18F9" text="自定义颜色" />
<c-btn color="linear-gradient(to bottom right,#AD18F9,#05DFC7)" text="渐变按钮" />

2、设置type和全局css样式设置样式

<c-btn type="my" text="css自定义按钮" />

// global.scss 全局样式，在App.vue中引入
.c-btn-my{
  background-color: #AD18F9!important;
  border-color:#AD18F9 !important;
}
.c-btn-my-plain{
  background-color: #fff!important;
  border-color:#AD18F9!important;
}
// hover
.c-btn-my-hover{
  background-color: lighten(#AD18F9,15%)!important;
  border-color:lighten(#AD18F9,15%)!important;
}
.c-btn-my-plain-hover{
  background-color: mix(#fff,#AD18F9,90%)!important;
}
// disabled
.c-btn-my-disabled{
  background-color: lighten(#AD18F9,15%)!important;
  border-color:lighten(#AD18F9,15%)!important;
}
.c-btn-my-plain-disabled{
  border-color:lighten(#AD18F9,30%)!important;
}
// plaintext
.c-btn-my-plaintext-bg{
  border-color: mix(#fff,#AD18F9,90%)!important;
  background-color: mix(#fff,#AD18F9,90%)!important;
}
.c-btn-my-plaintext-bg-hover{
  border-color: mix(#fff,#AD18F9,80%)!important;
  background-color: mix(#fff,#AD18F9,80%)!important;
}
// 文字颜色
.c-btn-my-text{
  color: #fff!important;
}
.c-btn-my-plain-text{
  color:#AD18F9!important;
}
.c-btn-my-plaintext-text{
  color:#AD18F9!important;
}

3、通过扩展主题

// uni.scss
$colors:(
    'my':rgb(173, 24, 249),
);

@import '@/uni_modules/cook-uni/variables.scss';

示例

<template>
    <c-btn type="primary" size="lg" text="按钮" plain />
</template>