Nodejs环境下Vue内部窗体缩放效果实现求助

发布于 1周前 作者 ionicwang 来自 nodejs/Nestjs

Nodejs环境下Vue内部窗体缩放效果实现求助

我看了这个实现： https://github.com/SimonZhangITer/DataVisualization

感觉非常炫酷。自己实现的窗体缩放的时候。 中间的图表就全没了，无奈我水平太差了，代码又太多了，各位谁能帮我能写一个单独的例子，如果不嫌弃的话我愿意请你喝杯咖啡（最好用 Element-UI 组件来实现）


Harmonyos Next教程
14 回复

看着像是 dom 的位置交换+CSS3 特效实现的。


能写个 demo 给我看一下么？

css3 transform: scale and top / left transition.

除了点击事件以外，你甚至不需要写一行 js 代码，就能实现这些动画。

重要的是，怎么把图表放到框的中间=_=

这跟图表在哪里没有任何关系。你只需要对它的父元素进行 transform 转换就行。完全不影响里面的内容。

能加个微信么？

给你写了个简单的 demo -> https://codepen.io/wxsm/pen/dJyWdq

放大 / 缩小的效果大概是这样，你可以随意改 btn 里面的内容，对效果不会有任何影响。至于位置，用绝对定位然后改 top / left 就行了。

额，这个确实不麻烦，进来以前我以为是那种可以随意改变窗口大小拖动缩放的。。

非专业前端。只是发表一下看法。

感谢你，我解决了， 加个微信吧！

不必了，如果对你有帮助，帮我点个 star 吧 https://github.com/wxsms/uiv

发现隐藏大神一枚，膜拜

在Node.js环境下实现Vue内部窗体缩放效果，通常涉及到前端Vue组件的样式和JavaScript逻辑处理。这里提供一个基本的实现思路，通过CSS变换（transform）和Vue的事件绑定来实现缩放效果。

首先，确保你的Vue项目已经设置好，并有一个基本的组件结构。然后，你可以按照以下步骤实现缩放效果：

  1. HTML模板：

    <template>
  <div class="window" :style="windowStyle" @wheel="onWheel">
    <!-- 窗体内容 -->
    <p>这是一个可缩放的窗体</p>
  </div>
</template>

  2. CSS样式：

    .window {
  width: 200px;
  height: 200px;
  border: 1px solid #000;
  overflow: auto;
  transition: transform 0.2s;
}

  3. JavaScript逻辑：

    <script>
export default {
  data() {
    return {
      scale: 1,
    };
  },
  computed: {
    windowStyle() {
      return {
        transform: `scale(${this.scale})`,
      };
    },
  },
  methods: {
    onWheel(event) {
      if (event.deltaY < 0) {
        this.scale += 0.1;
      } else {
        this.scale = Math.max(0.5, this.scale - 0.1);
      }
    },
  },
};
</script>

这段代码通过监听鼠标滚轮事件（@wheel），调整窗体的缩放比例（scale），并通过CSS变换应用缩放效果。注意，这里限制了缩放比例的最小值为0.5，以避免窗体内容变得过于小而无法阅读。

回到顶部