本文主要是介绍vue + Lodop 制作可视化设计页面 实现打印设计功能(三),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
历史:
vue2 + Lodop 制作可视化设计页面 实现打印设计功能(一)
vue + Lodop 制作可视化设计页面 实现打印设计功能(二)
前言:
在之前的几篇文章里已经完成了项目的创建,并且实现了简单的拖拽新增,这篇主要是实现第一个组件(HPText)
主要技术栈:vue3+vite+pinia+less+typescript
目录:
- 项目创建及模块定义,简单实现拖拽新增
- 新增第一个自定义组件-HPText(文本组件)
- 组件点击拖拽移动
- 新增HPText组件的菜单,组件菜单设置时组件动态变化
- 框选组件,批量移动
- 引入lodop,打印预览
- 待定...
正文:
-
定义基类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 制作可视化设计页面 实现打印设计功能(三)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!