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

历史：

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

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

前言：

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

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

正文：

定义基类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"