一、功能实现
采用一组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>