Question

我正在使用 Vue、Leaflet 和 Ionic 构建一个简单的应用程序。我有一个带有圆形菜单（由 SVG 构建）的居中光标，可以在地图上的标记上开始操作。例如。一个可以放在标记上的菜单，有 2 个按钮：“删除”和“退出菜单”。 “退出菜单”按钮（右下）完美运行，

<块引用>

@click.prevent="exitBankje" 被执行

，但“删除”按钮（右上角）对鼠标点击没有反应。

<块引用>

@click.prevent="deleteBankje"

未执行。

希望有人能告诉我我做错了什么。

Vue deleteBankje 组件：

<template>
  <div style="z-index: 9999"
  >
    <div class="centermenu">
      <svg height="150" width="150">
        <line
          x1="75"
          y1="0"
          x2="75"
          y2="55"
          style="stroke: rgb(255, 0, 0); stroke-width: 2"
        />
        <line
          x1="75"
          y1="95"
          x2="75"
          y2="150"
          style="stroke: rgb(255, 0, 0); stroke-width: 2"
        />
        <line
          x1="0"
          y1="75"
          x2="55"
          y2="75"
          style="stroke: rgb(255, 0, 0); stroke-width: 2"
        />
        <line
          x1="95"
          y1="75"
          x2="150"
          y2="75"
          style="stroke: rgb(255, 0, 0); stroke-width: 2"
        />
      </svg>
    </div>

    <div class="centermenu">
      <div style="transform: translate(85px,0px);">
        <a href="#" @click.prevent="deleteBankje" style="pointer-events: auto;">
          <svg height="75" width="75">
            <path
              d="M0 55 L0 0  A 65 65 0 0 1 65 65 L10 65z"
              style="
                fill: #4d4d4d;
                stroke: #000000;
                stroke-width: 0.55;
                stroke-linejoin: round;
                stroke-miterlimit: 4;
                stroke-dasharray: none;
                stroke-opacity: 1;
                paint-order: markers fill stroke;
                fill-opacity: 1;
                opacity: 0.5;
              "
              fill="none"
            />
          </svg>
        </a>
      </div>
    </div>
    <img
      src="../assets/images/minus.png"
      width="40"
      height="40"
      class="centermenu ttr"
      @click.prevent="deleteBankje"
    />

    
<!-- Segment rechts onder -->
    <div class="centermenu">
      <div style="transform: translate(85px, 85px);">
        <a href="#" @click.prevent="exitBankje" style="pointer-events: auto;">
          <svg height="75" width="75">
            <path
              d="M 10 0 L65 0 A 65 65 0 0 1 0 65 L0 10z "
              style="
                fill: #4d4d4d;
                stroke: #000000;
                stroke-width: 0.55;
                stroke-linejoin: round;
                stroke-miterlimit: 4;
                stroke-dasharray: none;
                stroke-opacity: 1;
                paint-order: markers fill stroke;
                fill-opacity: 1;
                opacity: 0.5;
              "
              fill="none"
            />
          </svg>
        </a>
      </div>
    </div>
    <img
      src="../assets/images/cross.png"
      width="40"
      height="40"
      class="centermenu tbr"
      @click.prevent="exitBankje"
    />

  </div>
  
</template>

<script>
import { eventHub } from "../main";


export default {


  methods: {
    deleteBankje() {
      console.log("DeleteBankje.vue: deleteBankje emitted");
      eventHub.emit("deleteBankje");
      eventHub.emit("endDelete");
    },

    exitBankje() {
      console.log("DeleteBankje.vue: endDelete emitted");
      eventHub.emit("endDelete");
    },
  },
};
</script>

<style scoped>
.centermenu {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -75px;
  margin-left: -75px;
  width: 150px;
  height: 150px;
}

.ttr {
  pointer-events: auto;
  transform: scale(0.3, 0.3) translate(120px, -120px);
}


.tbr {
  pointer-events: auto;
  transform: scale(0.3, 0.3) translate(120px, 120px);
}

</style>

调用delete-bankje组件的app.Vue：

<template>
  <ion-app>
    <ion-content style="height: 100%;width:100%;">
      <!-- <ion-router-outlet /> -->
      <front-page :bankjes="bankjes" v-if="dataReceived"></front-page>

      <menu-bar />
      <add-bankje v-if="showAddOverlay"></add-bankje>
      <delete-bankje v-if="showDeleteOverlay"></delete-bankje>
    </ion-content>
  </ion-app>
</template>

<script >
// import { IonApp, IonRouterOutlet } from '@ionic/vue';
import { IonApp, IonContent } from "@ionic/vue";
import { defineComponent } from "vue";
import FrontPage from "./components/FrontPage";
import MenuBar from "./components/MenuBar.vue";
import AddBankje from "./components/AddBankje.vue";
import DeleteBankje from "./components/DeleteBankje.vue";
import { eventHub } from "./main";

const axios = require("axios");

export default defineComponent({
  name: "App",
  components: {
    IonApp,
    FrontPage,
    MenuBar,
    IonContent,
    AddBankje,
    DeleteBankje,
  },

  data() {
    return {
      bankjes: null,
      dataReceived: false,
      showAddOverlay: false,
      showDeleteOverlay: false,
    };
  },

  mounted() {
    this.refreshDataFromServer();
    eventHub.on("startAdd", this.startAdd);
    eventHub.on("endAdd", this.endAdd);
    eventHub.on("startDelete", this.startDelete);
    eventHub.on("endDelete", this.endDelete);
  },

  methods: {
    refreshDataFromServer() {
      axios.get("http://localhost:3000/bankjes").then((response) => {
        this.bankjes = response.data;
        this.dataReceived = true;
      });
    },

    startAdd() {
      console.log("App.vue: Hit eventhandler voor startAdd");
      this.showAddOverlay = true;
    },

    endAdd() {
      console.log("App.vue: Hit eventhandler voor endAdd");
      this.showAddOverlay = false;
    },

    startDelete() {
      console.log("App.vue: Hit eventhandler voor startDelete");
      this.showDeleteOverlay = true;
    },

    endDelete() {
      console.log("App.vue: Hit eventhandler voor EndDelete");
      this.showDeleteOverlay = false;
    },
  },
});
</script>

后来补充：我发现菜单项周围的 DIV 大约为 150x75 像素（此处为蓝色）：

Answer 1

屏幕截图可能会有很大帮助...但如果您使用的是 style="z-index: 9999"，请确保模板没有相互重叠。例如：

<add-bankje v-if="showAddOverlay"></add-bankje>
<delete-bankje v-if="showDeleteOverlay"></delete-bankje>

检查此堆栈并尝试将 CSS 类的 position: absolute; 更改为 position: relative; 或 flex。

svg 按钮对点击没有反应

1 个答案: