<template>
<div>
<div class="circle-box">
<div
v-for="(item, index) in data"
:key="index"
class="outer"
:class="{ [`item-${item}`]: true, actived: current == index }"
@click="changeCurrent(index)"
>
<div class="inner" :class="{ [`inner-${item}`]: true }"></div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
data: [1, 2, 3],
current: 0,
};
},
methods: {
changeCurrent(index) {
this.current = index;
},
},
};
</script>
<style lang="less" scoped>
.circle-box {
display: flex;
padding: 20px;
}
.outer {
margin-left: 20px;
position: relative;
width: 40px;
height: 40px;
border-radius: 50%;
}
&.actived {
&.item-1 {
background-color: #b59384;
}
&.item-2 {
background-color: #6e9f9b;
}
&.item-3 {
background-color: #333;
}
}
.inner {
position: absolute;
left: 0;
right: 0;
top: 4px;
margin: auto;
width: 30px;
height: 30px;
border-radius: 50%;
border: 4px solid #fff;
}
.inner-1 {
background-color: #b59384;
}
.inner-2 {
background-color: #6e9f9b;
}
.inner-3 {
background-color: #333;
}
</style>
样式结果: