# button


按钮

wx
web
native

# 属性

属性名 类型 必填 默认值 说明
text String 按钮文案,优先级高于 slot 属性,注意:默认button内容为空
size String auto 按钮尺寸,可选值:auto、full、big、medium、small,注: auto 代表依据button内容撑开,如果父容器定义宽度,则继承父容器的宽度
width Number 自定义按钮宽度,单位为 cpx,优先级高于 size 属性 注意:类型是 Number
type String "blue" 按钮颜色,可选值:red、orange、blue、white、green
disabled Boolean false 是否禁用
btn-style String 自定义button的样式,如 "background-color:blue;height:100cpx;"
text-style String 自定义按钮text的样式,如 "color:red;text-align:center;"
disabled-style String 定义button disabled的样式,如 "background-color:grew;"
text-style-disabled String 定义button disabled时text的样式,如 "color:white;"
btn-hover-style String 指定按钮按下去的效果样式,如 "background-color:pink;"
text-hover-style String 指定按钮按下去的text样式,如 "color:pink;"
slot 置于button里的插槽,可自由定义
c-bind:onclick EventHandle button 点击事件
返回事件对象:
event.type= "onclick"
event.detail = { type, disabled }

# 示例

<template>
  <button type="blue" text="确定" disabled="{{true}}" c-bind:onclick="testclick"></button>
</template>

<script>
import cml from 'chameleon-api';
class Button {
  methods = {
    testclick(e) {
      let type = e.detail.type;
      cml.showToast({
        message: type + ' button',
      });
    },
  };
}
export default new Button();
</script>
<script cml-type="json">
{
  "base": {}
}
</script>