vue konva给每个rect添加鼠标移动进去文字提示

您可以使用Vue Konva的`on("mouseover")`和`on("mouseout")`事件监听器函数来实现鼠标移动进去和移出时的提示文字。在矩形上添加一个`Tooltip`组件，当鼠标移动进去时，显示提示文字。示例如下：

<template>
  <v-stage :config="config" ref="stage">
    <v-layer>
      <v-rect
        v-for="(rect, index) in rects"
        :key="index"
        :x="rect.x"
        :y="rect.y"
        :width="rect.width"
        :height="rect.height"
        :fill="rect.fill"
        @mouseover="showTooltip(rect, $event)"
        @mouseout="hideTooltip()"
      />
      <v-tooltip :visible="tooltipVisible" :x="tooltipX" :y="tooltipY">
        {{ tooltipText }}
      </v-tooltip>
    </v-layer>
  </v-stage>
</template>

<script>
import VueKonva from "vue-konva";

export default {
  components: {
    VueKonva,
  },
  data() {
    return {
      config: {
        width: 500,
        height: 500,
      },
      rects: [
        { x: 50, y: 50, width: 100, height: 100, fill: "#00ff00", tooltip: "Rect 1" },
        { x: 200, y: 200, width: 100, height: 100, fill: "#ff0000", tooltip: "Rect 2" },
      ],
      tooltipVisible: false,
      tooltipX: 0,
      tooltipY: 0,
      tooltipText: "",
    };
  },
  methods: {
    showTooltip(rect, event) {
      this.tooltipText = rect.tooltip;
      this.tooltipX = event.evt.clientX;
      this.tooltipY = event.evt.clientY;
      this.tooltipVisible = true;
    },
    hideTooltip() {
      this.tooltipVisible = false;
    },
  },
};
</script>

在上述代码中，通过`v-for`循环渲染多个矩形，当鼠标移动进去时，调用`showTooltip`函数显示提示文字，并设置`tooltipVisible`为`true`，当鼠标移出时，调用`hideTooltip`函数隐藏提示文字，并设置`tooltipVisible`为`false`。同时，通过`tooltipX`和`tooltipY`设置提示文字的位置。在`<v-tooltip>`组件中显示提示文字。