注册vue命令如何支持类型提示？文档上说vue插件的使用方法支持第二个参数，最初打算用第二个参数做基础配置。可以正确读取参数，但是我不知道如何做类型提示，因为官方定义的是any[]，那我不能让用户从我的插件中导出类型，然后作为？我用谷歌搜索了这个问题，浏览了这个问题，并寻找了一些开源插件。似乎每个人都没有这个需求。刚开始遇到问题，导致我写下去的动力不是很大。后来下班坐地铁的时候突然想起来第一个参数可以是object和function。函数不支持传参吗？这样第一个问题就解决了。importFitfrom'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，就是刚刚采用的网页的整体缩放。基本思路是用innerWidth和设计稿的width计算出比例，然后用高宽比例最小的那个。constw=window.innerWidth/defaultFitOptions.widthconsth=window.innerHeight/defaultFitOptions.heightconstscale=Math.min(w,h)//取最小的宽高比??，保证屏幕能完全显示这样可以达到基本的效果，但是会带来新的问题：如果不使用F11（全屏模式），右边和底部会出现“空白”。不能适配设计稿以外的分辨率。块缩放将网页分成许多小块，将这些小块分别缩放可以解决“空白”问题。比如把一个网页分成九块，然后相应地调整位置。然后在小块的“边界”处留下“空白”，目测看不到“空白”。------------------------------------------|||||左|中心|对|||||------------------------------------------|||||左中|中心中心|右中心|||||-----------------------------------------|||||左下|中心底部|右下|||||--------------------------------复制代码transformThetransformationcenterproblemAs如上所示，每个div需要分开，这会涉及到缩放后的对齐问题，即transform-origin的值。默认是从元素中心开始缩放，我们可以设置。但是无论我们如何设置transform-origin的值，屏幕上不同位置的元素都可能有不正确的位置。比如设置transform-origin:lefttop后，左上角元素的位置就正确了。但是右上角写错了，右边和下面会有“空格”。因此需要为不同位置的元素设置不同的transform-origin值加上简单的offset计算。这就是为什么用户在编写命令时需要定义一个“区域”。如何计算偏移量也许你用过offsetTop或offsetLeft，但你应该没用过offsetRight和offsetBottom吧？是的，当我需要他们两个时，我发现没有这两个属性。比如当元素靠近右侧时，我需要计算对象的offsetRight，因为用户很可能通过CSS设置了right、margin-right等position属性，而这些属性是手动设置的用户不参与称重，会导致定位不准确。然后我需要通过代码“纠正”。使用getComputedStyle方法获取元素的css属性值，然后获取右偏移和下偏移值，再通过translate的方式偏移这个值。/**获取css属性值*/exportfunctiongetComputedStyleNumber(el:HTMLElement,attr:string){returnparseFloat(getComputedStyle(el,null).getPropertyValue(attr)||'0')}constoffsetRight=(getComputedStyleNumber(el,'right')+getComputedStyleNumber(el,'margin-right'))constoffsetBottom=(getComputedStyleNumber(el,'bottom')+getComputedStyleNumber(el,'margin-bottom'))重复代码动画导致动画抢占问题transform插件本身也有进入和退出动画的功能。一开始打算直接使用animation.css库。该插件保证有很多可选的动画效果。使用简单，用户只需添加相应的类属性即可，无额外学习成本。但是在合并的过程中有个问题，animation.css也使用了transform，会导致css冲突覆盖。animate的动画结束后，插件的scale值被覆盖为默认值，就变得麻烦了。也想过走一些弯路：比如加一层dom做动画。但是这种方式不是我想要的，会破坏用户原有的dom结构，所以最好不要有动画功能。那干脆放弃animate.css，自己用js做动画，边改变位置边设置比例，就解决了这个问题。transformorder问题在动画制作的过程中遇到了另外一个问题，关于writingorder。好几次让我怀疑人生，以为我的translate值计算错了.../*error*/transform:scale(${scale},${scale})translate3d(-100%,${y}px,0);/*正确*/transform:translate3d(-100%,${y}px,0)scale(${scale},${scale});copycode虽然我还是无法理解writingscalefirst和firsttranslate的区别，但是他达到了预期。如何动态更新动画关键帧的代码可以在一开始计算scale值后生成，但是如果用户缩放浏览器，那么我也应该更新关键帧的代码。使用CSSStyleSheet。它提供了insertRule和deleteRule两个方法来帮助我们插入和删除样式。styleSheet?.insertRule(`@keyframesslideInLeft_${nanoId}{from{transform:translate3d(-100%,${y}px,0)scale(${scale},${scale});visibility:visible;}to{transform:translate3d(${x}px,${y}px,0)scale(${scale},${scale});}}`)复制代码将styleSheet?.deleteRule(index)传进去样式规则的下标删除样式。construles=styleSheet?.cssRulesif(rules){while(rules.length)styleSheet?.deleteRule(0)}复制代码，必须使用Transition组件添加入口动画。没想到，退出动画出事了。不知道什么时候vue会删除元素。当用户通过v-if或:is管理组件时，该元素将立即被销毁，并且没有机会进行外观动画。那我总不能要求用户把控件元素状态的变量传给我吧？是不是太神经质了，你的组件跟我没关系？好在vue的transition组件提供了相应的hook，只能让用户用组件包裹Transition组件，leavehook传给我的插件。说实话，这个要求应该不会太大~不会对用户的代码有什么破坏性的影响~这里的事件几乎没什么大问题，给window添加对应的事件即可，事件依赖rxjs帮我。拖动的核心是整体拖动。触发相应事件后，更新整个body元素的位置：/***按住空格键的同时在界面上点击鼠标拖动*/spaceDown$.pipe(mergeMap(()=>mousedown$.pipe(map((event)=>{const{x,y}=getTranslateValue(body)return{x:event.clientX-x,y:event.clientY-y,}}),mergeMap(({x,y})=>mousemove$.pipe(map(ev=>({x:ev.clientX-x,y:ev.clientY-y,})),takeUntil(mouseup$),)),throttleTime(20),takeUntil(spaceUp$.pipe(tap(()=>body.style.cursor=cursor),)),)),.subscribe((value)=>{bodyTransform$.next(setBodyTransform(value))})copycodezoom/***按住ctrl键同时滚动鼠标实现整体缩放和位置偏移*/constctrlMousewheel$=(seed:Required
