泛微代码块实现建模查询鼠标移入显示悬浮框

以下是一个泛微代码块实现的示例，可以实现建模查询鼠标移入显示悬浮框功能：

<template>
  <div class="model-query" @mouseover="showTooltip" @mouseleave="hideTooltip">
    {{ queryTitle }}
    <div class="tooltip" v-show="tooltipVisible">
      {{ tooltipContent }}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    queryTitle: String,
    tooltipContent: String
  },
  data() {
    return {
      tooltipVisible: false
    }
  },
  methods: {
    showTooltip() {
      this.tooltipVisible = true
    },
    hideTooltip() {
      this.tooltipVisible = false
    }
  }
}
</script>

<style scoped>
.model-query {
  display: inline-block;
  border-bottom: 1px dotted #333;
  cursor: pointer;
  position: relative;
}

.tooltip {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #fff;
  border: 1px solid #333;
  padding: 5px;
  font-size: 12px;
  display: none;
}

.tooltip:before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #333 transparent;
}
</style>

使用方法：

在建模查询的列表页面中，可以使用该组件来显示每个查询的标题，并在鼠标移入时显示该查询的详细内容。

在父组件中引入该组件，并传入查询的标题和详细内容：

<template>
  <div>
    <model-query
      v-for="(query, index) in queries"
      :key="index"
      :query-title="query.title"
      :tooltip-content="query.content"
    />
  </div>
</template>

<script>
import ModelQuery from './ModelQuery.vue'

export default {
  components: {
    ModelQuery
  },
  data() {
    return {
      queries: [
        {
          title: '查询1',
          content: '查询1的详细内容'
        },
        {
          title: '查询2',
          content: '查询2的详细内容'
        }
      ]
    }
  }
}
</script>

该组件会根据传入的标题和详细内容显示查询的标题，并在鼠标移入时显示详细内容的悬浮框。可以根据需要自定义样式和悬浮框位置