<template>
|
<el-radio-group
|
v-model="currentValue"
|
class="date-type-switch"
|
@change="handleChange"
|
>
|
<el-radio-button :label="1">周</el-radio-button>
|
<el-radio-button :label="2">月</el-radio-button>
|
<el-radio-button :label="3">季度</el-radio-button>
|
</el-radio-group>
|
</template>
|
|
<script setup>
|
import { ref, watch } from 'vue'
|
|
const props = defineProps({
|
modelValue: {
|
type: Number,
|
default: 1, // 默认选中"周"
|
},
|
})
|
|
const emit = defineEmits(['update:modelValue', 'change'])
|
|
const currentValue = ref(props.modelValue)
|
|
// 监听外部值变化
|
watch(
|
() => props.modelValue,
|
(newVal) => {
|
currentValue.value = newVal
|
}
|
)
|
|
// 处理值变化
|
const handleChange = (value) => {
|
emit('update:modelValue', value)
|
emit('change', value)
|
}
|
</script>
|
|
<style scoped>
|
.date-type-switch {
|
display: inline-flex;
|
}
|
|
/* 未选中状态的样式 */
|
.date-type-switch :deep(.el-radio-button__inner) {
|
background-color: rgba(26, 88, 176, 0.3);
|
color: rgba(184, 200, 224, 0.8);
|
border-color: rgba(255, 255, 255, 0.2);
|
border-radius: 0;
|
padding: 6px 20px;
|
font-size: 14px;
|
transition: all 0.3s;
|
}
|
|
/* 第一个按钮左侧圆角 */
|
.date-type-switch :deep(.el-radio-button:first-child .el-radio-button__inner) {
|
border-top-left-radius: 4px;
|
border-bottom-left-radius: 4px;
|
}
|
|
/* 最后一个按钮右侧圆角 */
|
.date-type-switch :deep(.el-radio-button:last-child .el-radio-button__inner) {
|
border-top-right-radius: 4px;
|
border-bottom-right-radius: 4px;
|
}
|
|
/* 按钮之间的分隔线 */
|
.date-type-switch :deep(.el-radio-button:not(:last-child) .el-radio-button__inner) {
|
border-right: 1px solid rgba(255, 255, 255, 0.2);
|
}
|
|
/* 选中状态的样式 */
|
.date-type-switch :deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
|
background: linear-gradient(180deg, #3378ff 0%, #00a4ed 100%);
|
color: #ffffff;
|
border-color: rgba(51, 120, 255, 0.8);
|
box-shadow: none;
|
}
|
|
/* 悬停效果 */
|
.date-type-switch :deep(.el-radio-button__inner:hover) {
|
color: rgba(184, 200, 224, 1);
|
border-color: rgba(255, 255, 255, 0.3);
|
}
|
|
/* 选中状态悬停 */
|
.date-type-switch :deep(.el-radio-button__original-radio:checked + .el-radio-button__inner:hover) {
|
background: linear-gradient(180deg, #4e8aff 0%, #4ee4ff 100%);
|
color: #ffffff;
|
}
|
</style>
|
