xld_three_map/src/views/components/LayersTools/index.vue

<!--
 * @Author: tengmingxue 1473375109@qq.com
 * @Date: 2024-08-22 19:44:53
 * @LastEditors: tengmingxue 1473375109@qq.com
 * @LastEditTime: 2024-08-22 20:53:23
 * @FilePath: \xld_three_map\src\views\components\LayersTools\index.vue
 * @Description: 图层要素工具
-->
<template>
  <div class="query-edit-tool-box">
    <template v-for="(tool, index) in tools.filter(item => item.show)" :key="index">
      <component class="tools-box" :title="tool.name" :is="components[tool.id]" />
    </template>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";
import EditVector from "./components/EditVector.vue";
import QuerySpace from "./components/QuerySpace.vue";
import LayerModify from "./components/LayerModify.vue";
import {useMapToolsStore} from '/@/store/modules/mapTools';
const mapToolsStore = useMapToolsStore();
const components = {
  EditVector,
  QuerySpace,
  LayerModify,
}
const tools = ref([
  { name: "空间查询", id: "QuerySpace", show: false },
  { name: "矢量数据维护", id: "EditVector", show: false },
  { name: "矢量数据维护", id: "LayerModify", show: mapToolsStore.getLayerToolsShow },
]);

watch(() => mapToolsStore.getLayerToolsShow, (newVal) => {
  tools.value[2].show = newVal;
});

</script>

<style lang="less" scoped>
.query-edit-tool-box {
  position: absolute;
  right: 24px;
  top: 72px;
  width: auto;
  height: 34px;

  .tools-box {
    float: left;
    margin: 0 8px;

    .tool {
      margin-bottom: 5px;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}
</style>