|
前几天我发布了数控系统密码解锁的插件，在使用过程中有开发者反馈这个插件无法在vue2项目中使用，于是，我就开始找问题，发现我的插件是基于Vue3的开发的，由于Vue3的插件和Vue2的插件完全不兼容，因此插件也就只能在Vue3项目中使用。
经过一番考虑后，我决定用原生js来重构这个插件，让其不依赖任何库，这样它就能运行在任意一台支持js的设备上，本文就跟大家分享下我重构这个插件的过程，欢迎各位感兴趣的开发者阅读本文。运行结果视频：实现web端自定义截屏写在前面本文不讲解插件的具体实现思路，对插件实现思路感兴趣的开发者请移步：实现Web端自定义截屏搭建开发环境我想使用ts、scss、eslint、prettier来提升插件的可维护性，又嫌麻烦，不想手动配置webpack环境，于是我决定使用Vue CLI来搭建插件开发环境。本文不细讲Vue CLI搭建插件开发环境的过程，对此感兴趣的开发者请移步：使用CLI开发一个Vue3的npm库。移除vue相关依赖我们搭建好插件的开发环境后，CLI默认会在package.json中添加Vue的相关包，我们的插件不会依赖于vue，因此我们把它删除即可。{undefined“vue”: “^3.0.0-0”,“vue-class-component”: “^8.0.0-0”}复制代码创建DOM为了方便开发者使用dom，这里选择使用js动态来创建dom，最后将其挂载到body中，在vue3版本的截图插件中，我们可以使用vue组件来辅助我们，这里我们就要基于组件来使用js来创建对应的dom，为其绑定对应的事件。部分实现代码如下，完整代码请移步：CreateDom.tsimport toolbar from “@/lib/config/Toolbar”;import { toolbarType } from “@/lib/type/ComponentType”;import { toolClickEvent } from “@/lib/split-methods/ToolClickEvent”;import { setBrushSize } from “@/lib/common-methords/SetBrushSize”;import { selectColor } from “@/lib/common-methords/SelectColor”;import { getColor } from “@/lib/common-methords/GetColor”;export default class CreateDom {undefined// 截图区域canvas容器private readonly screenShortController: HTMLCanvasElement;// 截图工具栏容器private readonly toolController: HTMLDivElement;// 绘制选项顶部ico容器private readonly optionIcoController: HTMLDivElement;// 画笔绘制选项容器private readonly optionController: HTMLDivElement;// 文字工具输入容器private readonly textInputController: HTMLDivElement;// 截图工具栏图标private readonly toolbar: Array;constructor() {this.screenShortController = document.createElement(“canvas”);this.toolController = document.createElement(“div”);this.optionIcoController = document.createElement(“div”);this.optionController = document.createElement(“div”);this.textInputController = document.createElement(“div”);// 为所有dom设置idthis.setAllControllerId();// 为画笔绘制选项角标设置classthis.setOptionIcoClassName();this.toolbar = toolbar;// 渲染工具栏this.setToolBarIco();// 渲染画笔相关选项this.setBrushSelectPanel();// 渲染文本输入this.setTextInputPanel();// 渲染页面this.se
|