JS学习
关注
分享
扫一扫
Deku_Ln
大前端路上的萌新小白
展开
-
Vue实现动态路由菜单配置
这里感谢router新加的addRoute(route:Array)方法，让我们可以进行相关的路由权限的配置。 路由的权限配置这里我介绍一下结合后端的方法。 首先我们需要对于路由信息进行数据库的存储，通过后端进行路由的权限控制 在前端添加一个菜单管理的界面来让我们可以在前端进行路由的相关配置信息 const router = new Router({ mode: 'hash', scrollBehavior: () => ({ y: 0 }), isAddDynamicMenuRou原创 2021-01-05 16:50:52 · 2453 阅读 · 2 评论 -
记录一下实现界面水印的方法
<script> // 这里定义一个不会定义的唯一id名 let id = '123456789qwe' // str 是我们需要定义水印内容 // ctxWidth 是我们单个水印内容的宽度，ctxHeight 是我们单个水印内容的高度 // fontSize是水印内容字体 大小 // color是我们水印内容颜色 let setCanvas = (str, ctxWidth = 150, ctxHeight = 120, fontSize=14, color="#eee.原创 2021-01-02 10:19:19 · 382 阅读 · 0 评论 -
记录一下echarts实现Tooltip自动显示
话不多说直接上代码. // tooltip跳转 // this.axisIndex指当前tootip所在索引 // barChart 是Echarts初始化后的DOM节点 // this.xAxis为横坐标长度 setAnimation() { this.clearTooltip(); // timeAnimation为我们设置的进行动态执行tooltip的方法 this.timeAnimation = setInterval((原创 2020-12-31 16:41:41 · 1900 阅读 · 0 评论 -
Vue实现前端简单的验证码校验功能
关于验证码校验，可以通过后端返回校验图片，也可以前端进行校验。 这里通过Canvas来简单的实现验证码的校验。 首先先看效果吧~~~ 这里就只是实现一个简单的验证码校验的效果，话不多说直接看代码吧 关于这个验证码效果我把他封装成一个组件。 <template> <div class="confirm_code"> <canvas id="confirm_id" :width="contentWidth" :height="contentHeight">&l原创 2020-12-29 14:16:49 · 3193 阅读 · 1 评论 -
reduce()实现数组去重
关于reduce()我们这里不做太多说明，主要明白这是一个类递归的方法。其中接受两个参数，一个是回调函数，一个是可选的默认值。 arr.reduce((pre, cur, index, arr) => {}, 0) // 这里的pre是上一个递归后的返回值，而cur是当前值，这两个参数是必传的，index是当前索引，arr是原始 //数组，是可选的；0是pre的默认值，是一个可选参数，我们在进行一些数学运算可以给他赋一个初始值 这里我们主要运用reduce()的递归特性来完成数组的去重 le原创 2020-12-18 23:24:12 · 2283 阅读 · 1 评论 -
IntersectionObserver实现图片懒加载（超详细！）
关于IntersectionObserver 官方上说明是提供了一种异步观察目标元素与其祖先元素或顶级文档视窗(viewport)交叉状态的方法。祖先元素与视窗(viewport)被称为根（root）。 具体的内容可以参考官网解释：https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserver 这里我们主要来用IntersectionObserve来实现图片的懒加载。 <!DOCTYPE html> <.原创 2020-12-07 09:41:45 · 3596 阅读 · 3 评论