圈子金融的weex領悟 -自定義button元件

先看一下效果圖：

不可用狀态，以及手指按下時的效果

正常狀态

通常我們在送出頁面的時候，當使用者輸入不完整時我們要顯示為不可用的狀态（灰一點），輸入正确後，就為正常狀态

因為weex中沒有帶button元件，那我們就隻能自定義一下，其實也很簡單，就是一個div包裹個text，一個做容器，控制高度背景，一個做文本顯示

<template>
  <div class="btn {{full==true?'btn-full':'btn-normal'}}" style="background-color:{{disabled?'#9bcdfa':btnColor}}">
    <text style="font-size:{{textsize}};color:{{textcolor}};"> {{text}}</text>
  </div>
</template>
           

資料綁定部分：

<script>
  require('weex-components');
  var apis = require('./api.js');//引一個公衆的js，個人項目用到，跟button無關
  module.exports = {
    data: {
      text: "按鈕文本",
      textsize: ,
      textcolor: "#fff",
      disabled: false,//控制是否可用
      full: false//是否滿寬度顯示，否則顯示650
    },
    created: function () {
      apis.init(this, {
        font: true
      });//初始化頁面，項目中用，跟button無關

      //如果沒定義textsize,就使用預設的
      if (this.textsize == ) this.textsize = this.titleFontSizeLarger;

      });

    }

  }
</script>
           

很簡單的資料定義，disabled會控制背景色

這裡的btnColor是apis.js裡面定義的，根據自己需要修改

full會控制使用的樣式（在一個app按鈕通常相同樣式的，要不滿寬，要麼留一點邊，由樣式控制）

上樣式表：

<style>
  .btn {
    height: px;
    border-radius: px;
    justify-content: center;
    align-items: center;
    padding: ;
    background-color: #0f8cf0;
  }

  .btn-normal {
    width: ;
    margin-left: ;
  }

  .btn-full {
    width: ;
  }

  .btn:active {
    background-color: #9bcdfa;
  }
</style>
           

.btn是按鈕的樣式，如果是full，則還會加上.btn-full，否則加上.btn-normal

.btn:active是手指按下的效果

這樣就完成一個按鈕元件定義了，使用方法如下：

比如我們有一個aa.we頁面，在data中申明一個屬性btnDisabled，預設true(不可用)

module.exports = {
    data: {  
      btnDisabled:true,
      ...
    }
} 
           

模闆

<button onclick="submit" disabled={{btnDisabled}} style="margin-top:30;" text="送出申請"></button>

           

這樣按鈕就顯示出來了，并且定義了點選事件submit

這時候我們隻需要修改btnDisabled的值，就可以控制是否可用了，另外在送出的時候加個判斷

submit:function(e){
        if(this.disabled) return; //不可用狀态，不執行
}