button模拟实现单选框效果_按钮样式的单选框

一、功能实现

采用一组button组件，实现类似单选框radio的效果，即在同一组button组件中，只能选中一项（单选）。

方法一： 写死（按钮不多，容易操作）

<van-button v-on:click="getVioMoney('50')" >50元</van-button>
<van-button v-on:click="getVioMoney('100')" >100元</van-button>
<van-button v-on:click="getVioMoney('200')" >200元</van-button> 

// 获取按钮值
getVioMoney(value) {
  this.vioMoney = value
  // console.log(this.vioMoney)
}

方法二：数组循环获取（我不会，暂时没空，下次再说）

二、细节完善

在完成大体功能要求之后，发现可以实现单选获取按钮值，但在页面表现中，选中的按钮在点击页面其他地方时并不能继续保持选中状态。

保持按钮选中：

CSS部分：为按钮单独设置选中样式：

.vio-money.active{
  color: #0084ff;
  border: 1px solid #0084ff;
  background-color: #e5f3ff;
}

这里需要注意，使用hover实现的选中效果，只能在点击按钮后不再点击页面其他地方实现，一旦点击其他组件后会消失的！错误代码：

.vio-money:hover{
  color: #0084ff;
  border: 1px solid #0084ff;
  background-color: #e5f3ff;
}

HTML部分：

为button添加动态样式，判断vioMoney为xx时，样式为active。代码示例：

 :class="{'active' : vioMoney === '50'}"  

<van-button class="vio-money" :class="{'active' : vioMoney === '50'}" v-on:click="getVioMoney('50')" >50元</van-button>
<van-button class="vio-money next" :class="{'active' : vioMoney === '100'}" v-on:click="getVioMoney('100')" >100元</van-button>
<van-button class="vio-money next" :class="{'active' : vioMoney === '200'}" v-on:click="getVioMoney('200')" >200元</van-button>