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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值