<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
