riku
2024-08-23 1788c96aea9247cc36ef8b82734997f1a6a92fb4
src/components/map/MapToolbox.vue
@@ -1,6 +1,6 @@
<template>
  <el-dropdown
    class="fy-container dropdown-wrap"
    class="p-events-auto"
    trigger="click"
    size="small"
    @command="handleCommand"
@@ -12,8 +12,16 @@
    </el-button>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item v-for="(item, index) in toolItem" :key="index" :command="index">
          <el-button :type="item.value ? 'primary' : 'info'" plain size="default">
        <el-dropdown-item
          v-for="(item, index) in toolItem"
          :key="item.label"
          :command="index"
        >
          <el-button
            :type="item.value ? 'primary' : 'info'"
            plain
            size="default"
          >
            <font-awesome-icon :icon="item.icon" class="m-r-4" />
            {{ item.label + ': ' + (item.value ? '开' : '关') }}
          </el-button>
@@ -64,25 +72,25 @@
            this.value = !this.value;
            toolbox.toggleCoorPicking(this.value);
          }
        },
        {
          icon: 'fa fa-compass',
          label: '数据标记',
          value: true,
          click: function () {
            this.value = !this.value;
            // todo 数据标记
          }
        },
        {
          icon: 'fa fa-compass',
          label: '数据弹框',
          value: true,
          click: function () {
            this.value = !this.value;
            // todo 数据弹框
          }
        }
        // {
        //   icon: 'fa fa-compass',
        //   label: '数据标记',
        //   value: true,
        //   click: function () {
        //     this.value = !this.value;
        //     // todo 数据标记
        //   }
        // },
        // {
        //   icon: 'fa fa-compass',
        //   label: '数据弹框',
        //   value: true,
        //   click: function () {
        //     this.value = !this.value;
        //     // todo 数据弹框
        //   }
        // }
      ]
    };
  },
@@ -95,24 +103,6 @@
</script>
<style scoped>
.dropdown-wrap {
  position: absolute;
  top: 10px;
  left: 2px;
}
.el-button-custom {
  --el-button-bg-color: var(--bg-color);
  --el-button-hover-text-color: var(--select_color);
  --el-button-hover-bg-color: var(--bg-color);
  --el-button-border-color: var(--font-color);
  --el-button-active-border-color: transparent;
}
.el-button-custom:focus-visible {
  outline: 0px solid var(--el-button-outline-color);
}
.el-button {
  margin: initial !important;
}