Perceba o efeito de estilo após o botão ser selecionado:
código mostra como abaixo:
<template>
<view class="container">
<view class="button-group">
<view @click="openNoBot(1)" class="notSelect" :class="{'checked':checked===1}">按1</view>
<view @click="openNoBot(2)" class="notSelect" :class="{'checked':checked===2}">按2</view>
<view @click="openNoBot(3)" class="notSelect" :class="{'checked':checked===3}">按3</view>
<view @click="openNoBot(4)" class="notSelect" :class="{'checked':checked===4}">按4</view>
<view @click="openNoBot(5)" class="notSelect" :class="{'checked':checked===5}">按5</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
checked: null,
}
},
methods: {
openNoBot(num) {
this.checked = num
},
}
}
</script>
<style>
.notSelect {
width: 80rpx;
height: 36rpx;
text-align: center;
padding: 20rpx 16rpx;
margin: 4rpx 5rpx 6rpx 0rpx;
font-size: 26rpx;
color: #aaa;
border-radius: 16rpx;
border: 2rpx dashed #aaa;
}
.checked {
border: 2rpx dashed red;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.button-group {
display: flex;
flex-direction: row;
}
.button {
padding: 10px 20px;
margin: 0 10px;
border-radius: 5px;
background-color: #eee;
cursor: pointer;
}
.active {
background-color: #007aff;
color: #fff;
}
</style>