vue + Lodop 制作可视化设计页面 实现打印设计功能(二)

news2024/11/13 16:25:24

历史:

vue2 + Lodop 制作可视化设计页面 实现打印设计功能(一)

前言:

之前本来打算用直接拿之前做的vue2版本改改就发的,但考虑到现在主流都是vue3了,所以从这篇文章开始使用vue3来写,以及最后的demo也使用vue3

考虑到之前发的一些点过于分散,这篇开始打算就从头开始写这个功能,每篇最后发个本篇的示例demo

主要技术栈:vue3+vite+pinia+less+typescript

目录:

  1. 项目创建及模块定义,简单实现拖拽新增
  2. 组件点击拖拽移动
  3. 新增第一个自定义组件-HPText(文本组件)
  4. 新增HPText组件的菜单,组件菜单设置时组件动态变化
  5. 框选组件,批量移动
  6. 引入lodop,打印预览
  7. 待定...

正文:

创建vue3+vite项目

这个不用多说了,不属于本系列的范围

项目目录

最后项目创建后的目录大概长这样

定义设计页面viewport

<script setup lang="ts">
import {ref,h,resolveComponent} from 'vue'
import {QYComponent} from "../../../domains/qy-component.ts";

const edit = ref(null)
const page = ref({
  height: 560,
  width: 944,
})

const widgetStore = ref<QYComponent[]>([])

const 测试数据 = [{
  uuid:'123',
  attr: {
    x: 10,
    y: 10,
    width: 90,
    height: 20,
  },
}]

const dropToAddCom = (ev) => {
  ev.preventDefault()
  const rest = edit.value.getBoundingClientRect();
  测试数据[0].attr.x = Math.round(ev.clientX - rest.x)
  测试数据[0].attr.y = Math.round(ev.clientY - rest.y)
  widgetStore.value = [...测试数据];
}

const dragOver = (ev) => {
  ev.preventDefault()
}

const handleMouseDown = (ev) => {

}

</script>

<template>
  <div class="holder" id="viewport" ref="viewport" data-type="viewport">
    <div
        :style="{
          height: page.height + 'px',
          width: page.width + 'px'
          }"
        ref="edit"
        class="screen"
        @dragover.prevent="dragOver"
        @drop="dropToAddCom($event)"
    >

      <!-- 组件 -->
      <div
          v-for="(moduleData,index) in widgetStore"
          :style="{
          position: 'absolute',
          top: `${moduleData.attr.y}px`,
          left: `${moduleData.attr.x}px`,
          width: `${moduleData.attr.width}px`,
          height:`${moduleData.attr.height}px`
        }"
      >
        <component
            :is="input"
            :com="moduleData"
        ></component>
      </div>

    </div>
  </div>
</template>

<style scoped>
.holder {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: left;
  overflow: auto;
  font-size: 0;
  border: 1px solid #f5f5f5;
  border-width: 0 1px;
  background-image: linear-gradient(45deg, #f5f5f5 25%, transparent 0, transparent 75%, #f5f5f5 0),
  linear-gradient(45deg, #f5f5f5 25%, transparent 0, transparent 75%, #f5f5f5 0);
  background-position: 0 0, 13px 13px;
  background-size: 26px 26px;
}

.screen {
  margin: 20px;
  transform-origin: center top;
  position: relative;
  box-shadow: 0 0 5px 1px #cccccc;
  background-color: #ffffff;
  background-repeat: no-repeat;
}

.wrapper {
  margin: 20px;
  position: relative;
}
</style>

定义组件列表components-panel

<script setup lang="ts">
import {ref} from 'vue'


const dragStart = (ev) => {
  
}
</script>

<template>
  <div class="component-main" style="display: flex;flex-direction: column">
    <div style="margin: 5px;background: lightskyblue;color: white"
         :draggable="true"
         @dragstart="dragStart($event)">
      文本
    </div>
  </div>
</template>

<style scoped>
.component-main {
  border-radius: 5px;
  height: 100%;
  width: 200px;
  overflow-x: hidden;
  overflow-y: auto;
}
</style>

修改App.vue

<script setup lang="ts">
import viewport from './components/print-designer/viewport/index.vue'
import componentsPanel from './components/print-designer/components-panel/index.vue'


</script>

<template>
  <div class="main" data-theme="qy-designer">
    <components-panel/>
    <viewport/>
  </div>
</template>

<style scoped>
.main {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  user-select: none;
}
</style>

效果

注:这里使用的技术点因为已经在第一篇讲了,所以这里就不再赘述了

demo示例

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1869980.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

4年突破20亿,今麦郎如何持续策划凉白开极致产品力?

范总在方便面市场拥有30年的丰富经验&#xff0c;并曾创造过奇迹。1994年&#xff0c;他从冰糖生意进入方便面行业&#xff0c;创立今麦郎的前身华龙集团。当时&#xff0c;方便面市场已经进入红海阶段&#xff0c;市场上有上千家企业&#xff0c;康师傅和统一占据了80%的市场份…

Apple Intelligence,我们能得到什么?(上)

苹果公司WWDC 2024发布会&#xff0c;苹果AI成为最吸睛的焦点。不过&#xff0c;苹果的AI不是大家口中的AI&#xff0c;而是苹果独有的概念&#xff1a;Apple Intelligence&#xff0c;苹果智能。 所谓Apple Intelligence&#xff0c;被定义为iPhone、iPad和Mac的个人智能系统…

Arduino - 继电器

Arduino - 继电器 In a previous tutorial, we have learned how to turn on/off an LED. In this tutorial, we are going to learn how to turn on/off some kind of devices that use the high voltage power supply(such as a light bulb, fan, electromagnetic lock, lin…

Linux高并发服务器开发(五)终端和守护进程

文章目录 1 概念2 会话基本概念和API3 守护进程&#xff08;重点&#xff09;守护进程模型 4 获取当前系统时间 1 概念 终端 进程的集合叫进程组 也称为作业 是执行程序的过程 2 会话基本概念和API 进程组的集合 3 守护进程&#xff08;重点&#xff09; 独立于控制…

Linux内核中网络数据的流量控制(TC: Traffic control 和 QDISC)

(个人能力有限&#xff0c;本文如有错误之处&#xff0c;欢迎交流指正) 1 简介 在进行网络数据 接收 和 发送 过程中&#xff0c;网卡设备到L3(网络层) 中间会经历流量控制(Traffic control)。 《BPF之巅.洞悉Linux系统和应⽤性能》P413 qdisc这个可选层可以⽤来管理⽹络包的…

机器学习-数据预处理-聚类-回归-分类-单车数据集

机器学习-数据预处理-聚类-回归-分类-单车数据集 前言一、数据预处理1. 导入数据集2. 数据预处理3. 处理缺失值4. 生成特征用于后续进一步的分析 二、数据分布可视化1. 骑行时长分布2. 起始站和终点站分布可视化3. 高峰期与非高峰期骑行频次分布 三、聚类分析1. K-means聚类 四…

PostgreSQL 连接器:在 SeaTunnel 中的应用与优势

在现代企业中&#xff0c;数据已经成为核心资产&#xff0c;基于开源数据集成平台SeaTunnel&#xff0c;工程师如何高效地连接和管理这些数据源&#xff0c;直接关系到企业的竞争力和运营效率。 本文将给大家介绍如何通过 JDBC PostgreSQL 数据源连接器&#xff0c;在 SeaTunne…

240627_图像24位深度(RGB图)转为8位深度(单通道图)

240627_图像24位深度&#xff08;RGB图&#xff09;转为8位深度&#xff08;单通道图&#xff09; 在使用网络上下载下来的一部分图像分割数据集时&#xff0c;有些标签图你看着是一个黑白图&#xff0c;但是他还是有可能是一张RGB三通道图&#xff0c;具体怎么区分呢。右击图…

ARM芯片架构(RTOS)

前言&#xff1a;笔记韦东山老师的rtos教程&#xff0c;连接放在最后 #ARM介绍 arm芯片属于精简指令集risc&#xff0c;所用的指令比较简单&#xff0c;ARM架构是一种精简指令集&#xff08;RISC&#xff09;架构&#xff0c;广泛应用于移动设备、嵌入式系统、物联网等领域。AR…

英国国王座驾车标的逆向工程

多功能设计和制造解决方案为独特的挑战提供了引人注目的优势。Impossible Creations是一家来自英国的定制扫描、设计和建模公司&#xff0c;专门帮助客户完成无限制得创作任务。在他们最近接到的一个项目中&#xff0c;为了修复象征英国国王座驾的大英帝国吉祥物&#xff0c;Im…

【博士每天一篇文献-综述】Biological underpinnings for lifelong learning machines

阅读时间&#xff1a;2023-12-17 1 介绍 年份&#xff1a;2015 作者&#xff1a;Dhireesha Kudithipudi&#xff0c;Mario Aguilar-Simon&#xff0c;其中通讯作者Josh Bongard教授也是另一篇论文的通讯作者《Neural modularity helps organisms evolve to learn new skills …

widows下 vscode 的 terminal / powershell,ctrl+v失灵,输出^v

问题 原因 最近装了PSReadLine Import-Module PSReadLineSet-PSReadLineOption -PredictionSource History Set-PSReadLineOption -PredictionViewStyle InlineView Set-PSReadLineOption -EditMode Emacsvscode不兼容 解决方法 注释掉最后面的 Import-Module PSReadLineS…

Linux通过expect实现免交互

免交互 Here Document 用于将多行字符串直接传递给命令的方式&#xff0c;不需要人为交互命令界面&#xff0c;实现免交互 当使用Here Document操作文件时&#xff0c;需要借助一个文件结束符 EOF&#xff1a;文件结束符 示例 在脚本文件中写入以下内容 <<&#x…

RabbitMQ安装部署

简介 RabbitMQ一款知名的开源消息队列系统&#xff0c;为企业提供消息的发布、订阅、点对点传输等消息服务。 RabbitMQ在企业开发中十分常见&#xff0c;课程为大家演示快速搭建RabbitMQ环境。 安装 rabbitmq在yum仓库中的版本比较老&#xff0c;所以我们需要手动构建yum仓库…

优刻得首个「国产千卡智算集群」落地,支持智源千亿大模型训练

在人工智能引领的时代浪潮中&#xff0c;算力已成为技术进步与创新的核心驱动力。面对当下AI算力需求的飙升、高端AI芯片供应受限的挑战&#xff0c;加之OpenAI带来的技术封锁&#xff0c;唯有坚定不移的发展自主可控的国产技术方案&#xff0c;持续壮大国产智算集群规模&#…

等保测评中的问题与建议

随着信息技术的广泛使用和飞速发展&#xff0c;网络安全已逐渐演变为威胁经济社会发展的关键议题。信息安全的范围涵盖了政治、商务、军事、教育等多个方面。其中&#xff0c;信息的存储、分享以及管理&#xff0c;主要取决于政府的宏观规划和决策、商业运作的信息、银行的财务…

字节跳动发布的Coze,可以免费使用GPT-4o模型了

Coze是字节跳动推出的一个AI聊天机器人和应用程序编辑开发平台&#xff0c;可以理解为字节跳动版的GPTs。无论用户是否有编程经验&#xff0c;都可以通过该平台快速创建各种类型的聊天机器人、智能体、AI应用&#xff0c;并将其部署在社交平台和即时聊天应用程序中&#xff0c;…

丝杆支撑座:滚珠丝杆稳定运行的守护者!

丝杆支撑座是丝杆和电机之间连接的重要组成部分&#xff0c;发挥着非常重要的功能。提到丝杆支撑座和滚珠丝杆&#xff0c;很多人都会想到支撑关系&#xff0c;但丝杆支撑座作为滚珠丝杆系统中至关重要的角色&#xff0c;其作用远不止于简单的支撑。 丝杆支撑座安装过程非常简单…

解锁横向招聘:创新您的人才搜索

技能差距仍然是面试官面临的问题之一。在这些空缺职位中&#xff0c;很难找到合适的技能候选人&#xff0c;特别是高级职位或以上职位。另一方面&#xff0c;申请人也发现很难找到一份适合自己的工作&#xff0c;因为他们抱怨工作要求太窄或太具体。在具有挑战性的职位招聘环境…

目标检测之YoloV1

一、预测阶段&#xff08;前向推断&#xff09; 在预测阶段Yolo就相当于一个黑箱子&#xff0c;输入的是448*448*3的图像&#xff0c;输出是7*7*30的张量&#xff0c;包含了所有预测框的坐标、置信度和类别 为什么是7*7*30呢&#xff1f; --将输入图像划分成s*s个grid cell&a…