button

按钮

属性

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

示例

  1. <template>
  2.   <button
  3.     type="blue"
  4.     text="确定"
  5.     disabled="{{true}}"
  6.     c-bind:onclick="testclick"
  7.   >  
  8.   </button>
  9. </template>
  11. <script>
  12. import cml from 'chameleon-api'
  13. class Button  {
  14.   methods = {
  15.     testclick(e) {
  16.       let type = e.detail.type
  17.       cml.showToast({
  18.         message: type + ' button'
  19.       })
  20.     }
  21.   }
  22. }
  23. export default new Button();
  24. </script>
  25. <script cml-type="json">
  26. {
  27.   "base": {}
  28. }
  29. </script>

button - 图1wx

button - 图2web

button - 图3native

查看完整示例