本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金。
前言
技术栈选用当前热门的 Vite + Vue3 + Ts
去年开始在公司负责制作大屏低代码平台的二次开发,用的源码是avue的可视化大屏,对原来大屏原有代码改了很多bug,还加入了动画和图形组件的封装,整个代码几乎改了一遍,其中使用到了vue标尺组件 vue-sketch-ruler,这个插件可以使得操作实施人员可以自由的缩放,拖拽页面(拖拽功能需要自己写),还有标准线功能,挺好用,之前avue大屏还没有用到这个插件,我顺便提了一波pr给作者,还加入了页面的操作记录撤销,重做,最终效果也如链接所示 avue大屏链接,这个过程不是本文所要讲的
今年这边把原项目升级到vue3+vite,再使用vue-sketch-ruler时,不能使用了,因为原来是vue2写的,但作者又没升vue3版(已经两年没有维护了),等别人做是等不了了,那就尝试着自己搞吧!
这里先贴一下vue3-sketch-ruler改造后的效果图
言归正传，,这边插件发布后,更名为vue3-sketch-ruler, 发布一个月时间,下载量有了200个,感觉挺不错,证明这个插件需要用到的人还是挺多的, 也给了我继续后面优化,增加新功能的动力
👉👉 点这里看源码vue3-sketch-ruler
改造过程
- 先下载一个vite+ts的脚手架工程
- 把源码放到里面
- 配置eslint+stylelint对源码进行格式化处理
- 修改vue3的语法差异,比如emit事件等
- ts改造
- npm打包发布
ts改造过程遇到问题
ts也是第一次用,于是国庆学习了一波,感觉最难的就是泛型那块吧,其他加参数类型和返回值类型还是比较简单,最强大之处就是有类型报错提示,方法传参也是有提示,所以一下子就喜欢上了,难怪那么多新插件都用上了ts
- props类型校验之前一直报错,后面参考了一些开源组件库的写法,就是把props分开为另外一个文件,就像是这样子
import { ExtractPropTypes } from 'vue'
export const lineProps = {
scale: Number,
thick: Number,
palette: Object,
index: Number,
start: Number,
vertical: Boolean,
value: Number,
isShowReferLine: Boolean
}
export type LineProps = ExtractPropTypes<typeof lineProps>
这样子操作的好处是,不用把props再到vue里面类型定义再写一遍.
- ts的类型怎么打包到npm然后起作用?
vite直接打包lib的话,是没有type的,百度也搜了,说要装插件
vite-plugin-dts,直接装到vite配置里面,然后打包就有了 默认是打包到包最外面的,发布时需要配置一下outputDir: 'lib/types',我是放到里面的type文件夹里面,还需要到packge.json里面说明一下"typings": "lib/types/index.d.ts",这样引用的时候就会有提示了
优化
如果只是翻一下这个插件,那么我也没必要写这篇文章了, 能够优化代码,并在后期增加新功能, 让这个插件更加好用才是做这个开源项目的目的.
未来支持的功能
- [] 0配置使用插件
- [] 加入画布鼠标拖动功能
- [] 标角支持事件
- [] 右下角有个鼠标进入缩放小功能
- [] 左上角的眼睛，点击能控制红线显影
- [] 加入单元测试功能
我在使用这个插件中还是爬了很多坑,需要配置的东西是真的多,下面是原作者配置的,可以看到需要传很多参数和事件
传参多也就算了,就是页面样式难调,宽高好几处地方要照顾处理,不同尺寸的还要做适配,样式问题(定位),也是麻烦, 我希望插件能做到的是0配置,插件只是提供尺规,里面的页面能适配容器的宽高,也就是自己去计算,不需要我来传,改造之后是这样子的
包裹的div就是自己需要缩放的东东,自己只需要指定wrapper和congtent的样式,其他参数可传可不传,handleScroll等方法,插件自己处理就好了,是不是很爽!!!!开箱即用, 之前我还实现了拖拽画布和页面的缩放按钮,像下面那张图,这个组件当时也是自己写的,鼠标移动到编辑区就显示按钮, 点+ 放大页面 - 缩小 右侧点击一下自适应中间编辑区大小,也就是不管要展示的多大,多小都能以最合适的缩放比初始化展示, 这操作我觉得也应该插件自己处理,自己写多麻烦啊,大家觉得对不对? 有同感的, 大家点点小拇指,嘻嘻!!!
还有一些功能后面会陆续加进入到2X中, 1x保留原来插件的功能,不做大的调整,方便像我这样子的人,已经都写好了功能,只是迁移到vue3而已(有小小改动,在修改记录中已经说明), 如果是新开工程,那么强烈推荐用2x开箱即用
1x中用v-model对源码内部组件传参进行了优化,减少了事件回传, 干掉了一些没用的方法(估计之前作者想加新功能来着), 对画尺子的方法进行整合, 减少打包代码量
在写这篇文章2x还有小bug要修复,完了就推出来,敬请期待!!
最后
这是个开源业余做的功能，有兴趣加强该插件的小伙伴欢迎加入，也欢迎大家提pr或者issue
喜欢的小伙伴不要忘了点赞和 star 哦 ~ 👉👉 点这里看源码vue3-sketch-ruler
