|
|
<!--
|
|
|
工具栏组件
|
|
|
|
|
|
add by RYG
|
|
|
-->
|
|
|
<template>
|
|
|
<div class="flex-container">
|
|
|
<div v-if="!isInside" class="flex-container">
|
|
|
<img src="~/assets/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 }"
|
|
|
/>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
import { ref } from "vue";
|
|
|
import ImageButton from "./ImageButton.vue";
|
|
|
import { emitter } from "~/utils/eventBus";
|
|
|
|
|
|
const activeIndex = ref(-1);
|
|
|
// import { useBtnClickStore } from "~/stores/btnClickStore";
|
|
|
|
|
|
// const store = useBtnClickStore();
|
|
|
|
|
|
// const emit = defineEmits(["btnClick"]);
|
|
|
// const imageUrl = ref('/assets/img/mornejiantou.svg'); // 确保路径正确
|
|
|
const isInside = ref(true);
|
|
|
const buttons = [
|
|
|
{
|
|
|
imageUrl: "_nuxt/assets/img/default.svg",
|
|
|
text: "默认",
|
|
|
key: "default",
|
|
|
index: 0,
|
|
|
},
|
|
|
{
|
|
|
imageUrl: "_nuxt/assets/img/zoom_in.svg",
|
|
|
text: "放大",
|
|
|
key: "zoom_in",
|
|
|
index: 1,
|
|
|
},
|
|
|
{
|
|
|
imageUrl: "_nuxt/assets/img/zoom_out.svg",
|
|
|
text: "缩小",
|
|
|
key: "zoom_out",
|
|
|
index: 2,
|
|
|
},
|
|
|
{
|
|
|
imageUrl: "_nuxt/assets/img/refresh.svg",
|
|
|
text: "刷新",
|
|
|
key: "refresh",
|
|
|
index: 3,
|
|
|
},
|
|
|
{
|
|
|
imageUrl: "_nuxt/assets/img/center.svg",
|
|
|
text: "居中",
|
|
|
key: "center",
|
|
|
index: 4,
|
|
|
},
|
|
|
{
|
|
|
imageUrl: "_nuxt/assets/img/part.svg",
|
|
|
text: "局部",
|
|
|
key: "part",
|
|
|
index: 5,
|
|
|
},
|
|
|
{
|
|
|
imageUrl: "_nuxt/assets/img/all.svg",
|
|
|
text: "全部",
|
|
|
key: "all",
|
|
|
index: 6,
|
|
|
},
|
|
|
{
|
|
|
imageUrl: "_nuxt/assets/img/move.svg",
|
|
|
text: "移动",
|
|
|
key: "move",
|
|
|
index: 7,
|
|
|
},
|
|
|
{
|
|
|
imageUrl: "_nuxt/assets/img/choose_arrow.svg",
|
|
|
text: "选择",
|
|
|
key: "choose",
|
|
|
index: 8,
|
|
|
},
|
|
|
{
|
|
|
imageUrl: "_nuxt/assets/img/save.svg",
|
|
|
text: "保存",
|
|
|
key: "save",
|
|
|
index: 9,
|
|
|
},
|
|
|
{
|
|
|
imageUrl: "_nuxt/assets/img/image_layer_tree.svg",
|
|
|
text: "图层",
|
|
|
key: "layer",
|
|
|
index: 10,
|
|
|
},
|
|
|
];
|
|
|
|
|
|
const handleButtonClick = (btn) => {
|
|
|
activeIndex.value = btn.index;
|
|
|
emitter.emit("btnClick", { key: btn.key, index: btn.index });
|
|
|
// emit("btnClick", btn.key); // 触发事件，将按钮的key传递出去
|
|
|
// store.newBtnClicked(btn.key);
|
|
|
// switch (btn.key) {
|
|
|
// case "default":
|
|
|
// // 处理默认按钮点击
|
|
|
// break;
|
|
|
// case "zoom_in":
|
|
|
// // 处理放大按钮点击
|
|
|
// break;
|
|
|
// case "zoom_out":
|
|
|
// // 处理缩小按钮点击
|
|
|
// break;
|
|
|
// case "refresh":
|
|
|
// // 处理刷新按钮点击
|
|
|
// break;
|
|
|
// case "center":
|
|
|
// // 处理居中按钮点击
|
|
|
// break;
|
|
|
// case "part":
|
|
|
// // 处理局部按钮点击
|
|
|
// break;
|
|
|
// case "all":
|
|
|
// // 处理全部按钮点击
|
|
|
// break;
|
|
|
// case "move":
|
|
|
// // 处理移动按钮点击
|
|
|
// break;
|
|
|
// case "choose":
|
|
|
// // 处理选择按钮点击
|
|
|
// break;
|
|
|
// case "save":
|
|
|
// // 处理保存按钮点击
|
|
|
// break;
|
|
|
// case "layer":
|
|
|
// // 处理图层按钮点击
|
|
|
// break;
|
|
|
// default:
|
|
|
// console.warn(`未定义的按钮：${btn.key}`);
|
|
|
// }
|
|
|
};
|
|
|
</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>
|