圈子金融的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; //不可用状态，不执行
}