TypeScript中的装饰器语法

装饰器语法虽然还处于提案阶段,但是确实能够在实际应用中方便的解决一些问题,近期看了一下TypeScript中装饰器的一些基本用法,做了一些笔记如下.

阅读更多

Vue3状态管理工具Pinia的使用

Vue3全面拥抱TypeScript,而其自家的状态管理工具Vuex对于TypeScript的支持并不友好,所以在Vue3时代Pinia显然是更好的选择。

Pinia的开发者是Vue的核心开发人员,且Pinia已经被纳入Vue的官方库,其作者也表示将来可能会与Vuex合并,所以学习Pinia并不需要担心他是否适合Vue,他一定是稳定可用的。

阅读更多

Vue3+vite+ts搭建项目

新公司待了差不多三个月了,公司前端一直使用基于Vue2封装的一个基础前端框架进行开发,主要是框架集成了一些公司封装的后台管理功能,年后尤大宣布将Vue3作为默认版本,恰好年后一直没什么项目做,就学习一下Vue3顺便把公司的框架拿Vue3重写一下吧。

因为选择了Vue3+Ts+Vite,所以基础配置的搭建跟之前的Vue-cli是有些不同的,所以还是记录一下搭建整个项目基础的过程。

阅读更多

前端根据url实现文件下载

往常开发过程中,文件下载的实现都是后端提供一个接口,大多是返回一个Blob对象,然后前端编码实现下载,在这次项目中后端只返回文件的url,需要自己实现下载,突然发现自己连这么基础的问题都解决不了,确实挺离谱的。

阅读更多

CSS3实现元素缺角及缺角的边框

在项目中碰到一个数据可视化的业务,ui画了一些不规则的缺角矩形作为背景,但是又没有提供切图,本着求人不如求己的原则,就尝试拿CSS来画这种缺角的矩形及边框吧。

阅读更多

展开运算符与可迭代对象

在ES6中引入了很多新的语法,三个点...的语法就是其中之一。该语法有两个用处,一个是作为展开运算符,还可以作为rest参数。其作为剩余参数的方法用法比较简单,也不是本文的关注内容,所以下边说一下关于展开运算符的一些操作以及引出迭代器与生成器。

阅读更多

实现图片的卷帘对比效果

项目中遇到了一个需求是前台上传原图与对比图,后台进行对比分析,返回一个带有标注的识别结果,然后前台要实现原图与识别结果的卷帘对比效果。

我也不知道这个应该叫什么,感觉像个卷帘门一样,就姑且叫它卷帘效果了。

在学习arcgis的js api时,发现arcgis是有提供这种效果的小部件的,当然这次项目并没有使用arcgis,所以没法使用这个效果。后台问我这种效果好实现不,去找找插件试一下。回想到之前做过图片的截取效果,想着这个也可以用类似的方法实现的吧,所以就用同样的思想实现了这个效果,可能走了弯路,见谅哦。

阅读更多

记录vue3学习使用中遇到的小问题

vue3稳定版发布了很久了,很多人也已经开始将vue3应用于生产环境,后续准备开几篇博客写一下自己学习vue3的一些记录,内容比较多比较杂就不好说什么时候开始写了,这篇就简单记录一些vue3使用中发现的一些与vue2的不同吧。

阅读更多

在vue2中引入外部的字体文件

作为一个卑微的切图仔,肯定要100%还原UI老师给的设计图纸,然而UI老师为了优美的界面,在各个位置恰到好处的使用的不同的字体。

这种情况在实际的开发中应该是很长见的。但是我们本地没有这个字体怎么办呢?用户本地也没有这个字体怎么办呢?

出现这个问题肯定不是用户的问题,那只能是我们解决这个问题。

阅读更多

js实现随页面滚动切换的tab栏

最近项目有个需求,比较简单,就是顶部有tab栏,点击tab栏页面滚动到对应位置,手动的滚动页面tab栏也要随之切换。项目是基于vue2+ant design vue开发的,本来是想借用组件库来方便实现的,但是ui确实相差甚远,而且想着也是个简单功能,就放弃了使用组件库,转而用js来实现这个逻辑。

实现过程中,发现这虽然只是个简单的知识点,但确实也有一些要注意的地方。

阅读更多