fix: 新增 chart 顶部按钮

This commit is contained in:
MTrun
2022-01-05 18:04:41 +08:00
parent cc5d6ae5d7
commit 1031d3e248
10 changed files with 111 additions and 14 deletions
@@ -0,0 +1,3 @@
import HeaderLeftBtn from './index.vue'
export { HeaderLeftBtn }
@@ -0,0 +1,39 @@
<template>
<n-space>
<n-tooltip
v-for="item in btnList"
:key="item.title"
placement="bottom"
trigger="hover"
>
<template #trigger>
<n-button type="info" size="small" ghost>
<component :is="item.icon"></component>
</n-button>
</template>
<span>
{{ item.title }}
</span>
</n-tooltip>
</n-space>
</template>
<script setup lang="ts">
import { reactive } from 'vue'
import { icon } from '@/plugins'
const { AlbumsIcon, BarChartIcon } = icon.ionicons5
import { renderIcon } from '@/utils'
const btnList = reactive([
{
select: true,
title: '图层控制',
icon: renderIcon(AlbumsIcon)
},
{
select: true,
title: '图表组件',
icon: renderIcon(BarChartIcon)
}
])
</script>
@@ -0,0 +1,3 @@
import HeaderRightBtn from './index.vue'
export { HeaderRightBtn }
@@ -0,0 +1,37 @@
<template>
<n-space class="go-mt-0">
<n-button v-for="item in btnList" :key="item.title" ghost>
<template #icon>
<component :is="item.icon"></component>
</template>
<span>
{{ item.title }}
</span>
</n-button>
</n-space>
</template>
<script setup lang="ts">
import { reactive } from 'vue'
import { renderIcon } from '@/utils'
import { icon } from '@/plugins'
const { DesktopOutlineIcon, SendIcon } = icon.ionicons5
const btnList = reactive([
{
select: true,
title: '预览',
icon: renderIcon(DesktopOutlineIcon)
},
{
select: true,
title: '发布',
icon: renderIcon(SendIcon)
}
])
</script>
<style lang="scss" scoped>
.align-center {
margin-top: -4px;
}
</style>