- 博客(121)
- 资源 (6)
- 收藏
- 关注
RSS订阅原创 codemirror光标样式问题
输入框为空时会显示placeholder，文字有点长换行了，光标竟然变成上图那样了，我试过如果placeholder文字是三行，那么光标就是三行高。查到最后，原因竟然是因为我在用vue-codemirror时为了去掉一些basicSetup的功能，就把basicSetup移除了。不得不说code-mirror的代码架构真的让人眼前一亮，我从来没讲过这样的架构，多么希望有能力通读它的源码啊:)最终一一尝试知道了是drawSelection，所以我单独引入了drawSelection，问题解决了。
2024-02-08 09:19:28
223
原创 window.open下载或打开oss文件时一闪而过
查到最后是因为测试环境地址是https协议，而接口返回的文件地址是http的，众所周知https里面访问http的页面或接口是有安全问题的，所以就失败了。主要是因为代码中用window.open来打开，调用时只传递了一个文件地址，默认浏览器会打开一个新的tab，以为报错，tab会马上关掉，根本没办法看到错误，后来在window.open调用时传递了第二个参数，值为’_top’，这样在控制台中就看到错误了。后面还发现，这种情况只针对xlsx文件出现，如果文件是pdf的就能正常打开，真是奇怪。
2023-11-16 12:19:58
364
原创 codemirror怎么高亮指定文本
研究结果是，语言包只能给定规则，这是用Lezer定义的上下文无关文法实现的，但是我没想到动态传入变量的方法，也就是解决不了上图中{{xxx}}不高亮的问题。我参考了文档https://codemirror.net/examples/decoration/中添加下划线的代码，基本实现了使用我想要的功能，不过不完善。看codemirror的源码发现自己的能力差太多了，好羡慕人家那么强的能力，有空我想通读一下codemirror的源码，一想到它里面对字符串的操作算法我就头大，根本看不懂:)
2023-11-15 18:15:57
368
原创 echarts同一个系列出现不同的颜色
https://echarts.apache.org/examples/zh/editor.html，打开这个页面，把上面的代码覆盖就能出现截图中的内容了。介绍一下背景，图中是一个电池在不同时间的电量值，两张图的数据是一样的。产品经理要求标出电量变化的情况，分为缓慢上升、缓慢下降和急速下降。
2023-03-20 16:47:41
548
1
原创 babel转换class时使用defineProperty导致的装饰器问题
babel转码class使用defineProperty导致装饰器失效问题
2022-08-16 19:02:00
489
原创 el-radio-group change事件获取老值
先说问题，在点击el-radio时，需要先判断一下，根据判断结果决定本次点击是否有效，直接用v-model是实现不了这种效果的，所以就需要把v-model拆开——绑定value属性和监听它的input或change事件，在input或change中判断，真正需要起作用时把value绑定的值改掉。通过查看文档发现el-radio-group(因为我把el-radio放到了el-radio-group中）有change事件，就下意识的认为el-radio-group是通过value属性和change事件来实现v
2021-12-06 14:16:45
17222
2
原创 新闻滚动插件
最近接到这样一个需求，一个列表需要有下下滚动出现的效果。刚开始还觉得很简单，不就是swiper，这个我会用。进一步了解，发现这个列表是实时变化的，就是说里面的条目会增加也会减少。我的天呀，我对swiper了解也不是很深，每次都是去巴拉文档的，这次我发现不啥也巴拉不出来，可能是自己巴拉文档的能力又下降了。关键是我也不知道这种插件名字应该叫什么呀，我在网上搜来搜去，还是没找到。说实话，这种场景，生活中还是挺常见的，我就在社区医院接种疫苗的大屏幕上见过，它会滚动播放每个接种后留观人员的信息，如果超过了半小时就不
2021-11-21 10:42:27
760
原创 code-server中开发vue项目遇到IOPS飙高问题
交代一下背景，自从几个月再次在阿里云上部署code-server后，我深深地喜欢上了用code-server开发前端项目，我觉得这种方法完全可以跨设备，不用再把开发限制在某一台计算机上，只要能联网，有浏览器，走到哪里都能开发，说到底我就是把阿里云服务器当成了开发机。当然了如果你喜欢用ssh连接服务器，也能达到这种效果，不过前端一般都喜欢使用vsc开发，而不是用vim。还有就是如果是开发微信小程序项目，那没办法还是用本机吧。说的有点多了，这里其实要说的是在npm run serve时，我遇到过一个很诡异的问
2021-08-08 17:28:25
597
2
原创 假如能再回大学-数据结构篇
大学已经是多少年以前的事情了，我多么想重回大学，把那些不曾认真学习的课程从头来过！虽然时光不能倒流，不过大学的课程我却可以重新学习，这已经是很好的。从此开始，我愿用一年的时间，或更多时间，把大学中主要的课程重新过一遍。它们应该包括：数据结构软件工程编译原理操作系统或许还可以包括，虽然我学习的意愿不是那么强烈：高数离散数学线性代数概率论汇编职业规划委外待续…...
2021-07-06 12:31:21
160
原创 我是怎么调试vue生产环境的
这里介绍一下我调试生产环境的方法。直接连接生产环境接口我最常用的方法就是这个了。在vue.config.js中把proxy中的target改成生产环境的地址，然后用生产环境帐号登录，这样就能完全模拟生产环境了。我想这个应该是大部分人常用的方式。直接查看生产环境网页上的vue实例的状态这种方法算不上是调试，只能查看一下vue实例的内部状态，以此来作出一些判断。具体做法是利用了vue把实例对象帮到了dom上的__vue__字段上。实施起来也是很简单的，找到vue实例对应的dom元素，在上面添加一个id，
2021-06-22 08:57:25
1630
原创 v-infinite-scroll指令不能加载第二页的问题调查和解决
v-infinite-scroll指令用起来还是不错的，可以满足日常需要。有一天，产品经理突然找到我说，页面只能展示第一页，后面的数据都没有。过去看了一下，在不用搜索条件查询的情况下，应该会有很多数据，不能能只有一屏的。底部页面显示“到底”的字样，那么可以肯定的是，代码有bug。我的天呀，美好的一天就这样被打破了，查吧，毕竟是自己负责的项目，保修是最低的标准吧，好了，玩笑开完了，言归正传。经过调查，发现是因为在第一屏加载后，内容的高度并没有让容器出现滚动条，这样就不会触发scroll事件继续加载了，这真
2021-06-19 16:44:23
1092
2
原创 使用el-tree支持保留源节点的拖放操作
产品的需求千奇百怪，在成长中的产品的需求更是。最怕的是到处抄，然后四不像，苦了开发人员了。话说我们需要一棵树，这个树上有中间节点（文件夹）和叶子节点。然后这些数据会来自两个系统，代表的含义也不相同，就这样优秀没有办法，这都不是事。事情是支持某些文件夹下的节点（包括子中间节点和叶子节点）能拖放到另外一些节点里面，这也不是事，el-tree能支持。可怕的就是，一些拖放是删除源节点的操作，就像移动操作；另一些拖放是保留源节点的操作，就像在目标节点下创建了副本，哈哈，就是这么有意思:(删除源的移动是el-tre
2021-05-25 06:30:51
1491
1
原创 部署一个code-server
这里记录一下部署code-server的过程。先说一下背景，想试试code-server，开玩笑。更多的是真的需要了。公司的开发环境真是太差了，配的笔记本分分钟卡死给你看。git pull git commit git push三个操作有时都要用几分钟，真的是没脾气呀。如果开启了watch，那就更慢了。反正就是一句话，开发环境坑死人。还有的小伙伴，用自己的电脑根本就没有办法打包，执行npm run build，然后就一直卡住，根本等不到结果，最多的时候等了两小时，没有任何变化！！为了把自己从这种非人的开
2021-05-14 14:32:31
899
原创 el-table的死循环问题调查
今天是头昏脑胀的一天，光调一个el-table的渲染死循环就用了将近两个小时，然后找深层原因又用了两个多小时，真是欲哭无泪。这里记录一下，希望能帮助后来人。话说我现在做的是一个数据可视化系统，说的通俗易懂点就是报表系统，通过拖拽的形式快速的创建一个个报表，包括市面上见的图表，什么折线图 柱状图 饼图 漏斗图 还有业务相关的复合型图表，在此之前我从来没想过表格才是这么多图表中最难的，我手下的一个小伙伴从入职一直负责做表格，然后做到离职，哎言归正传，今天的主角还是这个表格，有用户反映某些报表打开后页面卡死
2021-05-06 19:48:27
1319
2
原创 二叉搜索树
很久没有认真思考算法了，这两天看了小伙伴的《学习JavaScript数据结构与算法》一书。看到了二叉搜索树一节，感觉又回到了大学时代。下面把书中的代码手敲一下（凭记忆，有改动），分为两个文件BinarySearchTree.js和test.js。用node test.js运行就行了。我要坚持在算法的路上越走越远！！！// BinarySearchTree.js// 二叉搜索树const COMPARE = { LESS_THAN: -1, EQUAL: 0, BIGGER_T
2021-04-28 18:25:10
121
原创 使用Ubuntu访问iPhone
用了三年的小米Max 2终于还是跑不动了（这里并没有黑小米的意思，我还是喜欢它的大屏的）。终于咬牙下定决心买了个iPhone 12 Max（这已经是好几个月前的事情了）。这里只是交代一下，我是从android转向ios的。各种不会用啊。最简单的文件传输我都搞了好久。之前一直用iTune，windows上可以安装的。今天突然要在Ubuntu下从iPhone里拷贝东西出来，反正我是没有思路，然后就只能求助伟大的百度了。找到了这个知呼文章，亲测可用，这里记录一下，同时把其中的内容摘录出来，以防以后找不到。希望这样
2021-04-17 13:47:56
1200
原创 vue2和vue3中v-if和v-for优先级的调整
虽然学不动，但是生命不息，学习还是要继续的。最终还是决定vue3还是要学习起来了。先从官方文档开始，然后就是深入源码了，这都是后话了。在刷文档时，前面的内容大部分都没变，在读到条件渲染（conditional render）时，我发现有一处跟vue2的不一样，如下图：第一张图是vue3的，第二张图是vue2的，比较一下发现是调整了v-if和v-for的优先级，vue2是v-for优先级高，现在是v-if的优先级高。我读起来很差异的，我还担心是文档写错了呢。自己就用vue3写了一个简单的测试程序，如下
2021-04-13 11:06:58
2671
原创 把vue文件中的style抽离到单独的文件
最近接到需求，要换肤，给系统增加主题的概念，让用户可以一键换肤。就想着参考element-ui中样式的管理方法，把所有样式都放到一起统一管理，而不是分散在vue文件中。然后就写了一个小工具来实现这个功能，基本可用const path = require('path');const fs = require('fs');const compiler = require('vue-template-compiler');const colors = [];const reg = /(#[a-f0-9]
2021-01-31 16:42:51
1444
6
原创 Vue模板字符串的获取过程
在src/platform/web/entry-runtime-with-compiler.js中在真正挂载（mount）之前会把模板编译成render函数。编译render函数的过程应该很复杂，后面我再研究吧。这里只说一下怎么获取模板字符串，一图胜千言:)...
2021-01-25 20:31:45
687
原创 echart3.8.4的lable的formatter添加下标访问value的支持
有点汗颜，老项目了，也不敢升级echarts，谁知道升级了会怎么样。介绍一下基本信息，这是一个数据可视化系统，说白了就是一个报表系统，支持常见的图表类型。界面上可以进行复杂的配置，然后把这些配置保存成一个巨大无比的json，保存到数据库。当页面打开时就是根据这个json还原报表。用户想定制气泡图中label的显示，系统刚好没有提供支持。所有问题就都围绕这个展开了。大家知道，要想定制气泡图的label，就是气泡图中的文字，可以使用series.label.formatter来实现，这个支持字符串和函数，函
2021-01-22 17:33:03
832
原创 使用串口接收arduino传来的数据
《爱上Arduino》里面有一个例子是用processing程序跟arduino通信的。代码大体如下，经过了修改：import processing.serial.*;Serial port;void setup() { size(640, 480); frameRate(10); String arduinoPort = Serial.list()[0]; // 获取串口地址 port = new Serial(this, arduinoPort, 9600); /// 创建串口对象}
2021-01-21 20:33:02
1878
原创 el-form中rules的原理简介
一直以来我都没有搞懂el-form的rules究竟是怎么工作的，我只是按照文档画瓢而已。这次有个需求把界面上的el-select替换成树形的下拉框，只能自己封装了，同时这里用到了rules，没办法我只能让自定义的树形组件(我取名叫DropdownTree)支持rules了。可是我对这个一无所知！！！把拉代码吧，还能怎么办呢？经过艰苦卓绝的一个小时，总算搞懂了。我下面尝试总结一下当表单元素（比如el-input），在value变化或blur时，会触发el.form.change和el.form.blur
2020-12-02 09:46:42
5125
2
原创 一个Vue线上组件系统的想法
众所周知，Vue项目中大部分组件要么放在项目源码中，要么以npm依赖的形式存在。除此之外很少有别的形式了。这会自然产生一个问题，组件的修改需要对整个项目进行重新打包发布。有时我在想，可以创建一个组件治理平台，用来提供组件，而别的业务系统在运行时从组件治理平台获取组件。这种想法跟webpack中的federation module很像，只是把每个系统都能暴露组件变成了只有一个中心的组件平台来暴露组件。我对webpack也只是会用的程度，说来也是惭愧的。我就尝试在vue-cli 3创建出来的vue项目上进行
2020-11-17 09:30:03
150
原创 把可选择的el-tree中选中的节点单独用一个棵树显示解决方案
有时候我问自己，为什么我干的前端的跟别人干的不一样，人家都是写写h5页面啥的就好了，为什么我非得那么苦逼的魔改各种组件，产品就不能按照现有的组件库设计产品吗？唉，说多了都是泪。不过这个也能让我有一定提升，只是这个提升是时间的极度浪费来达到的，毕竟在已有组件上就行修改还是很难的，总归是受限的。不说了，直接进入正题 吧。先看个截图，一图胜千言！！！左边是一个棵完整的树，右边是选中的节点组成的树。我做过很多系统，一般都是用一棵树就搞定了，毕竟左边的树上已经有选中和取消选中的操作了。无奈产品经历非得说在树很大的
2020-11-15 14:43:29
2090
8
原创 编译element-ui的文档
这里介绍一下编译element-ui文档，以及本地访问。如果电脑可以正常联网，那么打开element-ui在线文档没什么问题。我所处的环境是严格限制外网访问的，所以我就本地编译后放在了一个服务器上，让公司的小伙伴可以方便的访问。前提条件前提条件这里假设已经clone了element-ui的源代码，并且已经安装了依赖包编译文档npm run deploy:build如果没有意外是一定可以编译成功的，在examples/element-ui中就是编译好的文档了。你可以把它放到nginx的目录里面
2020-11-15 10:02:23
798
原创 amd 4700u安装ubuntu20.04导致屏幕亮度不能调节问题解决方法
经过一番思想斗争，我终于狠下心来买了amd cpu的笔记本，挑来挑去还是惠普的便宜，最终选择的就是惠普战66,cpu是4700u。然后收到货就开始安装ubuntu 20.04.一切正常，相当满足，用了半天总觉得眼睛不舒服，后来发现屏幕太亮了，我也是太后知后觉了。f3快捷键可以调暗屏幕，但是不起作用。我去系统文件中看到表示亮度的值确实变化了，但是屏幕就没有变化。在网上搜了好久没有解决，然后放弃了。用了好久windows，今天一个同事在网上给我搜到了解决方案，说升级到5.9.0内核就好了，我说我看过类似的解决
2020-10-29 16:50:34
1772
5
原创 阿里云服务器上运行wordpress
这篇文章记录从头开始安装wordpress的过程我想使用docker安装先说一下我的服务器的配置4.15.0-88-generic #88-Ubuntu SMP Tue Feb 11 20:11:34 UTC 2020 x86_64 x86_64 x86_64 GNU/LinuxDocker version 19.03.13, build 4484c46d9d启动wordpressdocker run --name some-wordpress -p 8080:80 -d wordpress这
2020-10-26 17:03:40
298
原创 在两台笔记本上共享数据
经过我的多次思想斗争，最后我还是买了新的笔记本，实现了大内存的梦想。接下来我就要考虑把一些文件从surface上拷贝到新笔记本上了。方案有U盘拷贝就近共享联网传输U盘拷贝使用u盘或移动硬盘啥的，可惜我的u盘只有4G，并且其中大部分已经被Ubuntu占据了，这个方案否了就近共享Windows10带有就近共享的功能，很方便，唯一的不足是，它使用的是蓝牙传输，不是一般的慢，小文件可以考虑，我这种大规模的搬运还是算了联网传输如果两台电脑都连在一个局域网上没有问题。可惜我工作的地方没有wifi，
2020-10-14 09:16:46
497
原创 Ubuntu下访问Windows分区变成了只读解决方法
终于下定决心买了个笔记本，实现了自己32G内存的梦想，哈哈。拿回来第一件事当然是装一个Ubuntu，毕竟是为了它买的笔记本。然后就变成了双系统。我把D盘作为了Windows和Ubuntu的共享盘，这样就不会有数据冗余浪费空间了。我使用Joplin作为日常笔记的工具，两个平台都支持。只要joplin --profile 目标目录，这样两个系统就能用一份数据了。刚开始用的还挺好的，就在昨天进入Ubuntu开启Joplin的时候突然不能打开了，报错说权限问题，我刚开始认为是因为我在两个系统间共享Joplin文
2020-10-13 09:18:38
1195
1
原创 wx.canvasToTempFilePath错误create bitmap failed
具体产生的原因不知道，网上有人说因为部分安卓机的性能不强，需要多次尝试才会成功。这个方案我还没试。我观察下来的现象是，如果我把canvas设置成hidden的，那么必定失败，如果我让canvas显示在界面上，就会成功。我也不知道哦这两者有没有直接的原因。解决方案还在努力寻找中。。。。...
2020-10-11 11:53:48
2150
1
原创 小程序分享功能图片生成
众所周知我们可以用onShareAppMessage回调来定制小程序分享的内容，不过大致也就标题、内容和图片这三个。如果想有丰富的内容，当然是在图片里面下功夫了。这样就会要求我们生成分享的图片，很多时候我们的方案都是在小程序端来生成跟当前用户相关的图片。主要思路就是：使用canvas绘制出要分享的图片的内容从canvas中获取其内容的图片文件下面来一个大致的代码var context = wx.createCanvasContext('canvasId');// 获取canvas的上下文，要确保
2020-10-11 11:24:01
1581
原创 记一次可爱的错误
其实这个问题我之前遇到过一次，因为时隔那么久，导致这次又遇到了。先贴代码：....const arr = [](res.data || []).forEach(() => { ...})....从直观上说这段代码没有问题，不过有时候感觉是会骗人的。上面的代码经过编译后会变成类似如下的代码const arr = [](res.data || []).forEach....我的天呀，这就把空数组[]当成函数调用了呀，难怪会报错说[] is not function如果对你有帮助，请
2020-10-11 09:27:25
131
原创 el-table实现多级表头
el-table还是很好用的，比如它的合并相同内容的单元格功能，就是算法有时候会很烧脑。el-table支持多级表头，实现起来也很简单，只要在模板里面把el-table-column嵌套就好了。不过问题也就出来了，如果是简单的两级嵌套这没什么难度，要是我想实现不定深度的嵌套，怎么办呢？我想递归是一个好的解决方案吧，Vue组件怎么递归可以参考这里下面我就介绍一下我的思路，实现的不是很完美，也就是说还没有到生产代码的级别，还要在实际中调整。我会创建一个TableColumn.vue<templat
2020-10-11 09:22:46
5306
原创 Vue中组件的递归使用方法
Vue组件是天然支持递归使用的，只需要在引用自己时使用跟该组件name相同的tag就行了，比如：<template> <div> {{ item.name }} <template v-if="item.children"> <tree-node v-for="child of item.children" :item="child"/> </template> <div></template>&
2020-10-11 09:16:00
1928
2
原创 记录一下webpack5 federation module
这几天刷webpack的文档，在concept中有一节federation module，没看懂。就找了一些相关的文章看了看，然后大致了解了，下面是一下资料。https://module-federation.github.io/blog/get-startedhttps://indepth.dev/webpack-5-module-federation-a-game-changer-in-javascript-architecture/https://dev.to/marais/webp
2020-09-03 23:10:55
429
1
原创 element-ui中cascader选中值展示改造，按照第一栏类别分组展示
cascader中选中的值有两种展示方式，全部展开、收起。如下图可惜这两种都不是我要的。我需要的是，第一个栏目中的元素不能选中，其中每个项目表示一个类目。选中值显示的规则是第一栏目中的项目只显示一次，如果同一个项目下的子节点选中了一个就直接展示该子节点的文字，否则显示该项目的名称+等x项。具体代码如下import { Cascader } from 'element-ui'function getRootNode (node) { return node.pathNodes[0]}con
2020-08-26 09:11:03
1927
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人