62 lines
1.6 KiB
Vue
62 lines
1.6 KiB
Vue
|
<template>
|
||
|
|
<div class="trend-tool-groups">
|
||
|
|
<div v-for="group in toolGroups" :key="group.key" class="trend-tool-group">
|
||
|
|
<el-tooltip v-for="item in group.items" :key="item.action" :content="getToolTooltip(item)" placement="top">
|
||
|
|
<el-button
|
||
|
|
:type="isToolActive(item.action) ? 'primary' : 'default'"
|
||
|
|
:icon="item.icon"
|
||
|
|
:disabled="isToolDisabled(item.action)"
|
||
|
|
circle
|
||
|
|
@click="emit('tool-action', item.action)"
|
||
|
|
/>
|
||
|
|
</el-tooltip>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import type { SteadyTrendToolAction, SteadyTrendToolGroup, SteadyTrendToolItem } from './chartTools'
|
||
|
|
|
||
|
|
defineOptions({
|
||
|
|
name: 'SteadyTrendChartTools'
|
||
|
|
})
|
||
|
|
|
||
|
|
defineProps<{
|
||
|
|
toolGroups: SteadyTrendToolGroup[]
|
||
|
|
isToolActive: (action: SteadyTrendToolAction) => boolean
|
||
|
|
isToolDisabled: (action: SteadyTrendToolAction) => boolean
|
||
|
|
getToolTooltip: (item: SteadyTrendToolItem) => string
|
||
|
|
}>()
|
||
|
|
|
||
|
|
const emit = defineEmits<{
|
||
|
|
'tool-action': [action: SteadyTrendToolAction]
|
||
|
|
}>()
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.trend-tool-groups {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: flex-end;
|
||
|
|
gap: 8px;
|
||
|
|
min-width: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.trend-tool-group {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.trend-tool-group + .trend-tool-group {
|
||
|
|
padding-left: 8px;
|
||
|
|
border-left: 1px dashed var(--el-border-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.trend-tool-group :deep(.el-button.is-circle) {
|
||
|
|
width: 28px;
|
||
|
|
height: 28px;
|
||
|
|
padding: 6px;
|
||
|
|
}
|
||
|
|
</style>
|