<!-- <script setup lang="ts">
|
|
|
const emit = defineEmits<{
|
(e: 'update:currentDisplay', value: string): void;
|
}>();
|
|
const displayOptions = [
|
{ value: 'line', label: '曲线图' },
|
{ value: 'gauge', label: '仪表盘' },
|
{ value: 'table', label: '数据表格' },
|
{ value: '3d', label: '3D坐标轴' }
|
];
|
|
function handleDisplayChange(value: string) {
|
emit('update:currentDisplay', value);
|
}
|
</script>
|
|
<template>
|
<div class="display-selector">
|
<div class="selector-group">
|
<button
|
v-for="option in displayOptions"
|
:key="option.value"
|
:class="['display-button', { active: currentDisplay === option.value }]"
|
@click="handleDisplayChange(option.value)"
|
>
|
{{ option.label }}
|
</button>
|
</div>
|
</div>
|
</template>
|
|
<style scoped>
|
.display-selector {
|
margin: 10px 0;
|
padding: 0 20px;
|
}
|
|
.selector-group {
|
display: flex;
|
gap: 10px;
|
justify-content: center;
|
}
|
|
.display-button {
|
padding: 8px 16px;
|
border-radius: 20px;
|
background-color: #f0f0f0;
|
border: 1px solid #ddd;
|
cursor: pointer;
|
transition: all 0.3s ease;
|
}
|
|
.display-button:hover {
|
background-color: #e0e0e0;
|
}
|
|
.display-button.active {
|
background-color: #396cd8;
|
color: white;
|
border-color: #396cd8;
|
}
|
</style> -->
|
