自研Vue3低代码海报制作平台第一步：基础拖拽组件开发

最新推荐文章于 2025-04-23 16:17:36 发布
最新推荐文章于 2025-04-23 16:17:36 发布
阅读量941 收藏 8
点赞数 7
CC 4.0 BY-SA版权
分类专栏： Vue3开源组件实战 文章标签： 低代码 vue3 拖拽
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/felix_alone2012/article/details/141135260

学习来源：稀土掘金 - 幽月之格大佬的技术专栏可拖拽、缩放、旋转组件 - 著作：可拖拽、缩放、旋转组件实现细节

非常感谢大佬！受益匪浅！

前面我们学习了很多vue3的知识，是时候把它们用起来做一个有意思的平台：低代码海报制作平台了。首先我们要实现基础的拖拽功能，这里非常感谢掘金优秀创作者幽月之格大佬，拜读您的可拖拽、缩放、旋转组件技术专栏让我跟着一步步的敲代码，站在大佬的肩膀上，参考下技术大牛是怎么实现的。学习别人的设计思想，当然代码也不是完全照搬，要有自己的思考。

在这里插入图片描述

文章目录

vitepress文档完善

为了演示拖拽的示例，和之前自研组件库开发一样，我们依然采用

最低0.47元/天 解锁文章
Vue - 详细实现低代码平台，支持拖曳式可视化生成应用软件功能，用户通过拖拽元素、搭积木的方式创建应用（适合迭代的基础架构、低代码平台）
王二红
07-27 8464
Vue低代码平台-拖曳式拖拉拽可视化生成应用软件，拖拽式低代码数据可视化开发平台，vue实现拖拽，拖拽式Vue组件代码生成平台，基于vue的可视化拖拽代码生成工具，Vue实现可拖拽组件的方法，一个低代码平台的前端部分，靠拖拉拽生成页面。Vue技术栈从零实现低代码可视化搭建平台示例，低代码轮子，通过拖拽就可生成Vue代码的平台来了，vue低代码平台开发相关比低代码更强大的零代码开发平台，这款低代码SAAS数据可视化工具,拖拽生成大屏。vue实现拖拽效果，Vue自由拖拽缩放组件，自定义组件（文本、图片
总结低代码海报平台编辑器难点
sanstu的博客
03-16 828
上篇总结了基础的架构，本篇总结下细节方面的难点。这是目前编辑器页面的原型图。不难看出和市面上大部分低代码平台一样，由三部分组成：左侧组件列表、中间画布区域、右侧属性区域。大致操作流程就是拖动左侧的组件到中间的画布，选中组件，右侧属性面板就会展示与该组件关联的属性。编辑右侧属性，画布中对应的组件样式就会同步更新。页面拼接完成。从中看出组件串联其中，在前面一篇文章中，我们大致分析了整体页面和组件的数据结构，但没有细化。
用Vue实现海报排版设计功能
weixin_34280237的博客
06-13 2463
一、前言 本来想做个微信小程序，实现一键生成海报图片（可替换文字、图片，不需要用户排版），所以后台管理系统上需要实现一个制作海报模板的功能（“简单版ps”），写了挺长时间的，逻辑太多了，现在写得差不多了，但是由于各种事情项目一直没有进展，估计是没能做完了，所以把这个“简单版ps”开源出来。 二、界面 三、动态效果图 四、github源码地址（欢迎star，谢谢~） github.com/...
Vue 3低代码平台开发实战：架构设计与核心功能实现
最新发布
2401_86373285的博客
04-23 497
随着企业数字化转型的加速，低代码平台已成为提升开发效率的关键工具。本文将深入探讨基于 Vue 3 的低代码平台开发过程中的核心技术实现和解决方案。本文详细介绍了基于Vue 3的低代码平台开发实践，从架构设计到具体实现都提供了详细的示例和最佳实践。这些经验来自实际项目开发，希望能为其他开发者提供有价值的参考。
一个基于 Vue3 的拖拽式低代码数据可视化开发平台，无需编写代码即可制作数据大屏，高效实用！
m0_68103752的博客
10-18 576
该平台适用于各种需要数据可视化的场景，如企业数据分析、业务监控、大屏展示等。
vue3生成海报&下载海报
m0_59631482的博客
09-18 563
vue3生成海报&下载海报
一款基于Vue3实现的漂亮且功能强大的在线海报设计器
weixin_43400476的博客
03-04 945
poster-design —— 一款漂亮且功能强大的在线海报设计器、图片编辑器、仿稿定设计。
uni-app开发（三）：项目实战之仿糗百首页
qq_33613491的博客
08-11 757
一、首页模型搭建 首先，首页有个底部导航——tabBar，分为四个模块，故对应在pages下创建模块，pages.json文件中代码如下： { "pages": [ //pages数组中第一项表示应用启动页 { "path": "pages/index/index", "style": {} ,{ "path" : "pages/news/news", "style" : {} } ,{
使用 Next.js、 Prisma 和 PostgreSQL 全栈开发视频网站
老司机的后备箱
11-17 980
为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。有需要的小伙伴，可以点击下方卡片领取，无偿分享) 对应的原型图：!
【Origin图表高级技巧】：坐标轴隐藏与显示的策略
!... # 摘要 本文详述了Origin软件中图表坐标轴的隐藏与显示技术，系统介绍了坐标轴的概念、隐藏的目的和重要性，探讨了隐藏坐标轴的多种实践方法及其对图表视觉效果和数据解读的影响。接着，文章阐述了坐标轴显示的...
基于 Vue3 + ECharts 的拖拽式低代码数据可视化开发平台
MMKJSH的博客
09-22 1483
基于 Vue3 + ECharts 的拖拽式低代码数据可视化开发平台
vite-vue3-lowcode:vue3.x + vite2.x + vant + element-plus H5移动端低代码平台 lowcode 可视化拖拽 可视化编辑器 visual editor 类似易企秀的H5制作、建站工具、可视化搭建工具
07-24
基于 Vite2.x + Vue3.x + TypeScript H5 低代码平台 后续可能会。。。搭建 PC 端后台管理系统低代码平台 中文 | 克隆主分支，忽略 git-pages 等无关分支 git clone --single-branch https://github.com/buqiyuan/vite-vue3-lowcode.git 技术栈 编程语言： + 构建工具： 前端框架： 路由工具： 状态管理： PC 端 UI 框架： H5 端 UI 框架： CSS 预编译： / / Less HTTP 工具：Axios Git Hook 工具：husky + lint-staged 代码规范：EditorConfig + Prettier + ESLint + Airbnb JavaScript Style Guide 提交规范：Commitizen + Commitlint 单
Vue海报编辑器(自由拖拽海报生成)
qq_37739769的博客
03-12 3922
poster-editor 海报编辑器，用于H5页面生成海报。 最终的目的就是根据自己的想法生成一张图片，项目虽小，五脏俱全。 通过Flex与Less布局页面，模块化组件化开发模式。 Vue声明式的语法实现数据绑定，生命周期函数初始化数据,计算属性过滤/监测数据。 多个组件公共的属性或者方法通过mixins抽离，谁需要谁就引入。 自定义event Bus组件间通信。 多个组件需要的状态置入vuex,正好玩转一下vuex的流程。 Promise封装api,让回调看起来舒服的多了，async/await让异步
记录vue3+Vant+html2canvas实现生成海报功能（包含头像和二维码）
懒羊羊懒羊羊
09-18 767
【代码】记录vue3+Vant+html2canvas实现生成海报功能（包含头像和二维码）
vue生成商品海报
weixin_40565812的博客
02-20 1547
项目中有一个分享商品海报需求,分别为h5端和app端(其中app端)是使用uniapp来进行开发的,其中h5端是使用vue-canvas-poster插件来进行开发的,app是使用uniapp插件市场的l-painter插件进行开发的,接下来我们具体看下它们的使用方法。
【vue 低代码】组件拖拽小案例
做技术，坚持才是最重要的，一时的热情只是暂时的进步
04-09 789
【代码】【vue 低代码】组件拖拽小案例。
vue3分享海报
m0_67287747的博客
04-25 426
学习目标： 提示：这里可以添加学习目标 例如： 一周掌握 Java 入门知识 学习内容： 提示：这里可以添加要学的内容 例如： 搭建 Java 开发环境 掌握 Java 基本语法 掌握条件语句 掌握循环语句 学习时间： 提示：这里可以添加计划学习的时间 例如： 周一至周五晚上 7 点—晚上9点 周六上午 9 点-上午 11 点 周日下午 3 点-下午 6 点 学习产出： 提示：这里统计学习计划的总量 例如： 技术笔记 2 遍 优快云 技术博客 3 篇 习的 vlog 视频 1
推荐一款基于 Vue 的电商级海报生成器
不是太高的手的专栏
06-15 1210
‍‍特性快速：三步完成海报开发工作：启动服务 > 编辑海报 > 生成代码简单：组件丰富、支持拖拽、复制、所见即所得、下载等功能。动态：无需更改代码，直接在编辑器修改海报即可获得...
用Vue3项目快速搭建低代码平台
fafafaz的博客
02-26 1754
在项目实战开发中，尤其是大平台系统的搭建，针对不同业务场景，需要为用户多次编写用于录入、修改、展示操作的相应表单页面。一旦表单需求过多，对于开发人员来说，算是一种重复开发，甚至是繁杂的工作。但是，随着技术发展，前端JS框架的不断成熟，降低前端开发工作量，自动生成统一表单的技术越来越成熟。随之而来，诞生了低代码的思路。低代码，简单理解就是通过可视化拖拽的方式即可生成页面，同时能够保持页面的统一风格，快速搭建页面，生成前后端代码。前端开发框架Vue风靡全球。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Java小卷

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值