button

按钮。

属性

支持通用属性

属性名 类型 默认值 说明 平台支持
size String default 按钮的大小 all
type String default 按钮的样式类型 all
plain Boolean false 按钮是否镂空，背景色透明 all
disabled Boolean false 是否禁用 all
loading Boolean false 名称前是否带 loading 图标 all
form-type String 用于<form/>组件，点击分别会触发<form/>组件的 submit/reset 事件 all
open-type String 开放能力 u?,w,a
hover-class String button-hover 指定按钮按下去的样式类。当hover-class="none"时，没有点击态效果 u?,w,a
hover-start-time Number 20 按住后多久出现点击态，单位毫秒 u?,w,a
hover-stay-time Number 70 手指松开后点击态保留时间，单位毫秒 u?,w,a

size 有效值：

值 说明
default
mini

type 有效值：

值 说明
primary
default
warn

form-type 有效值：

值 说明
submit 提交表单
reset 重置表单

事件

支持通用事件

示例

/** nss **/
/** 修改button默认的点击态样式类**/
.button-hover {
  background-color: red;
}
/** 添加自定义button点击态样式类**/
.other-button-hover {
  background-color: blue;
}

<button type="default" size="" loading="" plain=""
        disabled="" onclick="default" hover-class="other-button-hover"> default </button>
<button type="primary" size="" loading="" plain=""
        disabled="" onclick="primary"> primary </button>
<button type="warn" size="" loading="" plain=""
        disabled="" onclick="warn"> warn </button>
<button onclick="setDisabled">点击设置以上按钮disabled属性</button>
<button onclick="setPlain">点击设置以上按钮plain属性</button>
<button onclick="setLoading">点击设置以上按钮loading属性</button>

var types = ['default', 'primary', 'warn']
var pageObject = {
  data: {
    defaultSize: 'default',
    primarySize: 'default',
    warnSize: 'default',
    disabled: false,
    plain: false,
    loading: false
  },
  setDisabled: function(e) {
    this.setData({
      disabled: !this.data.disabled
    })
  },
  setPlain: function(e) {
    this.setData({
      plain: !this.data.plain
    })
  },
  setLoading: function(e) {
    this.setData({
      loading: !this.data.loading
    })
  }
}

for (var i = 0; i < types.length; ++i) {
  (function(type) {
    pageObject[type] = function(e) {
      var key = type + 'Size'
      var changedData = {}
      changedData[key] =
        this.data[key] === 'default' ? 'mini' : 'default'
      this.setData(changedData)
    }
  })(types[i])
}

Page(pageObject)

results matching ""

    No results matching ""