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

本文主要是介绍vue + Lodop 制作可视化设计页面 实现打印设计功能(三),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

历史:

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

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

前言:

在之前的几篇文章里已经完成了项目的创建,并且实现了简单的拖拽新增,这篇主要是实现第一个组件(HPText)

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

目录:

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

正文:

  • 定义基类class

首先抽象组件,对于一个打印组件来说,最重要的属性如下:

属性名意义
id唯一标识
title内容标题
type组件类型

x

横坐标
y纵坐标
height

width

那我们就依据这个来定义一个抽象类当做所有组件的基类

import {nanoid} from "nanoid";/*** 位置信息*/
export interface ComponentAttr {x: numbery: numberwidth: numberheight: number
}export abstract class QYComponent {id: stringtitle:stringreadonly type: stringattr:ComponentAttr={x: 10,y: 10,width: 90,height: 20,}constructor(type: string, attr: Partial<ComponentAttr>) {this.id = nanoid()this.type = typethis.attr = { ...this.attr, ...attr }}
}
  •  定义HPText 的 class

直接继承与前面定义的基类即可,并定义一些初始值

export class HPText extends QYComponent {//可以加一些Text特有的属性constructor() {super('HPText', { width: 50, height: 50 })}
}
  •  定义一个HPText 的 vue文件 用于显示

在props 定义一个com用于接收数据

<script lang="ts">
import {defineComponent, PropType, ref, toRef} from "vue";
import {HPText} from "./index.ts";export default defineComponent({name: 'HPText',props: {com: {type: Object as PropType<HPText>,required: true,},},setup(props) {const title = toRef(props.com, 'title')return{title,}},mounted() {}
})
</script><template><div style="font-size: 12px;">{{title}}</div>
</template><style scoped></style>
  • 准备注册组件

首先是定义一个共用的ts文件,让打印的组件都在这里声明,最后把此ts文件在mian.ts中注册即可

index.ts

import HPText from './text/index.vue'
import type {App} from 'vue'const components = [HPText,
]const install = function (app: App):void {//组件注册components.forEach(component => {app.component(component.name,component)})
}export default {install,
}

mian.ts

import widgets from './components/print-designer/widgets/index.ts'app.use(widgets)

这样我们的HPText 的文件也就创建以及注册好了,现在我们需要改动前面的代码使其能够使用HPText

  • 代码改动

1.首先是dragStart

这里我定义了一个组件列表数组

export const datas = [{"id": "1","title": "文本","type": "HPText"}
]
const dragStart = (ev,index) => {ev.dataTransfer.setData('index', index)
}
2.其次是dropToAddCom
const  dropToAddCom = async (ev:DragEvent) => {ev.preventDefault()let index = ev.dataTransfer.getData('index')//初始化组件let com = await createComponent(datas[index].type)//获取父容器的边界矩形const rest = edit.value.getBoundingClientRect();//插入x,y坐标com.attr.x = Math.round(ev.clientX-rest.x)com.attr.y = Math.round(ev.clientY-rest.y)//拼接参数widgetStore.value.push({...com,...datas[index]});
}

其中createComponent()是一个工具方法,主要是查询指定目录下的文件并初始化创建组件

import { camelCase } from 'lodash-es'export async function createComponent(name: string) {const modules: Record<string, () => Promise<any>> = import.meta.glob(['./print-designer/widgets/**/*.ts'])const file = camelCase(name.substring(2))const paths = Object.keys(modules)let path = paths.find(m => m.includes(`${file}/index.ts`))if (path) {const mod = await modules[path]()return new mod.default()}throw Error(`没有找到组件,类型: ${name}.`)
}

至此,HPText 完成

新增依赖

"lodash-es": "^4.17.21"
"nanoid": "^5.0.7"

效果

demo示例

这篇关于vue + Lodop 制作可视化设计页面 实现打印设计功能(三)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1133401

相关文章

c++ 类成员变量默认初始值的实现

《c++类成员变量默认初始值的实现》本文主要介绍了c++类成员变量默认初始值,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 目录C++类成员变量初始化c++类的变量的初始化在C++中,如果使用类成员变量时未给定其初始值,那么它将被

Qt使用QSqlDatabase连接MySQL实现增删改查功能

《Qt使用QSqlDatabase连接MySQL实现增删改查功能》这篇文章主要为大家详细介绍了Qt如何使用QSqlDatabase连接MySQL实现增删改查功能,文中的示例代码讲解详细,感兴趣的小伙伴... 目录一、创建数据表二、连接mysql数据库三、封装成一个完整的轻量级 ORM 风格类3.1 表结构

基于Python实现一个图片拆分工具

《基于Python实现一个图片拆分工具》这篇文章主要为大家详细介绍了如何基于Python实现一个图片拆分工具,可以根据需要的行数和列数进行拆分,感兴趣的小伙伴可以跟随小编一起学习一下... 简单介绍先自己选择输入的图片,默认是输出到项目文件夹中,可以自己选择其他的文件夹,选择需要拆分的行数和列数,可以通过

Python中将嵌套列表扁平化的多种实现方法

《Python中将嵌套列表扁平化的多种实现方法》在Python编程中,我们常常会遇到需要将嵌套列表(即列表中包含列表)转换为一个一维的扁平列表的需求,本文将给大家介绍了多种实现这一目标的方法,需要的朋... 目录python中将嵌套列表扁平化的方法技术背景实现步骤1. 使用嵌套列表推导式2. 使用itert

Python使用pip工具实现包自动更新的多种方法

《Python使用pip工具实现包自动更新的多种方法》本文深入探讨了使用Python的pip工具实现包自动更新的各种方法和技术,我们将从基础概念开始,逐步介绍手动更新方法、自动化脚本编写、结合CI/C... 目录1. 背景介绍1.1 目的和范围1.2 预期读者1.3 文档结构概述1.4 术语表1.4.1 核

在Linux中改变echo输出颜色的实现方法

《在Linux中改变echo输出颜色的实现方法》在Linux系统的命令行环境下,为了使输出信息更加清晰、突出,便于用户快速识别和区分不同类型的信息,常常需要改变echo命令的输出颜色,所以本文给大家介... 目python录在linux中改变echo输出颜色的方法技术背景实现步骤使用ANSI转义码使用tpu

Python使用python-can实现合并BLF文件

《Python使用python-can实现合并BLF文件》python-can库是Python生态中专注于CAN总线通信与数据处理的强大工具,本文将使用python-can为BLF文件合并提供高效灵活... 目录一、python-can 库:CAN 数据处理的利器二、BLF 文件合并核心代码解析1. 基础合

Python使用OpenCV实现获取视频时长的小工具

《Python使用OpenCV实现获取视频时长的小工具》在处理视频数据时,获取视频的时长是一项常见且基础的需求,本文将详细介绍如何使用Python和OpenCV获取视频时长,并对每一行代码进行深入解析... 目录一、代码实现二、代码解析1. 导入 OpenCV 库2. 定义获取视频时长的函数3. 打开视频文

golang版本升级如何实现

《golang版本升级如何实现》:本文主要介绍golang版本升级如何实现问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录golanwww.chinasem.cng版本升级linux上golang版本升级删除golang旧版本安装golang最新版本总结gola

SpringBoot中SM2公钥加密、私钥解密的实现示例详解

《SpringBoot中SM2公钥加密、私钥解密的实现示例详解》本文介绍了如何在SpringBoot项目中实现SM2公钥加密和私钥解密的功能,通过使用Hutool库和BouncyCastle依赖,简化... 目录一、前言1、加密信息(示例)2、加密结果(示例)二、实现代码1、yml文件配置2、创建SM2工具