css：button实现el-radio效果-CSDN博客

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

先看最终效果

请添加图片描述

思路

一、

首先准备好按钮内容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;
}

请添加图片描述

二、

在外面包裹一个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;
}

请添加图片描述

三、

最后加上选中效果因为是单选所以必须保证每次只能选中一个动态绑定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;
}