66 lines
1.4 KiB
Vue
Raw Normal View History

2022-01-05 18:04:41 +08:00
<template>
2022-01-05 20:52:49 +08:00
<n-space class="header-left-btn">
2022-01-05 18:04:41 +08:00
<n-tooltip
v-for="item in btnList"
:key="item.key"
2022-01-05 18:04:41 +08:00
placement="bottom"
trigger="hover"
>
<template #trigger>
<n-button
:type="item.select ? 'info' : ''"
size="small"
ghost
@click="clickHandle(item)"
>
2022-01-05 18:04:41 +08:00
<component :is="item.icon"></component>
</n-button>
</template>
<span>
{{ item.title }}
</span>
</n-tooltip>
</n-space>
</template>
<script setup lang="ts">
2022-01-08 14:27:56 +08:00
import { toRefs, reactive } from 'vue'
2022-01-05 18:04:41 +08:00
import { renderIcon } from '@/utils'
2022-01-05 20:52:49 +08:00
import { icon } from '@/plugins'
const { LayersIcon, BarChartIcon, PrismIcon } = icon.ionicons5
import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
2022-01-05 20:52:49 +08:00
2022-01-08 14:27:56 +08:00
const { setItem } = useChartLayoutStore()
const { getLayers, getCharts, getDetails } = toRefs(useChartLayoutStore())
2022-01-05 18:04:41 +08:00
2022-01-08 14:27:56 +08:00
const btnList = reactive([
2022-01-05 18:04:41 +08:00
{
key: 'layers',
2022-01-08 14:27:56 +08:00
select: getLayers,
2022-01-05 18:04:41 +08:00
title: '图层控制',
2022-01-05 20:52:49 +08:00
icon: renderIcon(LayersIcon)
2022-01-05 18:04:41 +08:00
},
{
key: 'charts',
2022-01-08 14:27:56 +08:00
select: getCharts,
2022-01-05 18:04:41 +08:00
title: '图表组件',
icon: renderIcon(BarChartIcon)
2022-01-05 20:52:49 +08:00
},
{
key: 'details',
2022-01-08 14:27:56 +08:00
select: getDetails,
2022-01-05 20:52:49 +08:00
title: '详情设置',
icon: renderIcon(PrismIcon)
2022-01-05 18:04:41 +08:00
}
2022-01-08 14:27:56 +08:00
])
const clickHandle = (item: { [T: string]: string }) => {
2022-01-08 14:27:56 +08:00
setItem(item.key, !item.select)
}
2022-01-05 18:04:41 +08:00
</script>
2022-01-05 20:52:49 +08:00
<style lang="scss" scoped>
.header-left-btn {
padding-right: 212px;
}
</style>