vue 可视化大屏适配插件之过程篇

一直以来都想自己写一款插件去解决大屏的适配问题，最近终于有时间去完成这件事，特此记录下过程中碰到的问题。

注册 vue 指令如何支持类型提示?

文档说 vue 插件的 use方法是支持第二个参数的，一开始打算通过第二个参数做基础配置。能正确读取到该参数，可是不知道怎么做类型提示，因为官方定义的是 any[]， 那我总不能让使用者去从我的插件里导出类型再去 as 吧？

谷歌了问题，翻了 issue , 也找了一些开源的插件去看，好像大家都没这个需求。

开端就遇到问题，搞得我都不是很有动力写下去了。

后来下班路上在地铁里猛然想起来第一个参数可以是 object 和 function, 那 function 不是支持传参吗？就这样第一个问题解决掉了。

import Fit from 'vue-fit-next'
app.use(Fit({// 这里就有了类型提示了width: 3840,height: 2160,})).mount('#app') 

插件叫什么名字？

如果不能为你的插件提供一个意义明确且好记的名字，那么这个插件很可能不会让人有特别想使用的欲望。

类似 adapter-screen 这种估计已经有人使用了，而且名字太长也不好拼。

后来想到了一个单词fit， 因为这个在写 css的时候会用到，比如object-fit:cover， 查了下翻译软件确实有适配、合身的意思。

叫 vue-fit 吧， 但是到 npm一搜，发现几年前就被人占用了。

那不如就叫vue-fit-next 吧。

如何适配？

整体缩放

核心可能还是 scale， 刚开始采用的网页整体 scale。

基本思路就是用innerWidth和设计稿宽度计算比值，然后高度和宽度中采用比值最小的一个。

 const w = window.innerWidth / defaultFitOptions.widthconst h = window.innerHeight / defaultFitOptions.heightconst scale = Math.min(w, h) // 宽度与高度的比例取最小的，以确保屏幕可以完全显示 

这样能达到基本效果，但是会带来新的问题：

• 如果不使用F11(全屏模式)，右边和下边会出现”留白“。
• 不能适配非设计稿之外的分辨率