在开发 Vue 应用时，有时需要实现对 PDF 文档或图片的旋转与缩放操作，尤其是在用户希望通过 Ctrl + 鼠标滚轮 实现页面内容缩放的场景中。本文将为你介绍如何使用 Vue.js 实现这样的功能，包括 PDF 和图片的旋转与缩放。

功能需求

我们需要实现以下几个基本功能：

PDF 和图片的旋转：每次点击按钮，内容可以顺时针旋转 90 度。PDF 和图片的缩放：用户可以按住 Ctrl 键并使用鼠标滚轮进行缩放，缩放范围限定在 0.5 到 2 倍之间。平滑过渡：旋转和缩放操作应当具有平滑的过渡效果。实现思路旋转功能：我们通过设置 rotationAngle 来控制旋转的角度，每次点击旋转按钮时，增加 90 度。缩放功能：监听 wheel 事件，当用户按住 Ctrl 键时，判断滚轮的滚动方向，修改缩放比例 rollActive。为了确保用户体验，我们限制了缩放的最小值和最大值，并防止滚轮操作时页面滚动。样式处理：将旋转和缩放通过 CSS 的 transform 属性实现，将 rotate 和 scale 统一处理，避免样式冲突。同时，为了提高用户体验，使用 transition 来实现平滑的旋转与缩放过渡效果。

代码详解

PDF 和图片的旋转与缩放：

滚轮事件处理：

平滑过渡：

总结

通过以上代码，我们在 Vue.js 项目中实现了 PDF 和图片的旋转与缩放功能，用户可以通过点击按钮旋转内容，也可以按住 Ctrl 键并滚动鼠标来调整缩放比例。这种交互方式直观且实用，适用于多种文档和图像预览的场景。

希望这篇文章对你有所帮助，如果你在项目中遇到了类似的需求，不妨试试这个方法！