yoyoo-ddr v0.7.0

English document

安装-vue 2

npm i yoyoo-ddr --save

安装-vue 3

npm i yoyoo-ddr-vue3 --save

单个组件使用

Example

import DDR from 'yoyoo-ddr';
import 'yoyoo-ddr/dist/yoyoo-ddr.css';

// vue 3
// import DDR from 'yoyoo-ddr-vue3'
// import 'yoyoo-ddr-vue3/dist/yoyoo-ddr-vue3.css'

export default {
  data() {
    return {
      transform: { x: 100, y: 100, width: 100, height: 100, rotation: 0 },
    };
  },
  render() {
    // vue 3 使用 v-model:value={this.transform}
    return (
      <DDR v-model={this.transform}>
        <div style='background:red;width:100%;height:100%'>x={this.transform.x}</div>
      </DDR>
    );
  },
};

在数组中使用

export default {
  data() {
    return {
      list: [
        { id: 1, active: false, transform: { x: 100, y: 100, width: 100, height: 100, rotation: 0 } },
        { id: 2, active: false, transform: { x: 200, y: 100, width: 100, height: 100, rotation: 0 } },
        { id: 3, active: false, transform: { x: 300, y: 100, width: 100, height: 100, rotation: 0 } },
        { id: 4, active: false, transform: { x: 400, y: 100, width: 100, height: 100, rotation: 0 } },
      ],
    };
  },
  methods: {
    handleActive(id) {
      // 如果active属性和该函数的返回值都为false时，组件不会响应鼠标操作
      // 将数组内对应id的数据同步为true
      this.list = this.list.map((item) => {
        if (item.id === id) {
          item = { ...item, active: true };
        } else if (item.active) {
          item = { ...item, active: false };
        }
        return item;
      });
      return true;
    },
    renderChild(item) {
      return <div style='background:red;width:100%;height:100%'>Child {item.id}</div>;
    },
  },
  render() {
    return (
      <div>
        {this.list.map((item) => {
          // 如果直接使用slot插入子组件的方式会导致全量更新
          // 可以使用 renderContent 函数，或者在对DDR组件进行一次包装来解决更新问题
          return <DDR beforeActive={this.handleActive} active={item.active} key={item.id} id={item.id} value={item.transform} renderContent={this.renderChild} />;
        })}
      </div>
    );
  },
};

value 单向数据流

export default {
  data() {
    return {
      transform: { x: 100, y: 100, width: 100, height: 100, rotation: 0 },
    };
  },
  methods: {
    handleDrag(event, transform) {
      this.transform = transform;
    },
    handleResize(event, transform) {
      this.transform = transform;
    },
    handleRotate(event, transform) {
      this.transform = transform;
    },
  },
  render() {
    // 当组件被拖动时transform的值并不会同步。如果要同步，需要监听事件来同步。
    // 在大数组渲染下，建议在拖拽结束后进行一次数据同步。可参考Demo项目的数据同步
    return (
      <DDR onResize={this.handleResize} onRotate={this.handleRotate} onDrag={this.handleDrag} value={this.transform}>
        <div style='background:red;width:100%;height:100%'>child</div>
      </DDR>
    );
  },
};

特色

• 轻量级，无任何依赖
• 可配置拖拽、旋转、缩放、网格对齐、限制父元素内移动、固定坐标轴移动、等比例缩放

注意事项

• 容器如果使用了 overflow scroll 也会导致组件拖拽时的位置错误

属性

自定义 class 样式

• 拖动状态： ddr-ready-drag 鼠标按下,准备拖动时的 class。ddr-dragging 拖动时的 class
• 缩放状态： ddr-ready-resize 鼠标按下，准备缩放时的 class。ddr-resizing 缩放时的 class
• 旋转状态： ddr-ready-rotate 鼠标按下，准备旋转时的 class。ddr-rotating 旋转时的 class
• 选中状态： active 组件选中时的 class

事件

拖拽、旋转、缩放时会触发一系列事件，该事件都会传入两个参数，第一个参数为原始的事件对象，第二个参数为当前组件的位置信息。

链接

• 在线演示

• 更新日志

Demo 项目目前已实现的功能，且在不停的更新中

• 可以自定义组件，在目录 src/examples/vseditor/component-impl.js中增加实现并导出。 components.vue 中添加对应的类型即可。
• 可自定义组件属性编辑器 在目录 src/examples/vseditor/prop-inspector.vue 中添加对应的类型并实现即可
• 可从组件列表中拖拽组件到编辑区域进行编辑
• 支持嵌套组件，component-impl.js 中的 Container 组件实际包含了一个editor-view组件，可无限嵌套
• 编辑器区域的其他功能将以插件的形式提供，方便功能管理
• 支持历史记录回退，组件删除和画布清除等
• 支持编辑器区域框选功能，批量拖拽，批量删除 ，批量创建副本
• 完善编辑器区域的框选功能，已实现组件的批量更新
• 使用 keyboardjs 来支持快捷键触发操作（command z,command shift z,backspace,command d）
• 持续重构代码，通常情况都是先实现再做优化。
• 优化组件付容器缩放问题

该项目会一直不停的完善，其目的主要是通过大量的项目实践给 yoyoo-ddr 增加一些有用的功能，使他尽可能满足大部分场景的需求。

联系我

如果在使用该组件时遇到问题，可以加 QQ(2498683974)联系我。欢迎提出宝贵意见和建议

License

The MIT License (MIT). Please see License File for more information.