css：button实现el-radio效果

先看最终效果：

​​​

思路：

一、

首先准备好按钮内容：const a = ['one','two','three']
将按钮循环展示出来，并设置一些样式，将按钮背景透明：

<button v-for="(item,index) in a" :key="index">{{ item }}</button>
 
button {
   width: 100px;
   height: 40px;
   border-radius: 20px;
   border: 1px solid red;
   background-color: transparent;
}
1
2
3
4
5
6
7
8
9

二、

在外面包裹一个div，设置背景颜色，border-radius与按钮一致（按钮边框和背景透明，这样背景是什么颜色/边框，按钮就会是什么颜色/边框）：

 <div class="container">  
    <button v-for="(item,index) in a" :key="index">{{ item }}</button>
 </div>
 
.container {
    margin:40px;
    border: 1px solid transparent;
    display: inline-block;
    padding: 0;
    border-radius: 20px;
    height: 40px;
    background-color: #ECEFEE;
}
button {
   width: 100px;
   height: 40px;
   border-radius: 20px;
   border: 1px solid transparent;
   background-color: transparent;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

三、

最后加上选中效果，因为是单选所以必须保证每次只能选中一个，动态绑定class：

<div class="container">  
    <button v-for="(item,index) in a" :key="index" :class="radio==item?'yes':''" @click="handleClick(item)">{{ item }}</button>
</div>

const radio = ref('one') // 默认选中
const handleClick = (value) =>{
    radio.value = value
}

.container{
    margin:40px;
    border: 1px solid transparent;
    display: inline-block;
    padding: 0;
    border-radius: 20px;
    height: 40px;
    background-color: #ECEFEE;
}
button{
    width: 100px;
    height: 40px;
    border-radius: 20px;
    border: 1px solid transparent;
    background-color: transparent;
}
.yes {
   background: red;
   color: white;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

over！！！🎉🎉🎉