XButton
Install

安装


API

属性

名字类型默认值说明版本要求
typestringdefault按钮类型,可选值为 default,primary,warn--
disabledbooleanfalse是否不可点击--
textstring按钮文字,同默认slot--
minibooleanfalse是否为mini类型,即小尺寸的按钮--
plainbooleanfalse是否是plain样式,没有背景色--
action-typestringbutton的type属性,默认为浏览器默认(submit),可选为 submit button reset--
linkstringvue-router 路由, 值为 BACK 等同于 go(-1)v2.3.5
show-loadingbooleanfalse显示加载图标--
gradientsarray按钮背景渐变,长度必须为2v2.7.4

插槽

名字说明版本要求
默认插槽按钮文字--
Variables

样式变量

名字默认值说明继承自变量
@button-global-border-radius 5px 圆角边框
@button-global-font-color #FFFFFF 字体颜色
@button-global-margin-top 15px 与相邻按钮的 margin-top 间隙,只有一个按钮时不生效
@button-global-height 42px 按钮高度
@button-global-disabled-font-color rgba(255,255,255,.6) disabled状态下的字体颜色
@button-global-active-font-color rgba(255,255,255,.6) disabled状态下的字体颜色
@button-global-font-size 18px 字体大小
@button-mini-font-size 13px mini类型的字体大小
@button-mini-line-height 2.3 mini类型的行高
@button-warn-bg-color #E64340 warn类型的背景颜色
@button-warn-active-color #CE3C39 active状态下,warn类型的背景颜色
@button-warn-disabled-bg-color #EC8B89 disabled状态下,warn类型的背景颜色
@button-default-bg-color #F8F8F8 default类型的背景颜色
@button-default-font-color #000000 default类型的字体颜色
@button-default-active-bg-color #DEDEDE active状态下,default类型的背景颜色
@button-default-disabled-font-color rgba(0,0,0,.3) disabled状态下,default类型的字体颜色
@button-default-disabled-bg-color #F7F7F7 disabled状态下,default类型的背景颜色
@button-default-active-font-color rgba(0,0,0,.6) active状态下,default类型的字体颜色
@button-primary-bg-color #1AAD19 primary类型的背景颜色
@button-primary-active-bg-color #179B16 active状态下,primary类型的背景颜色
@button-primary-disabled-bg-color #9ED99D disabled状态下,primary类型的背景颜色
@button-plain-primary-color rgba(26,173,25,1) plain的primary类型的字体颜色
@button-plain-primary-border-color rgba(26,173,25,1) plain的primary类型的边框颜色
@button-plain-primary-active-color rgba(26,173,25,.6) active状态下,plain的primary类型的字体颜色
@button-plain-primary-active-border-color rgba(26,173,25,.6) active状态下,plain的primary类型的边框颜色
@button-plain-default-color rgba(53,53,53,1) plain的default类型的字体颜色
@button-plain-default-border-color rgba(53,53,53,1) plain的default类型的边框颜色
@button-plain-default-active-color rgba(53,53,53,.6) active状态下,plain的default类型的字体颜色
@button-plain-default-active-border-color rgba(53,53,53,.6) active状态下,plain的default类型的边框颜色
@button-plain-warn-color rgba(206,60,57,1) plain的warn类型的字体颜色
@button-plain-warn-border-color rgba(206,60,57,1) plain的warn类型的边框颜色
@button-plain-warn-active-color rgba(206,60,57,.6) active状态下,plain的warn类型的字体颜色
@button-plain-warn-active-border-color rgba(206,60,57,.6) active状态下,plain的warn类型的边框颜色
重要提示及已知问题

重要提示及已知问题

  • Q@click 绑定事件不生效

    按照Vue文档,在组件上绑定原生点击事件请使用@click.native



贡献者

贡献者

该组件(包含文档)迭代次数 34,贡献人数 7

airylandClayLinHaobinwuzhiqun95lichunqiangjackiewg

Changelog

发布日志

  • v2.9.2 [feature] button支持样式变量 #2748
  • v2.9.0 [feature] warn 类型支持 plain 样式 #2478
  • v2.7.5 [fix] 修复plain样式并禁用时class不对的问题
  • v2.7.4 [feature] 顺应 iOS 设计,支持直接定义背景渐变 prop:gradients
  • v2.7.1 [enhance] 链接支持对象类型 #2068
  • v2.5.0 [feature] 添加禁用背景颜色. #1630
  • v2.1.1-rc.10 [feature] 添加禁用背景颜色. #896
  • v2.1.1-rc.3 [fix] 修复单独引入没有引入Loading组件时,样式缺失 #986 @malaimoo
  • v2.1.0 [feature] 更新到 `WeUI` 最新版本
  • v2.1.0 [feature] 支持 `prop:isLoading`
  • v2.1.0-rc.46 [feature] 添加`less`变量 #896 @erguotou520
  • v2.1.1-rc.12 [fix] 修复primary类型按钮active时的background-color