分类：Vue

2021
04-27

vue 实现无规则截图

大家所见到的大多数都是有规则截图,可以应付大部分的应用场景,但是对于图片处理,想要将规则交给用户,普通的截图已经满足不了用户了,那我们能不能前端实现图片的任意规则截取,接下来让我一起探讨一下吧!通过svg实现图片截取使用svg中clipPathimage标签通过id映射,动态位置polygon的坐标,实现图片的截取<div><divclass="content"@mousemove="mousemove"@mouseup="(e)=>{mouseup(e);}"><!--画布展... 继续阅读 >
2021
04-27

详解vue3的沙箱机制

前言vue3沙箱主要分两种浏览器编译版本，浏览器版本是使用with语法加上proxy代理拦截本地预编译版本，通过在模版预编译阶段转换阶段，使用转换插件transformExpression将非白名单标识符挂在在组件代理对象下浏览器编译版本render函数编译结果<div>{{test}}</div><div>{{Math.floor(1)}}</div>toconst_Vue=Vue;returnfunctionrender(_ctx,_cache,$props,$setup,$data,$options){with(_ctx){const... 继续阅读 >
2021
04-27

VUE实现一个Flappy Bird游戏的示例代码

VUE实现一个Flappy Bird游戏的示例代码 FlappyBird是一个非常简单的小游戏，在app上大家都玩过。这里就用VUE来实现一个简单的PC版FlappyBird，娱乐一下~~~~~要实现这个游戏，首先来分析一下游戏界面里哪几块东西需要动起来：1、第一当然就是上下移动的小鸟；2、横向移动的背景图，让小鸟看起来在横向飞行；3、从画面右端进入的一排排管道。这样很明确了，我们让上面3块内容按照规律运动起来，然后再加上规则边界判断和计分，就可以得到一个完整的游戏。所以就一块块来... 继续阅读 >
2021
04-27

vue + element ui实现播放器功能的实例代码

vue + element ui实现播放器功能的实例代码 没有效果图的展示都是空口无凭1.基于audio并结合elementUI的进度条实现2.实现了播放器基本的功能，播放/暂停、快进、静音、调节声音大小、下载等功能html代码，关键部分已加注释<divclass="rightdimain-wrap"v-loading="audio.waiting"><!--此处的ref属性，可以很方便的在vue组件中通过this.$refs.audio获取该dom元素--><audioref="audio"class="dn":src="url":preload="audio.preload"@play="onPlay"@e... 继续阅读 >
2021
04-27

如何用VUE和Canvas实现雷霆战机打字类小游戏

今天就来实现一个雷霆战机打字游戏，玩法很简单，每一个“敌人”都是一些英文单词，键盘正确打出单词的字母，飞机就会发射一个个子弹消灭“敌人”，每次需要击毙当前“敌人”后才能击毙下一个，一个比手速和单词熟练度的游戏。首先来看看最终效果图：emmmmmmmmmmmmm，界面UI做的很简单，先实现基本功能，再考虑高大上的UI吧。首先依旧是来分析界面组成：（1）固定在画面底部中间的飞机；（2）从画面上方随机产生的敌人（单词）；（... 继续阅读 >
2021
04-27

VUE+Canvas 实现桌面弹球消砖块小游戏的示例代码

VUE+Canvas 实现桌面弹球消砖块小游戏的示例代码 大家都玩过弹球消砖块游戏，左右键控制最底端的一个小木板平移，接住掉落的小球，将球弹起后消除画面上方的一堆砖块。那么用VUE+Canvas如何来实现呢？实现思路很简单，首先来拆分一下要画在画布上的内容：（1）用键盘左右按键控制平移的木板；（2）在画布内四处弹跳的小球；（3）固定在画面上方，并且被球碰撞后就消失的一堆砖块。将上述三种对象，用requestAnimationFrame()函数平移运动起来，再结合各种碰撞检查，就可以得到最终... 继续阅读 >
2021
04-27

vue 实现可拖曳的树状结构图

最近用vue做了一个小项目--可拖曳的树状结构图。Vue递归组件结构通过Vue的递归组件实现布局使用flex，结构线由CSS伪类实现需要注意的是居中布局，当X轴元素过多导致子元素宽度超出视图，元素居中后虽然有滚动条，但只能到达右边的内容，左边的内容会无法访问，可以把父元素设置为inline-flex，宽度设置为auto。当然，如果是上述的结构则不会有这个问题，但遇到大数据渲染，还是困扰我了一下午。drag事件首先在需要在拖动的元素上绑... 继续阅读 >
2021
04-27

vue diff算法全解析

前言我们知道Vue使用的是虚拟DOM去减少对真实DOM的操作次数，来提升页面运行的效率。今天我们来看看当页面的数据改变的时候，Vue是如何来更新DOM的。Vue和React在更新dom时，使用的算法基本相同，都是基于snabbdom。当页面上的数据发生变化时，Vue不会立即渲染。而是经过diff算法，判断出哪些是不需要变化的，哪些是需要变化更新的，只需要更新那些需要更新的DOM就可以了，这样就减少了很多不必要的DOM操作，大... 继续阅读 >
2021
04-27

Vue 内置组件keep-alive的使用示例

keep-alive是Vue内置的组件之一，主要用于保留组件状态或避免重新渲染。作用   在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验。一、keep-alive用法<keep-alive>包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和<transition>相似，<keep-alive>是一个抽象组件：它自身不会渲染一个DOM元素，也不会出现在组件的父组件链中。当组件在<kee... 继续阅读 >
2021
04-27

如何在Vue中实现Svelte的Defer Transition

最近观看了RichHarris的<RethinkingReactivity>视频，惊叹于Svelte框架的高效同时，还发现了Vue所不具备的一些关于动画的原生支持—defertransitions.先看看Svelte所谓的defertransition的效果吧。这是使用Svelte做的TodoDemo应用。整个todo分成3个部分。输入部分，todo列表和done列表。当点击todo列表中的条目时，相应条目会被“移动”到done列表，反之亦然。在这里，条目从一个列表转移到另一个列表，不是很突兀的闪现，而... 继续阅读 >
2021
04-27

vue element后台鉴权流程分析

前言：最近项目遇到一个管理系统，感觉权限配置挺有意思，记录一下流程实现的过程，便于自己学习以及整理思路，部分思路整合在代码的注释中：路由拦截鉴权常用的两种方法1：路由拦截：单纯给路由加字段标识符，通过路由拦截实现2：动态路由：第二种是通过路由的拆分另外需要后端的配合去实现的动态路由配置比较：路由拦截实现方式比较简单，只需要简单的在router.beforeEach中根据路由配置信息过滤页面是否有权限前往改组件，若相... 继续阅读 >
2021
04-27

vue3利用store实现记录滚动位置的示例

整体效果在首页列表进行滚动浏览时进入详情页后，切换回首页时可以定位到之前浏览的位置。监听容器滚动事件定义一个滚动事件，绑定到容器的滚动事件上,我这里做了一下节流constsavePosY=()=>{if(state.timer)return;state.timer=setTimeout(()=>{letnode=document.querySelector(".contentWrapper")；//记录滚动位置store.commit("setY",node.scrollTop)state.timer=n... 继续阅读 >
2021
04-27

vue项目watch内的函数重复触发问题的解决

问题描述：有两个页面A和B，每个页面里都有一个getList()方法。这个两个方法都需要传一个相同的参数C，参数C的选择过程又比较麻烦。为了避免在切换A、B两个界面重复选择参数C的问题，我将参数C存入vuex中，然后在两个页面里都使用watch监听参数C来执行getList()方法。然后发现一个问题，从A页面进入B页面后，在B页面重新选择参数C，A页面的getList()方法竟然也会被执行，反之亦然，从B页面到A页面后，在A页面改变参数C也会执行B页... 继续阅读 >
2021
04-27

vue监听路由变化时watch方法会执行多次的原因及解决

本人前端菜鸟一名，一直致力于不间断的生产管理后台的bug，并以此自勉自励。近几天接到一个需求，网上也搜了很多例子，但是没有从根本上解决。在这里记录一下我自己的解决的过程，这也是第一次在掘金发言，求轻虐。需求描述：有A、B两个页面，需要将A页面的orderId用路由传参的方式传入到B页面执行数据关联查询，然后显示在B页面需求解析：如果是你，你拿到这个需求，应该很容易想到在B页面对路由变化做watch，然后获取参数执行查... 继续阅读 >
2021
04-27

Vue 如何追踪数据变化

背景工作中时不时就会遇到这种情况：页面上显示的数据不对，需要前端同事进行定位。在一个使用Vue搭建的SPA应用上，页面最终展示的数据，从初始化，到最后的展示，过程可能很简单，也可能很复杂。遇到复杂的数据流，没有合适的方法，排查起来会很头疼。如果能够看到数据发生变化时的调用栈，就可以知道在错误的数据生成前，发生了什么，是哪一步的错误，导致了最终的错误。顺着调用栈给出的线索找下去，就能够快速定位到问题。... 继续阅读 >