<wxc-button text="按钮"
type="white"
size="full"
:disabled="false"
:btnStyle="btnStyle"
:textStyle="textStyle"
@wxcButtonClicked="openDialog()">
</wxc-button>
上面就是一个<wxc-button>的全部设置。
其中:
① text:设置显示的文本内容。
② type:设置按钮的底色。默认有4个取值:white/yellow/red/blue。这4个值是预定义在一个内部对象STYLE_MAP中的,取值时会以STYLE_MAP[type]的形式来获取。所以type只能使用已定义的这4个值,无法人为扩展。要自定义按钮颜色,可使用btnStyle。
③ size:设置按钮的大小。默认有4个取值:full/big/medium/small。同type属性,size的这4个值也是预定义在一个内部对象BUTTON_STYLE_MAP中的:
export const BUTTON_STYLE_MAP = { full: { width: '702px', height: '88px' }, big: { width: '339px', height: '70px' }, medium: { width: '218px', height: '60px' }, small: { width: '157px', height: '44px' } }
然而,在源码中,按钮样式的定义:
const mrBtnStyle = { ...STYLE_MAP[type], ...btnStyle, ...BUTTON_STYLE_MAP[size] };
可以看到STYLE_MAP是第一位的,然后是btnStyle,最后是BUTTON_STYLE_MAP。这导致了一个问题就是STYLE_MAP会被btnStyle覆盖,而btnStyle会被BUTTON_STYLE_MAP覆盖。
由于BUTTON_STYLE_MAP定义了按钮的width与height,所以btnStyle中自定义的各种属性,唯有width与height是不生效的。
总之,<wxc-button>的大小只能使用预定义的4个值,无法通过btnStyle来修改。
④ disabled:是否启用禁用样式。注意仅仅是修改样式,并不会屏蔽掉点击事件。
⑤ btnStyle:自定义按钮样式。<wxc-button>的本质是一个<div>,btnStyle所定义的样式都会作用于该<div>。所以只要是<div>可用的样式即可,仅仅不能定义width和height。
⑥ textStyle:自定义按钮文本样式。<wxc-button>的文本显示是一个vue的<text>。所以只要是<text>可接受的样式即可。
⑦ wxcButtonClicked:响应按钮点击事件。
注意样式定义在data中时,需要将全小写+横线的形式转换为驼峰形式。
例如:
background-color → backgroundColor