- 博客(44)
- 收藏
- 关注
RSS订阅原创 vue3 + vite 实现一个动态路由加载功能
它能通过我们提供的路径动态引入相关的组件，如果我们传入了../views/**/**.vue，它返回的相关格式是这样子，这样的话就可以用过路径获取相关异步导入组件的函数了。PS: 如果退出登录需要清除动态路由的话，因为现在vue-router没有提供可以直接清空的方法，所以可以考虑返回登录页后刷新一下界面来解决~最后在main.js里调用一下setupPermission方法就行~在vite里主要使用到的方法是。假设后端返回的格式是这样子。
2024-03-20 01:51:01
268
原创 el-table出现cannot read property ‘key‘ of undefined
起因：线上项目突然反馈说有列表卡死的情况，紧急排查了一下，发现是返回了重复的列表id了，而且我们使用了rowKey属性，所以卡死了。这是后端迁移的数据，是正常的，所以得我们解决…解决方案：获取数据时我们手动给列表设置一个不重复的id// 假如table数据是data，页数是page，数量是limitdata.forEach(item => { item._id = `${item.id + (page * limit)}`})这样子就能保证每个id不重复并且翻页时id都能对得上了~
2022-01-23 22:00:55
1614
原创 2021-10-07 算法题学习01
1.给定一个整数数组，判断是否存在重复元素。如果存在一值在数组中出现至少两次，函数返回 true 。如果数组中每个元素都不相同，则返回 false 。解法1.ES6var containsDuplicate = function(nums) { return new Set(nums).size !== nums.length};2.哈希表（空间换时间）var containsDuplicate = function(nums) { const set = new Set()
2021-10-08 00:43:32
44
原创 2021-10-04 前端性能优化方法
文章目录前言1、GZIP1.1、使用步骤2、CDN2.1、使用步骤2.读入数据总结前言随着代码数量越来越多，如何加快项目浏览器中的运行速度，减少用户的等待时间便成为了很重要的一个方面，以下是我经过实践后的几个方法1、GZIPGZIP可以对文件进行压缩，压缩比例到3到10左右，是很实用的压缩方法1.1、使用步骤因为我们目前的项目比较老，使用的是vue-cli2.x的版本，所以只需要在vue-cli2的config.js文件中进行如下配置并安装compression-webpack-plugi.
2021-10-04 03:24:55
69
原创 vue+element+vue-cropper实现上传裁剪功能
在用户上传前在before-upload钩子获取files文件，然后中断上传操作beforeAvatarUpload (files) { this.filename = files.name this.openCropper(files) return false}然后在openCropper方法中用FileReader对读取文件并打开自己的cropper组件openCropper (file) { var _this = this var reader = new FileR
2021-03-10 10:11:54
582
2
原创 文本节点超过父元素 解决办法
当我们的文本节点内容是英文或者数字时，它默认是不会换行的，如下图有两种解决办法1.省略号三件套text-overflow: ellipsis;overflow: hidden;white-space: nowrap；2.css设置word-wrap： break-word这样就会在达到父元素的宽度后进行换行了！注:在网上看到有个break-all属性，但是chrome浏览器试过后并没有...
2020-09-24 14:57:58
463
原创 VSCode：设置格式化不加分号，使用单引号以及函数和括号之间有一个空格
首先安装Prettier插件，不过格式化文档还是要选择Vetur在VSCode的settings.json添加如下配置“vetur.format.defaultFormatterOptions”: {“prettier”: {“semi”: false,“singleQuote”: true}},“vetur.format.defaultFormatter.js”: “vscode-typescript”,“javascript.format.insertSpaceBeforeFuncti
2020-06-26 17:18:24
5193
转载 element-ui el-table翻页不丢失选中状态
https://blog.csdn.net/Ms_alinda/article/details/102861781?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.none.
2020-06-17 15:15:14
1566
原创 Blog: 用element-ui表格实现可在表格内编辑，修改数据
实现效果如下：更改完数据也改变了<template> <el-table :data="tableData" @cell-dblclick="handle" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> <template slot-scope="scope"> <div v-if="!scope.row
2020-06-16 23:10:01
7086
12
原创 Blog： 做了个简单的h5列表拖动demo(2)
<template> <div class="wrap"> <div class="list-wrap"> <div id="list" class="list"> <div :id="item" class="list-item" draggable="true" v-for="item of list" :key="item"> {{ item }} </div&
2020-06-14 18:30:37
231
原创 Blog： 做了个简单的h5拖动demo
<template> <div class="wrap"> <div class="list-wrap"> <div class="list"> <div class="list-item" draggable="true" v-for="item of list" :key="item"> {{ item }} </div> </div>
2020-06-14 12:39:28
144
原创 学习blog：Vue实现路由懒加载以及将组件打包到一个模块中
目前Vue Router官方推荐的懒加载形式是这样const Foo = () => import('./Foo.vue')const router = new VueRouter({ routes: [ { path: '/foo', component: Foo } ]})当然你也可以直接这么写const router = new VueRouter({ routes: [ { path: '/foo', component: () => impor
2020-06-05 18:38:12
323
原创 学习ts blog：对ts学习过程中的一些记录
1.函数的重载function getInfo(name: string):string;function getInfo(name: string, age: number):string;// 不符合上面两种格式会报错function getInfo(name: any, age?: any):any { /* code... */}2.抽象类// 抽象类不允许实例化，只能extends继承abstract class Animal { public name: string
2020-05-28 00:35:00
105
原创 对原型链、prototype和__proto__的一些理解
之前看到原型链虽然大致上会有些理解，但是还是会有些凌乱，不能很好的总结，今天深入地去做了一下了解，并做一个小总结。1.原型链和__proto__原型链实际上是通过__proto__这个属性去实现的，当我们调用一个方法时，如果没有，它就会向__proto__指向的位置去找，直到__proto__指向的值为null的时候还没有找到，就会返回错误，这也就是我们所说的原型链。比如我们定义一个对象A：let A = {}当我们调用A.valueOf()时，在A对象里并没有这个方法，它就会去A.__prot
2020-05-25 20:32:28
138
原创 前端开发--SEO优化
SEO优化是我们前端开发中非常需要着重了解的一个方面，因为很多公司都会有这个需求就是提升网站在搜索引擎中的排行，所以一定要在开发前先询问一下是否需要这点，这对我们后面框架的选择很重要！SEO优化的方法如下：1.也是非常重要的一点，一定不要使用单页面应用，如Vue，React，它们在SEO方面是非常非常差的，这也是单页面应用最大的缺点，不过有基于它们的两个框架可以解决这样的问题，如Vue的Nuxt.js，React的Next.js2.在每个页面的Head标签下的Meta标签进行设置合理的title、de
2020-05-13 13:28:14
326
原创 网站不允许复制怎么办
有些时候我们点进一些网站想复制他们的文章，但是发现按下ctrl + c后并没有复制成功，那是因为我们的请求被网站拦截了，那应该怎么办呢？很简单，按下F12，在控制台放进一串代码(function() { document.addEventListener('copy',(e)=>{ console.info(e.target); })}());这时我们再选一遍我们想...
2019-10-13 19:15:49
235
原创 实现鼠标悬停在上面会有一个遮罩效果
我的需求是这样的，鼠标悬停在logo上会有一个很浅的变白效果以便和其它地方区分开，或许你会说直接css上hover选择器里换个颜色不就好了，但是因为我这个是能挑选颜色的所以我就放弃了这种方法，所以这个时候我们就需要加上一个div <div v-if="isCollapse" class="logo-wrapper fl" style="width: 64px;"> <di...
2019-10-10 18:26:11
1995
原创 js 浅复制和深复制
// 浅复制 function clone(obj) { var buf; if (obj instanceof Array) { buf = [] let i = obj.length while (i--) { buf[i] = obj[i] ...
2019-09-27 15:09:55
85
原创 前端好还是后端好
其实这个问题没有一个特别好的答案，不过身边的人普遍都认为后端比前端好，就这么说吧，本人是做前端的，我同学说过一句话，那是我学了后端，要是我学了前端，那肯定比你强，所以吧，我觉得现在的人对前端的误解太大，的确，前端入门的确比后端简单，当初我就是因为这个原因做前端的，但是学到后面越学就发现要学的越多，因为近几年前端的更新迭代太快了，所以你需要不停地看这些新出的东西才能保证自己不会落后，后端的话虽然入门...
2019-08-28 13:51:00
4036
原创 angular router-outlet的一个好用的功能
今天做项目遇到了一个难题，就是在页面中有一个子路由通过router-outlet去展示，但是有一个需求，就是需要根据它的跳转来获取不同的数据，一开始想着使用Input，Output方法尝试一下(没错，vue里面就可以在路由里使用事件传递，不过也是因为它没有设置对应的周期函数)，但是很遗憾行不通，然后就又想了各种各样的方法，但要不就是没法实现，要不就是影响性能，直到我发现了router-outlet...
2019-08-22 10:19:38
2593
1
原创 Angular一些api的使用(不定期更新)
最近公司要求学习angular，其实框架不难，但是就是里面的一些api挺难记下来，所以想在这记录一下api的使用方法来方便自己的查询。1.forwardRef例子:import { Component,Inject,forwardRef } from 'angular2/core';@Component({ selector: 'app', template: ` ...
2019-07-31 14:20:56
494
原创 webpack：proxy中cookie无法保存的解决办法
这几天做个小项目遇到了跨域问题，于是就用了webpack的proxy解决，用的挺爽的，但是做到登录之后，因为服务端使用cookie和sessionid做登录状态保存的，结果就悲催了，我发现它没有将cookie保存起来，简单来说就是我们本地用的是localhost，与我们跨域所用的域名对不上，网上看了下几位大神的博客都对我的项目没有什么作用，于是我又看了下http-proxy-middleware的...
2019-07-06 21:43:58
3667
原创 TypeError: CleanWebpackPlugin is not a constructor
今天对照着中文文档使用clean-webpack-plugin发现报错TypeError: CleanWebpackPlugin is not a constructor点开它里面的链接之后才发现原来是用法改了，好坑…现在用法如下：const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const webpack...
2019-06-30 18:41:13
293
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人