Button

Button.

Example

js

Code
const types = ["default", "primary", "warn"];
const pageObject = {
  data: {
    defaultSize: "default",
    primarySize: "default",
    warnSize: "default",
    disabled: false,
    plain: false,
    loading: false,
  },

  onShareAppMessage() {
    return {
      title: "button",
      path: "page/component/pages/button/button",
    };
  },

  setDisabled() {
    this.setData({
      disabled: !this.data.disabled,
    });
  },

  setPlain() {
    this.setData({
      plain: !this.data.plain,
    });
  },

  setLoading() {
    this.setData({
      loading: !this.data.loading,
    });
  },

  handleContact(e) {
    console.log(e.detail);
  },

  handleGetPhoneNumber(e) {
    console.log(e.detail);
  },

  handleGetUserInfo(e) {
    console.log(e.detail);
  },

  handleOpenSetting(e) {
    console.log(e.detail.authSetting);
  },

  handleGetUserInfo(e) {
    console.log(e.detail.userInfo);
  },
};

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

Page(pageObject);

bxml

Code
<view class="page-body">
  <view class="btn-area" id="buttonContainer">
    <button type="primary">Page Main Normal</button>
    <button type="primary" loading="true">Page Main Loading</button>
    <button type="primary" disabled="true">Page Main Disabled</button>

    <button type="default">Page Second Normal</button>
    <button type="default" disabled="true">Page Second Disabled</button>

    <button type="warn">Warn Normal</button>
    <button type="warn" disabled="true">Warn Disabled</button>

    <view class="button-sp-area">
      <button type="primary" plain="true">Button</button>
      <button type="primary" disabled="true" plain="true">Disable Button</button>

      <button type="default" plain="true"></button>
      <button type="default" disabled="true" plain="true">Button</button>

      <button class="mini-btn" type="primary" size="mini">Button</button>
      <button class="mini-btn" type="default" size="mini">Button</button>
      <button class="mini-btn" type="warn" size="mini">Button</button>
    </view>
  </view>
</view>

bxss

Code
button {
  margin-top: 30rpx;
  margin-bottom: 30rpx;
}
.button-sp-area {
  margin: 0 auto;
  width: 60%;
}
.mini-btn {
  margin-right: 10rpx;
}

Bug & Tip

• tip: button-hover Default is{background-color: rgba(0, 0, 0, 0.1) opacity: 0.7}
• tip: Currently set form-type of button Object in the current component form Effective. Thus, will button Is encapsulated in a custom component, and form In addition to the custom component, the button of form-type Failure.

Props

Events