zhangzp
zhangzp
我也写个了h5编辑器，支持很多功能，可以生成h5代码 ，你可以去试一下，[git地址](https://github.com/a7650/h5-editor)
你可以看一下这个[Vue3DraggableResizable](https://github.com/a7650/vue3-draggable-resizable)
> I experiment with vue3 composition in a drag/drop mechanism in my [quickMockup](https://github.com/jdittrich/vue3QuickMockup) project. It currently runs at best in a prototypical state, but maybe you find the code helpful...
> Hi, Can you provide me with a demo that can be reproduced?
你好、能提供一个demo看下吗
> 能否支持旋转功能 你好，旋转功能要稍微复杂一点点，以后会实现的，只是我最近比较忙，你可以持续关注这个项目。 还有，你可以查看这个链接[h5-editor](https://github.com/a7650/h5-editor/tree/master/src/views/posterEditor/components/dragable)，这是我另一个项目里的组件，支持拖拽缩放旋转，只是这个是Vue2的，而且里面有一些耦合性的代码，不过你可以参考下。
> 增加网格 作者，这个功能大概什么时候能有啊？ 你想要网格的话，可以通过参考线的方式实现，因为参考线都是可以自定义的，直接加参考线就可以了。
> 请教一下，现在组件只要点击外部区域就会变成非活跃状态，那如何保持组件的活跃状态呢？ 你搜一下一个叫`widget.js`的文件，里面有一个`Widget`类，这个类里面有一个静态方法`superMixin`，返回值是一个对象，里面的methods中有`activated`方法和`deactivated`方法，这两个方法是控制组件的活跃与非活跃状态的切换的，这两个方法的触发时机是在`widgetContainer.vue`组件中，然后这个组件里面监听`vue-draggable-resizable`的`activated`和`deactivated`事件，你直接改这些方法就行了。
> @a7650 我是参照你另一个项目来做的，在组件`activated`方法的时候，将组件数据添加到一个List里面，组件`deactivated`方法的时候，从List中删除该组件数据，但是，如果我点击任何非组件内部区域的时候，都会触发组件的`deactivated`事件，我应该怎样阻止这个事件的发生？ 抱歉我看错了，我以为是另一个项目，目前这个组件（`Vue3DraggableResizable`）没有这方面的配置，你如果想达到这种效果的话你可以修改源码文件`hooks.ts`的**262**行，你如果不想这么麻烦的话，还有一个做法是监听组件的`deactivated`事件，然后在事件处理函数中执行下面这段代码： ```js this.$nextTick(() => { this.active = true; }); ``` 这样就可以让组件始终保持activated状态了。
> 等比缩放是 在调整组件大小的时候里面的内容跟着缩放吗？目前好像还不行，可以指点一下吗 你好，可以监听组件的缩放事件，计算比例，然后应用在组件内的元素上。