wxc-button使用

<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