![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 53
努力做大神
这个作者很懒,什么都没留下…
展开
-
vue addRoute 实现子账号权限管理
前言系统在用了一段时间后,产品经理提出了新建子账号并可配置菜单权限的需求。配置子账号拥有部分菜单权限,并在子账号登录后,在地址栏直接输入本不属于该子账号的页面路由,要求重定向到404页面,即实现拦截。开始经过各种查阅资料,决定使用addRoute 动态添加路由。后台在登录后会返回账户菜单,是一个code的str合集,这个code对应每个菜单的code,是前后台约定好的。步骤如下:1、router/index.js:定义初始路由constantRoutes 和动态变化的路由DynamicRoutes原创 2022-02-07 16:23:54 · 488 阅读 · 0 评论 -
前端div块的瀑布流布局
前言如图,每个新闻类别是一个块。新闻类别个数是动态的,每个类别的新闻条数是动态的,产品经理要求做成图中这样的瀑布流布局。借鉴别人图片的瀑布流布局,来实现这个新闻块的瀑布流布局。开始对于图片的瀑布流布局来说,有定宽或者定高。我选择定宽的方法。但是在实际情况中,浏览器有多种屏幕宽度,既要给每个div块定宽,又要做到自适应。所以在这里,1、我用css计算并设置不同屏幕下div块的宽度:如在>1500宽度下,可以放置5列,除去中间的间距,每列宽度为width:calc(100% - 30px*4)原创 2021-06-23 16:53:33 · 1428 阅读 · 0 评论 -
vue项目更新后文件存在缓存,需要强制刷新才能呈现更新
前言vue项目每次发布新版本后,测试人员都要强制刷新才能更新浏览器代码来验证bug。对于用户来说,这更不合理。于是,想办法让浏览器自动更新文件。开始1.在static静态目录下新建version.json每次发版更改里面的版本号{ "version": "1.0.1"}2.在src中新建 libs/versionUpdate.js文件import axios from 'axios' const isNewVersion = () => { let url = `//$转载 2021-06-23 15:43:23 · 11085 阅读 · 11 评论 -
vue element-ui左侧菜单移入移出折叠效果
前言由于项目主页面数据较多,需要通屏展示,所以要将左侧导航做成可以折叠的效果。效果如下(请忽略一下gif图的水印吧 T^T):鼠标移入左侧蓝色按钮,导航从左侧缓慢滑出,右面内容加遮罩层;点击右面遮罩层部分,遮罩层消失,导航向左缓慢滑出。开始上代码:app.vue<template> <div> <el-container> <span class="slideIcon" @mouseover="open">原创 2020-11-26 16:47:04 · 4585 阅读 · 1 评论 -
vue自定义插件--右上角通知框,随任务的轮询结束可自动关闭
前言最近在做一个基于vue的云控制台的项目,其中包括很多创建主机、创建云盘等功能,但是创建需要一个时间,得做一个正在创建中的消息通知窗进行展示来告知客户,同时随任务的结束,通知窗显示成功失败,并可以自动隐藏或者手动关闭。elementui里有一个Notification通知插件,但是有好多地方不符合我的需求,于是查阅资料自己封装一个。业务逻辑总结一下业务逻辑:当点击触发某任务时,首先后台接口返回操作成功,并有任务taskid列表,效果如下:任务正在进行:任务成功:实现文件目录代码原创 2020-07-23 10:59:28 · 2045 阅读 · 0 评论 -
循环中调用异步接口获取数据
前言遇到这样一个需求:调用接口,返回一个新闻列表,再循环这个新闻列表,用每个新闻的id异步请求这个新闻的视频地址,这就需要在循环里调用接口。如果用for循环,接口还没请求完成,for循环就已经执行完了。所以改成promise去处理。开始整体思路就是:先存数组,然后循环生成每一个promise,然后用promise.all来调用,then的时候返回的是一个结果数组。1、首先定义循环里的异步请求getInfo(item ,index){ return new Promise((resolve,原创 2020-07-17 10:07:33 · 4822 阅读 · 0 评论 -
elementui form表单自定义验证两个输入框大小的规则
前言有这样一个表单,需要判断结束端口大于起始端口。起始端口的prop:pubPortStart,结束端口的prop:pubPortEnd。开始开始我是这样定义的,分别去定义两个接口的验证规则,然后再验证规则里再去验证另一个输入框,这样就回造成重复调用,浏览器报错。<script> export default{ data(){ var validateStart = (rule, value, callback) => { if(this.portTy原创 2020-06-08 10:44:16 · 4777 阅读 · 2 评论 -
Maximum call stack size exceeded
vue项目配置好路由后报错:Maximum call stack size exceeded;Cannot read property ‘matched’ of undefined;通过查阅各种资料,发现了解决办法,配置路由时候,redirect用错,去掉后就可以了。...原创 2020-04-23 15:50:54 · 383 阅读 · 0 评论 -
vue动态生成表单并加验证规则,input输入框无法输入
vue动态生成表单,input输入框无法输入前言开始需要注意的地方前言开发过程中,遇到一个页面是纯表单配置页面,表单项有四五十个,于是只能想办法动态生成。开始1、后台返回数据格式为: ``` formData: [{ surplusValue: 100, usedValue: 0, quotasValue: 100...原创 2019-08-06 14:47:32 · 7415 阅读 · 0 评论