0.1.5 • Published 5 months ago

ndedit v0.1.5

Weekly downloads
-
License
-
Repository
-
Last release
5 months ago

maotu-webtopo

基于 vue3 的 web 组态引擎库

探索将已有 svg 文件转为自由缩放图形库的解决方案,也可用作低代码大屏项目开发

说明

此开源版本的代码源自于 maotu 插件版 0.3.1 版本,与插件版的差异请查阅插件版的 readme。

使用文档

请参考:http://mt.yaolm.top

声明

maotu-webtopo 使用了 LGPL-3.0 协议。这意味着:

  • 您可以将 maotu-webtopo 作为库链接到您的商业项目,而无需开源您的整个项目。
  • 如果您修改了 maotu-webtopo核心库代码,并分发了修改后的版本,您必须按照 LGPL-3.0 协议的要求,开源您所做的修改。
  • 如果您仅仅是将maotu-webtopo 作为库链接到你的项目,而没有修改或分发它的源代码,那么你的项目无需开源。

    详细的 LGPL-3.0 许可证文本请查阅 https://www.gnu.org/licenses/lgpl-3.0.html

如何构建插件并使用

构建库:

  1. 使用 pnpm run lib 命令构建 maotu-webtopo,生成 dist 文件夹。

使用库:

  1. 推荐使用 pnpm 安装:

    pnpm i maotu  # 前提是你已经发布到了 npm

    如果选择手动复制,请继续参考以下步骤

  2. dist 文件夹中的以下文件复制到你的项目:

    • dist/maotu.es.js:库的入口文件。
    • dist/style.css:库的样式文件。
    • dist/src : 库的ts类型定义。
    • 将这些文件放到你项目中的合适位置。例如,你可以创建一个 src/lib/maotu 目录,并将它们复制到这里。
  3. 确保你的项目可以访问到 style.css 文件。可以通过在入口文件或组件中引入的方式来实现。

在项目中使用示例:

<script setup lang="ts">
import { MtEdit } from "@/lib/maotu/maotu.es" // 替换为你的实际路径
import "@/lib/maotu/style.css"  // 替换为你的实际路径
</script>

<template>
  <div class="w-1/1 h-100vh">
    <mt-edit ref="NdEditRef" />
  </div>
</template>

<style scoped></style>

鸣谢

maotu的部分逻辑实现参考了以下大佬的文章

幽月之格-可拖拽、缩放、旋转组件实现细节

woai3c-一个低代码(可视化拖拽)教学项目