kev/Drawer/drawer-htmlroot/components/DrawerHeader.vue

<!--
工具栏组件

add by RYG
-->
<template>
  <div class="flex-container">
    <div v-if="!isInside" class="flex-container">
      <img src="/img/KEP001.svg" class="align-item" />
      <span class="text-item">KE Platform</span>
    </div>
    <ImageButton v-for="btn in buttons" :key="btn.key" :imageUrl="btn.imageUrl" :text="btn.text"
      @click="handleButtonClick(btn)" class="imgBtn" :class="{ active: activeIndex === btn.index }" />
    <ImageButton :key="layerButton.key" :imageUrl="layerButton.imageUrl" :text="layerButton.text"
      @click="handleButtonClick(layerButton)" class="imgBtn" :class="{ active: layerShow }" />
  </div>
</template>

<script setup>
import { ref } from "vue";
// import { emitter } from "~/utils/eventBus";
// import { EMIT_COMMAND } from "~/utils/commandTypes";
const activeIndex = ref(-1);
const layerShow = ref(false);

const props = defineProps({
  tokenKey: { type: String, default: 'drawerToken' }
});

const emit = defineEmits([
  'default',
  'zoom_in',
  'zoom_out',
  'refresh',
  'center',
  'part',
  'all',
  'move',
  'choose',
  'save',
  'layer',
])

const isInside = ref(true);
const buttons = [
  {
    imageUrl: "/img/default.svg",
    text: "默认",
    key: "default",
    index: 0,
    canActive: true,
  },
  {
    imageUrl: "/img/zoom_in.svg",
    text: "放大",
    key: "zoom_in",
    index: 1,
    canActive: false,
  },
  {
    imageUrl: "/img/zoom_out.svg",
    text: "缩小",
    key: "zoom_out",
    index: 2,
    canActive: false,
  },
  {
    imageUrl: "/img/refresh.svg",
    text: "刷新",
    key: "refresh",
    index: 3,
    canActive: false,
  },
  {
    imageUrl: "/img/center.svg",
    text: "居中",
    key: "center",
    index: 4,
    canActive: false,
  },
  {
    imageUrl: "/img/part.svg",
    text: "局部",
    key: "part",
    index: 5,
    canActive: true,
  },
  {
    imageUrl: "/img/all.svg",
    text: "全部",
    key: "all",
    index: 6,
    canActive: false,
  },
  {
    imageUrl: "/img/move.svg",
    text: "移动",
    key: "move",
    index: 7,
    canActive: true,
  },
  {
    imageUrl: "/img/choose_arrow.svg",
    text: "选择",
    key: "choose",
    index: 8,
    canActive: true,
  },
  {
    imageUrl: "/img/save.svg",
    text: "保存",
    key: "save",
    index: 9,
    canActive: false,
  },
  // {
  //   imageUrl: "/img/image_layer_tree.svg",
  //   text: "图层",
  //   key: "layer",
  //   index: 10,
  //   canActive: false,
  // },
];

const layerButton = {
  imageUrl: "/img/image_layer_tree.svg",
  text: "图层",
  key: "layer",
  index: 10,
  canActive: false,
};

const handleButtonClick = (btn) => {

  emit(btn.key);

  if (btn.canActive) {
    activeIndex.value = btn.index;
  }
  // emitter.emit(EMIT_COMMAND.BUTTON_CLICK, { key: btn.key, index: btn.index, tokenKey: props.tokenKey });
};

onMounted(() => {
  emitter.on("showLayers", () => {
    layerShow.value = !layerShow.value;
  });
});

onBeforeUnmount(() => {
  emitter.off("showLayers");
})
</script>

<style scoped>
.flex-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  /* 元素间距 */
  gap: 12px;
  padding-left: 15px;
}

.align-item {
  width: 30px;
  height: 35px;
}

.text-item {
  font-size: 20px;
}

.active {
  background-color: #fff;
  color: rgb(24, 144, 255);
}

.imgBtn {
  height: 35px;
  width: 30px;
}

.imgBtn :hover {
  color: rgb(24, 144, 255);
}
</style>