SatMenu菜单组件

基础用法

vue

<template>
  <SatGlobe>
    <SatMenu>
      <SatSource></SatSource>
      <SatMeasure></SatMeasure>
    </SatMenu>
    <SatPlot></SatPlot>
  </SatGlobe>
</template>

TIP

可以看到，菜单中预设了SatEarth组件库内部其他功能组件的树结构，一旦在SatMenu插槽中引用其他功能组件，相应的菜单会自动显示。而在SatMenu外部的组件，如：上面代码中的SatPlot标绘组件，则可以自主控制其生命周期。

自定义菜单项集成

vue

<script setup lang="ts">
import type { SatTaskViewItem, SatMenuItem } from 'sat-earth'
const myComponentData: SatMenuItem & SatTaskViewItem = reactive({
  name: 'MyComponent',
  label: '我的组件',
  icon: {
    class: 'fa-paper-plane-o',
  },
  enable: false,
  active: false,
  eleId: 'MyComponent',
  onActive() {
    changeDataActive(this, true)
  },
})
// 自定义菜单
const treeData = computed(() => {
  return [myComponentData]
})
const changeDataEnable = (item: SatMenuItem, flag: boolean) => {
  item.enable = flag
  item.active = flag
}
const changeDataActive = (item: SatMenuItem, flag: boolean) => {
  item.active = flag
}
</script>
<template>
  <SatGlobe>
    <SatMenu>
      <template #custom-enable>
        <SatMenuTree
          :custom="true"
          show-type="enabled"
          :tree-data="treeData.filter((i) => i.enable)"
          @custom-click="changeDataEnable($event, true)"
          @custom-close-click="changeDataEnable($event, false)"
        ></SatMenuTree>
      </template>
      <template #custom>
        <SatMenuTree
          :custom="true"
          :tree-data="treeData"
          @custom-click="changeDataEnable($event, true)"
        ></SatMenuTree>
      </template>
    </SatMenu>

    <SatPanel
      v-if="myComponentData.enable"
      v-show="myComponentData.active"
      :id="myComponentData.eleId"
      :is-minimize="true"
      :minimize-event="() => changeDataActive(myComponentData, false)"
      :close-event="() => changeDataEnable(myComponentData, false)"
      :is-close="false"
      :title="myComponentData.name"
      :drag-initial-value="{ x: 40, y: 30 }"
    >
      my-component
    </SatPanel>
  </SatGlobe>
</template>

TIP

可以看到，上面代码中首先创建了myComponentData响应式变量（自定义内容控制器），来控制自定义内容的生命周期，如：代码中的SatPanel标签被myComponentData所控制。然后treeData是所有的自定义内容控制器的集合，作为SatMenuTree的入参，这样就完成了自定义菜单项集成，通过点击菜单也可以对自定义内容进行生命周期控制。

插槽

插槽名	说明
custom-enable	自定义菜单项-已启用
custom	自定义菜单项
-	自定义内容