yudao-dev/src/views/home/components/SwitchBtn.vue
2025-07-04 17:02:20 +08:00

57 lines
1.2 KiB
Vue

<template>
<div class='button-box'>
<span v-for='(item, index) in btnArr' :key='index' style='display: inline-block;'>
<span class='split' v-if='index > 0' :class='{ "split-active": activeIndex === index || activeIndex === index - 1}'>|</span>
<span class='button-item' @click='chooseBtn(index)' :class='{ "item-active": activeIndex === index}'>{{item}}</span>
</span>
</div>
</template>
<script>
export default {
name: 'SwitchBtn',
data() {
return {
activeIndex: 1,
btnArr: ['本班次', '本日', '本周', '本月']
}
},
methods: {
chooseBtn(index) {
this.activeIndex = index
this.$emit('chooseBtn', index)
}
}
}
</script>
<style lang='scss' scoped>
.button-box {
display: inline-block;
color: #000;
background: #F2F4F9;
border-radius: 40px;
cursor: pointer;
.button-item {
display: inline-block;
font-size: 16px;
height: 32px;
line-height: 32px;
padding: 0 12px;
}
.item-active {
color: #fff;
background: #0B58FF;
border-radius: 40px;
}
.split {
display: inline-block;
font-size: 14px;
height: 32px;
line-height: 32px;
vertical-align: top;
color: #686868;
}
.split-active {
color: #F2F4F9;
}
}
</style>