- 博客(95)
- 收藏
- 关注
RSS订阅
原创 vue角色不同动态分配路由权限,实现权限的控制
首先说一下大概的思路router路由第一次只加载登录注册和404页面 当用户成功登录后,使用vuex设置用户的Token 如果Token存在,角色信息不存在,就去后台获取该用户的详细信息,包含但不限角色信息,将角色信息存在vuex中 如果Token存在,角色信息也存在,表明已经获取过了角色信息,直接进入系统 根据vuex中的角色信息去匹配router里面的符合要求路由,动态挂载.........
2018-11-23 15:22:35
25370
6
原创 electron tray icon mac 上跟随菜单背景色自动改变黑白图标
mac系统菜单颜色跟深色浅色主题无关，而是跟壁纸颜色有关，我们只需要把 tray icon 图标的文件名以 Template 结尾即可，系统自动识别并在需要切换颜色的时候切换，图标只需要准备白色 png，黑色系统会自己生成...
2021-12-17 17:32:15
1456
原创 electron 无法复制粘贴问题
electron 如果想要复制粘贴等快捷键，必须将快捷键和系统绑定const { Menu } = require('electron');const appMenu = [ { label: '编辑', submenu: [ { label: '剪切', accelerator: 'CmdOrCtrl+X', selector: 'cut:' }, { label: '复制', accelerator: 'CmdOrCtrl+C', selector: '
2021-12-17 17:30:12
1857
原创 electron mac tray 当没设置菜单点击不高亮
这个问题的原因主要是因为实则了空的 menu， const contextMenu = Menu.buildFromTemplate([]); tray.setContextMenu(contextMenu);如果想要点击效果，又不想要 menu菜单，不设置 menu，而不是设置为空数组，即去掉上面两行代码即可...
2021-12-17 17:28:19
439
原创 react useMemo 缓存导致缓存组件点击事件获取不到最新值
假如我们有一下两个文件AB, 代码如下A文件: 通过useMemo把span缓存下来了, 因为只需要menu, 第二个缓存参数只写了menu, 当我们点击span 打印出data数据, 假设初始化 data 为 1, 则打印1const { menu, data} = useContext(Global) const [memo]const test = useMemo(()=>{ return menu.map(item=>{ return ( <span oncli
2021-09-03 16:50:25
1538
原创 js replaceAll 的代替方法，一行代码实现！
es2021 新出了 string.replaceAll，但是如果在项目中使用可会会提示是否需要更改目标库? 请尝试将 lib 编译器选项更改为 es2021 或更高版本。ts(2550)原因主要是当前框架使用的 lib es 版本不是 2021 的，因此使用 replaceAll 可能会报错，如果盲目升级 es的版本可能会造成其它未知问题（主要还是防止变成背锅侠），因为我们可以使用别的方法代替 replaceAll 方法！const str = "123cbz456cbz789"]// co
2021-07-27 15:25:48
2846
原创 smart-power-plant文档
smart-power-plant文档文章目录smart-power-plant文档一、指标公式管理1.主公式2.子公式3.公式解析代码expression_parse.tsparseElement.tsexpression.ts4.公式渲染Node（节点）Edge（边 || 连接线）4.公式编辑 （ItemPanel）拖拽移动节点Node 上右键菜单增加Node5.公式保存保存二、化验分析资料1.列表2.详情3.注意三、请求接口1.自动重新请求接口2.请求取消四、FAQ1. 框架的一些坑一、指标公
2021-07-22 18:45:10
591
1
原创 Antd Table rowSelection切换导致选中的数据丢失
官网例子没有这个问题是因为它的 table 数据是一次通过接口拉下来的，后续分页不在请求接口， 而实际情况是需要点击一次分页拉一次数据就导致 table 重新渲染导致selectedRowKeys数据丢失。解决方案：preserveSelectedRowKeys 当数据被删除时仍然保留选项的 key boolean - 4.4.0当使用 rowSelection 时，请设置 rowSelection.preserveSelectedRowKeys 属性以保留 key。 const rowSelec
2021-07-22 10:01:17
2703
8
原创 echarts 5.x 版本词云无法正常显示问题
将echarts版本设置为5.01echarts-wordCloud 版本使用2.0设置颜色的时候去掉normal ps:"textStyle": { "color": "#5b9bd5" }
2021-03-26 16:45:49
2775
3
原创 Dva 组件使用useImperativeHandle父组件无法获取方法
exportdefaultconnect(({material}:ConnectState)=>({selectMaterial:material.selectMaterial,}),null,null,{forwardRef:true})(MaterialPropertyModal);需要在connect的是加上{forwardRef:true}
2021-03-04 16:00:55
1051
1
原创 完美解决截图时图片跨域导致截图不全的问题
截图工具使用dom-to-image因为dom-to-image不支持proxy代理, 因此修改dom-to-image.js如下图位置让dom-to-image支持代理使用方法: async screenShot(id, name) { // 截图 const data = await domtoimage.toPng(document.getElementById(id), { cacheBust: true, proxy: 'https
2020-12-14 17:59:03
3482
原创 Video.js 播放m3u8直播流
谷歌浏览器全面禁止flash导致直播流无法播放, 通过video.js结合videojs-contrib-hls实现播放m3u8直播流粘贴到html打开即可<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>前端播放m3u8格式视频</title> <link href="https://cdn.bootcdn.n
2020-11-30 16:44:17
4543
4
原创 React Hook中useState更新延迟问题
例如下面的代码const [currentIndex, setCurrentIndex] = useState(0) const handleLeft = () => { setCurrentIndex(currentIndex+ 1) console.log(currentIndex) }初始化currentIndex为0 每次执行handleLef...
2020-11-27 16:36:04
26270
5
原创 已经做好的HTML快速自适应各种分辨率不变形
假如现在有已经做好的10个1920*1080的HTML页面, 如何快速适配不同分辨率并保持页面不变形呢? 一点点改样式? no no no可以通过一个函数快速适配哦 autoAdjust (targetWidth = 1920) { const isFox = navigator.userAgent.indexOf('Firefox') > -1 ? true : false; let adjustWindow = () => {
2020-09-11 17:15:47
3124
5
原创 umi 引入高德地图
在config文件下新建mapPlugin.jsexport default (api) => { api.addHTMLHeadScript({ type: "text/javascript", src: 'https://webapi.amap.com/maps?v=1.4.9&key=b1876df77766a9ea12e4e047fc3588fc', });};在plugin.config.js下加上 ['./config/mapPlugin.
2020-07-02 18:59:43
1442
2
原创 高德地图接口AntV L7实现自定义坐标生成当前可视范围内道路动态轨迹图
先上效果图阿里AntV L7可以根据马路数据生成轨迹图, 但是例子上写的读取数据的JSON文件写死的, 若需要自定义经纬度则没有马路数据这里通过高德的api获取范围内马路数据https://restapi.amap.com/v3/traffic/status/circle?location=104.044606,30.601263&radius=5000&key=你的key&extensions=all接口上location为查询的经纬度 radius为查..
2020-06-30 13:47:33
3456
1
原创 js将接口返回的JSON格式数据转换成Antd的treeSelect需要的结构
const initResponseDatakey = (responseData, keys) => { // 获取response的所有key 并生成tree供treeSelect使用 if (responseData) { if (Object.prototype.toString.call(responseData) === '[object Array]') { // 是数组取第一项 responseData = respons..
2020-05-28 15:24:11
1023
原创 js在指定字符串后面添加指定字符串
addStr(oldStr, addItem, afterWhich) { // 在指定字符串后面添加指定字符串 var strArr = oldStr.split(''); strArr.splice(oldStr.indexOf(afterWhich) + afterWhich.length, 0, addItem); return strArr.join(''); },...
2020-05-28 15:23:09
11365
原创 vue 上拉加载页面不重新加载,强行刷新组件导致画面重绘的解决方案
将需要渲染的list改成数组对象,每次加载下一页时将所有数据push到list中,页面用for循环list<div v-for="(item,index) in list" :key="index"> <myList v-if="!loading" :listData="item" /></div>// 通过push的方法每次新增一列改变list的...
2020-04-15 21:37:10
874
原创 js深度合并两个数组对象
js合并两个数组对象, 如果a中含有b,则b的值覆盖a的值 如果a中不含有b 则b的值新增到aMergeRecursive(obj1, obj2) { // 合并两个数组 for (var p in obj2) { if (obj1[p] === undefined) { // 如果obj1没有p 直接把obj2的p加入 obj1[p] = obj...
2020-04-01 18:33:01
1663
原创 js 树状结构的数据搜索指定元素所在的节点
利用递归搜索指定元素所在的节点 searchTree(element, id) { // 根据id查找节点 if (element.id == id) { return element; } else if (element.child != null) { var i; var result = nul...
2020-04-01 18:29:46
2964
原创 Vue mixins的简单使用
首先新建一个文件 mixinsPopicker.jsexport const AllPopPicker = { data() { return { newPickerOne: '', }, mounted() { this.initPopPicker() }, beforeRouteLeave(to, from, next) { //...
2020-03-09 17:12:42
339
原创 axios封装异步接口 async await
新建一个api.jsimport axios from "axios"; import qs from 'Qs'let getStyleApi = {}getStyleApi = { async getCategory(baseUrl) { try{ let res = await axios.get(baseUrl+`/v1/cloud/category`...
2020-02-28 10:07:28
1152
原创 动态改变导航栏导致点击导航栏高亮和实际显示不一致
左侧的导航栏里面的条数可以根据中间的开关进行动态显示后来发现点击了开关之后导航栏高亮和实际页面显示的错位了, 推测是导航栏数据没有刷新解决方案routes() { const route = this.$store.state.permission.routes route.map(item => { item.id = getGuid(...
2020-01-10 12:08:23
463
原创 consle.log打印有值, 展开后无值
记录一次诡异的bug, consle.log印有值, 展开后无值代码也非常简单后来发现tempData必须手动初始化name, type, smooth,value,time 等属性不然就会出现上述情况这样就可以了...
2020-01-07 14:57:50
852
原创 vue 数据改变页面没有实时渲染(不是一般的情况, 如果一般情况无法解决可能是这个原因)
css3里面的渐变色属性 background-image: linear-gradient(121deg, rgba(36, 237, 255, 1) 0%, rgba(24, 102, 231, 1) 95.6298828125%); -webkit-background-clip: text; -webkit-text-fill-color: transparen...
2019-12-24 11:00:12
3895
1
原创 上中下(左中右)显示三个图片时无缝轮播
思路: 假如有三张图每次到第二张滚第三张的时候在结尾加上第一张, 第三张滚的下一个就是第一张了同时加上第二张,这样就实现了无缝轮播(别打我)咳咳, 上面的思路确实实现了,但是存在一个致命的问题就是一直轮播会一直在后面添加元素,如果次数较多的时候会导致页面卡顿, 那我们就不能一直加如果在再填加了第三张的时候是不是已经页面存在六张图了,我们完全可以利用这六张图让他们自己循环实现无缝轮播...
2019-10-31 16:41:16
1566
原创 css 实现点击被遮挡的内层元素
/*内层被遮挡的元素设置auto 实现点击被遮挡的内层元素*/pointer-events:auto/*外层被遮挡的svg设置none*/pointer-events: none;
2019-10-31 10:08:50
488
原创 css 超过指定行数显示省略号
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
2019-10-09 11:31:24
233
原创 JS将对象的路径当做参数传递 函数接受参数后获取相应路径的值
objectUrlEval (data, type, result = '') { // 此方法的用法: // 若存在 此数据结构的数据 ps: a: { b: c: { d: { name: 'xx'}} } // 调用此方法仅需 objectUrlEval(a, 'd.c.d.name') 即可返回 'xx' // 若 objectUrlEv...
2019-09-18 14:34:07
1023
3
原创 vue等待数据渲染完成后执行下一个方法
watch: { dataDetails: function() { this.$nextTick(() => { this.changeView() }); } },在watch里面写上要监控的数据,上面的例子是监控dataDetails,在this.$next...
2019-09-11 10:38:39
13146
1
原创 js获取前n天的日期
timestampToTime(type, hhmmss) { // type =0 为当天 type = 1 为前一天 // hhmmss 自己传需要的时分秒 let now = new Date(); let ...
2019-09-11 10:35:48
792
原创 JS获取指定范围内的随机数含小数
randomNum(maxNum, minNum, decimalNum) { // 获取指定范围内的随机数, decimalNum指小数保留多少位 var max = 0, min = 0; minNum <= maxNum ? (min = minNum, max = maxNum...
2019-09-11 10:31:40
3431
原创 google colab断线自动重连
打开浏览器F12，找到console将下面代码粘贴到控制台回车即可。若刷新了页面请重新执行上述步骤setInterval(()=>{ if(Array.from(document.getElementById("connect").children[0].children[2].innerHTML).splice(3,4).toString() === '重,新,连,接'){ doc...
2019-07-05 12:18:12
14189
7
原创 vue原生分页插件
How to usenpm i el-paginationImport on your pageimport Pagination from 'el-pagination/Pagination'Attributes Attributes Description Type Optional value Defaults u...
2019-06-15 14:02:48
642
原创 滴滴前端实习二面
关于跨域问题,代理跨域的缺点是什么,如果通过img标签实现跨域请求并到的结果如何自己封装一个tree组件组件之间怎么进行传参如何封装一个table组件看过element的组件源码吗vuex的实现原理项目中遇到了什么问题,如何解决的如何自己封装一个组件,封装组件时用什么方法代替slot,如何根据参数不同组件的功能不同http状态码vue中如何实现页面权限划分组...
2019-06-11 23:15:57
744
原创 滴滴前端实习一面
说说Envent Loop宏队列和微队列JS闭包输入一个网址，中间发生了什么事，当请求到数据时浏览器具体怎么渲染的谈谈VUEX聊聊ES6如何解决跨域问题说说你项目中印象最深刻的部分，如何解决的如何实现控件的拖拽功能浏览器缓存策略http每个状态码的含义说说JS中的继承，具体说说原型链继承call，apply，bind 他们三者的区别说说面对大量数...
2019-06-11 17:27:45
485
原创 北森云计算前端实习面试（技术总监三面）
自我介绍问项目细节谈谈XSS，怎么预防现在我们有一个富文本编辑器，我在里面写了点击事件（富文本编辑器可以写点击事件吗？）怎么又预防XSS攻击又让我的点击事件不失效？Vue-Router的原理？我说我在使用的是history模式，有hash模式和abstract模式。问：你为什么选择history模式，他和其他的两种模式有什么不同。谈谈你在项目中遇到的问题，怎么解决的你觉得你...
2019-05-31 21:47:33
1872
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人