weex 实现button的点击变色

先看playground 效果图

weex 之前一直没有按钮点击时间处理，因为动态绑定class不是很好，处理起来也很麻烦
不过通过weex 的伪类 active 我们能够很简单的实现出各类按钮的点击效果，不过本来还可以添加阴影，不过人家官网说了，只有ios支持，好吧，那就暂时放弃

下面简单来看一下定义的button.vue 组件

<template>
    <text :class="['btn', 'btn-' + type]"> {{value}}</text>
</template>
<script>
  const modal = weex.requireModule('modal')
  export default {
    props: {
      value: {
        type: String,
        required: true
      },
      type: {
        type: String,
        required: true
      }
    }
  }
</script>

<style scoped>
.btn{
  padding: 20px;
  font-size: 32px;
  text-align: center;
  border-style: solid;
}
.btn-nomal {
  background-color: #26A2FF;
  color: white;
}
.btn-nomal:active {
  background-color: #2071ab;
  color: white;
}    
.btn-danger {
  background-color: #EF4F4F;
  color: white;
}
.btn-danger:active {
  background-color: #ab2048;
  color: white;
} 
.btn-default {
  border-width: 3px;
  border-radius: 5px;
  border-color: lightslategray;  
  background-color: #F6F8FA;
}
.btn-default:active {
  border-width: 3px;
  border-radius: 5px;
  border-color: lightslategray;  
  background-color: #F6F6E5;
} 

.btn-nomalborder {
  border-width: 3px;
  border-radius: 5px;
  border-color: #26A2FF;
}
.btn-nomalborder:active {
  border-width: 3px;
  border-radius: 5px;
  border-color: #2071ab;
}    
.btn-dangerborder {
  border-width: 3px;
  border-radius: 5px;
  border-color: #EF4F4F;  
}
.btn-dangerborder:active {
  border-width: 3px;
  border-radius: 5px;
  border-color: #ab2048; 
} 
.btn-defaultborder {
  border-width: 3px;
  border-radius: 5px;
  border-color: lightslategray;   
}
.btn-defaultborder:active {
  background-color: #F6F6E5;
} 
</style>

然后是使用这个组件的vue文件

<template>
  <div style="margin:20px;">
    <button type="default" :value="value" @click="click()" ></button>    
    <button type="nomal" :value="value" style="margin-top:20px;"></button>
    <button type="danger" :value="value" style="margin-top:20px;"></button>  

    <div style="flex-direction: row;flex-wrap: nowrap;justify-content: space-between;margin-top:20px;">
      <button type="default" :value="value" style="flex:1;margin:10px;"></button>    
      <button type="nomal" :value="value" style="flex:1;margin:10px;"></button>
      <button type="danger" :value="value" style="flex:1;margin:10px;"></button>       
    </div>

    <button type="defaultborder" :value="value" style="margin-top:20px;"></button>    
    <button type="nomalborder" :value="value" style="margin-top:20px;"></button>
    <button type="dangerborder" :value="value" style="margin-top:20px;"></button>  

    <div style="flex-direction: row;flex-wrap: nowrap;justify-content: space-between;margin-top:20px;">
      <button type="defaultborder" :value="value" style="flex:1;margin:10px;"></button>    
      <button type="nomalborder" :value="value" style="flex:1;margin:10px;"></button>
      <button type="dangerborder" :value="value" style="flex:1;margin:10px;"></button>             
    </div>
  </div>
</template>
<style scoped>

</style>
<script>
  import button from '../components/button.vue'
  export default {
      components:{button},
      data(){
        return{
          value:'测试',
        }
      },
      methods:{
        click(){
          console.debug("clicked")
        }
      }
  }
</script>

ok，这块目前暂时用伪类实现起来相对方便