button


按钮

属性

属性名 类型 必填 默认值 说明
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>
wx
web
native

查看完整示例

results matching ""

    No results matching ""