用vue实现 前端html页面 鼠标悬停位置按住ctrl 滚轮放大页面 而去可以拖拽

好的，下面是一个用Vue实现前端HTML页面鼠标悬停位置按住Ctrl滚轮放大页面并可以拖拽的示例代码：

<template>
  <div class="zoomable" @wheel.prevent="onMouseWheel" @mousedown="onMouseDown" @mousemove="onMouseMove" @mouseup="onMouseUp">
    <div class="content">
      <!-- 页面内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      zoomLevel: 1,
      isDragging: false,
      startX: 0,
      startY: 0,
      startOffsetX: 0,
      startOffsetY: 0,
      offsetX: 0,
      offsetY: 0,
    }
  },
  methods: {
    onMouseWheel(event) {
      if (event.ctrlKey) {
        this.zoomLevel += event.deltaY > 0 ? -0.1 : 0.1;
        this.$refs.zoomable.style.transform = `scale(${this.zoomLevel}) translate(${this.offsetX}px, ${this.offsetY}px)`;
      }
    },
    onMouseDown(event) {
      if (event.ctrlKey) {
        this.isDragging = true;
        this.startX = event.clientX;
        this.startY = event.clientY;
        this.startOffsetX = this.offsetX;
        this.startOffsetY = this.offsetY;
      }
    },
    onMouseMove(event) {
      if (this.isDragging) {
        this.offsetX = this.startOffsetX + event.clientX - this.startX;
        this.offsetY = this.startOffsetY + event.clientY - this.startY;
        this.$refs.zoomable.style.transform = `scale(${this.zoomLevel}) translate(${this.offsetX}px, ${this.offsetY}px)`;
      }
    },
    onMouseUp(event) {
      this.isDragging = false;
    }
  }
}
</script>

<style>
.zoomable {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.content {
  position: absolute;
  top: 0;
  left: 0;
}
</style>

在这个示例代码中，我们使用了`transform`属性来实现页面的缩放和偏移。在缩放操作中，我们使用`@wheel.prevent`事件监听鼠标滚轮事件，并且通过`event.ctrlKey`判断是否同时按下了Ctrl键，然后根据滚轮的方向来调整缩放比例。在拖拽操作中，我们使用`@mousedown`、`@mousemove`和`@mouseup`事件来监听鼠标的按下、移动和松开事件，并且通过`event.ctrlKey`判断是否同时按下了Ctrl键，然后记录下鼠标按下时的位置和页面的偏移量，然后随着鼠标的移动调整页面的偏移量。这里的拖拽操作实现方式和上一个回答中的方式略有不同，但是原理是相同的。最后，我们使用了一些CSS来设置页面的样式。