基础组件 - x-button - 《VUX 2.x 组件文档》

安装

局部注册

全局注册

import { XButton } from 'vux'
export default {
  components: {
    XButton
  }
}

// 在入口文件全局引入
import Vue from 'vue'
import { XButton } from 'vux'
Vue.component('x-button', XButton)

API

属性

名字	类型	默认值	说明	版本要求
type	string	default	按钮类型，可选值为 `default`,`primary`,`warn`	—
disabled	boolean	false	是否不可点击	—
text	string		按钮文字，同默认slot	—
mini	boolean	false	是否为mini类型，即小尺寸的按钮	—
plain	boolean	false	是否是plain样式，没有背景色	—
action-type	string		`button`的type属性，默认为浏览器默认(submit)，可选为 `submit` `button` `reset`	—
link	string		vue-router 路由, 值为 `BACK` 等同于 `go(-1)`	v2.3.5
show-loading	boolean	false	显示加载图标	—
gradients	array		按钮背景渐变，长度必须为2	v2.7.4

插槽

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

样式变量

名字	默认值	说明	继承自变量
@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类型的边框颜色