- 博客(83)
- 收藏
- 关注
RSS订阅原创 js截取视频第一帧（截取图片不会是黑色的）
我的电脑是win7系统，测试们的电脑是win10系统，且都是用的chrome浏览器，我的是截图的图片每次都是正常的，但是他们的电脑使用该功能时确实偶尔会出现黑色图片封面的问题。经从网上搜索终于解决了，由于复现不了bug搞了一下午。最近测试提的bug里有个我做的上传视频的功能，编辑回显的视频封面有时候是黑色的。经排查是在截取视频第一帧时出的问题。
2023-12-11 18:19:01
954
原创 vue项目预览excel表格（file-viewer插件）
还有一种使用luckysheet和luckyexcel来实现预览excel的方法，链接如下。vue项目使用luckyexcel预览excel表格。
2023-04-13 16:29:00
5177
7
原创 vue项目使用luckyexcel预览excel表格
public文件夹下的index.html里引入luckysheet的相关依赖，由于考虑到我所做的这个项目可能会内网部署，所以将这些依赖包放在了public文件夹下的static文件夹里新建了一个luckysheet文件夹，：需要用到luckysheet和luckyexcel，根据下面步骤一步一步操作会避免踩坑，比如我当时遇到了window.luckysheet is not defined控制台报红的问题。还发现一种方法可以实现，需要后端配合，叫做KKfileview。当然也可以选择cdn引入的方式。
2023-04-13 16:09:09
6012
8
原创 vue-template-compiler must be installed as a peer dependency...
vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementation must be passed via options
2023-03-20 15:19:03
965
原创 vue运行或打包时报错Cannot read property ‘parseComponent‘ of undefined
Cannot read property ‘parseComponent‘ of undefined
2022-12-23 18:14:02
1291
原创 window.location.href跳转页面后拿不到cookie
window.location.href跳转页面后拿不到cookie的问题
2022-12-22 11:08:00
2451
原创 d3.js v7版本框选的实现（结合cosmograph的api实现框选区域的节点高亮）
图上d3的代码只是做到了框选拿到框选矩形的位置坐标，拿到坐标后的高亮节点和边是使用cosmograph的api来实现的。
2022-11-18 14:38:33
774
原创 echarts控制台警告：DEPRECATED: ‘normal‘ hierarchy in itemStyle has been removed since 4.0.
echarts控制台警告：normal字段弃用
2022-11-04 15:19:34
6007
原创 win7系统安装node.js14.7.0版本报错问题
场景之前一直以为win7系统只能最高使用13.14.0的版本的node.js，但是昨天我和一位同事的系统都是win7，但是他却可以使用14.7.0版本的node.js，于是我也尝试安装了一下该版本的node.js。解决1.安装node.js，版本14.7.0nvm install 14.7.02.安装后我想安装react脚手架create-react-appnpm install create-react-app -g还有我也查看了下node的版本node -v但分别报如下错误从
2022-05-13 11:36:03
1478
原创 vue报错Invalid default value for prop “d3Data“: Props with type Object/Array must use a factory fun
场景今天合并代码后vue报错如下Invalid default value for prop “d3Data”: Props with type Object/Array must use a factory function解决通过报错提示可以了解到我们写的组件，props设置默认值时，如果是Object或者Array类型，不能直接设置，需要使用工厂函数。报错代码props: { d3Data: { type: Object, default: {} }}修改后的代码pro
2022-04-14 14:43:49
667
原创 element打包后生产环境图标乱码问题的解决
场景最近有一个时而发生的bug，在生产环境下，我使用的NavMenu组件的展开收起小箭头，偶尔刷新的时候会出现乱码的情况。从网上搜索了好久，终于定位到了问题所在。是我这个项目使用的依赖包是sass，elementui使用的是node-sass，发现打的包里的app.css文件里的content:unicode字符集显示并不是"\e790"这种。解决1.卸载sassnpm uninstall sass --save2.安装node-sassnpm install [email protected].
2022-03-28 16:37:39
1217
原创 js 数字的千分位格式化
场景今天被提出一个优化需求点，在Table表格里显示的出入度使用千分位，于是就在网上搜索了一下，将该方法放到了公共的方法里。数字的千分位格式化正则表达式实现/** * 千分位格式化 * @param {number} num * @returns {string} */export function toThousands(num) { const str = num.toString() return str.replace(/(\d)(?=(?:\d{3})+$)/g, '$1
2022-03-25 14:24:48
555
1
原创 git修改远程分支的名称
场景最近发现自己的分支命名不太规范，想修改下自己分支的名称。于是从网上搜索了一下方法，记录如下。步骤一、重命名自己本地的分支git branch -m 原分支名称 新分支名称二、删除远程自己的原分支git push --delete origin 自己的原分支名称三、推送新命名的分支git push origin 新分支名称四、修改后的本地分支与远程分支关联git branch --set-upstream-to origin/新分支名称ok啦~...
2022-03-21 15:14:21
5536
原创 sourcetree修改远程代码仓库地址
场景昨天我在的公司把所有代码环境迁移到了其他环境。说让重新配置下gitlab地址。我这个小白一开始是重新clone项目，然后重新安装包之类的。此时，有同事遇到了push不上去的问题，在我们的沟通中，我了解到她是原来的代码，改了代码库地址。于是我对这种操作产生了好奇，同事告诉我说直接修改代码仓库地址就行。哎呦，我这个大笨蛋呀。想想以前好像也遇到过这种情况，感觉自己的做法好笨拙。在此记录一下。解决如果以前的代码环境迁移到其他环境的话，我们只需要重新配置下gitlab地址就行了。sourcetree配置g
2022-03-10 10:43:03
2043
原创 jsplumb当浏览器窗口大小变化时，自适应（重新绘制端点和连线）
使用场景最近有个需求是绘制一个ER图，将关系图上的节点或者边的属性与数据表中的字段进行映射配置。可能是我的容器container的宽高不是px，而是百分比或者vw，vh之类的。当浏览器窗口大小变化时，该区域的ER图并没有自适应。那就使用window.onresize解决问题吧。解决监听浏览器窗口变化，重新绘制点和线。window.addEventListener('resize', () => { this.jsplumbInstance.repaintEverything()})
2022-03-04 11:30:57
1681
原创 nginx同一域名同一端口部署多个vue项目之前端操作
场景上个月遇到了我们的后端同事需要将多个vue项目部署到同一域名同一端口下，下面记录一下当时我们两个里面前端的操作有哪些。例如有一个产品，它分为3个产品模块，有三个vue的项目想部署到同一域名下访问路径想为如下所示：xxx.xxx.com:8089/productAxxx.xxx.com:8089/productBxxx.xxx.com:8089/productC方法前端我进行了3个操作，剩余nginx那里由后端来处理1.public/index.html文件head标签里加入如下代码
2022-03-03 10:46:15
3302
3
原创 Vue过滤器filters
使用场景用于一些常见的文本格式化。也许后端返回的数据格式并不是最终想要展示出来的，通过过滤器可以进行处理成自己想要展示出来的格式。由“管道”符号指示。使用方式1.双花括号插值{{message | myFilter}}2.v-bind表达式<el-tag :type="message | myFilter"></el-tag>3.vue的生命周期中，如用在methods方法中this.$options.filters['这里是过滤器的名字']('过滤器的参数')
2022-02-25 10:55:48
20852
原创 antv/g6添加图形image的img属性为静态图片的写法
antv/g6添加图形image的img属性为静态图片的写法img: require('@/aseets/images/logo.png')同vue使用图片的方式一样
2022-02-16 14:38:09
2048
1
原创 css实现高斯模糊（毛玻璃效果）
场景昨天设计走查我们做的成果时，有一个弹窗的毛玻璃效果还原度不高，要求有元素拖到毛玻璃后面的时候，这些元素也是模糊的。我最开始在蓝湖右侧复制的代码，用了background渐变，最重要的是使用了filter: blur(15px);但是发现最终的效果并没有使毛玻璃后面的元素变得也模糊，只是背景变高斯模糊了。当时我在想，我就是按照设计给的色值做的呀，高斯模糊不就是filter吗，也是15px呀。并没有觉得是自己用的不对的问题。想要实现的效果如下图解决本来这个效果是我暂时代替同事写的，然后同事有时
2021-12-01 14:48:22
3474
原创 element UI input输入框修改头部图标
一、属性方式<el-input placeholder="请选择日期" prefix-icon="el-icon-search" v-model="input1"> </el-input>prefix-icon也可以用iconfont里的图标<el-input placeholder="请选择日期" prefix-icon="iconfont icon-sousuo" v-model="input1"> &l
2021-11-30 16:41:05
1680
原创 修改element UI的input输入框的clearable的图标样式
方法::v-deep .el-input__suffix { .el-icon-circle-close:before { font-size: 16px; font-family: 'iconfont'; content: '\e6f3'; color: rgba(152, 167, 185, 0.5); }}tip在这里用的是iconfont的图标，重点在于加font-family: ‘iconfont’；和修改content的值content: ‘
2021-11-30 16:07:48
5256
2
原创 echarts（横向柱状图和grid）
场景最近在做知识图谱的时候，右侧弹窗需要有数据统计功能，大概ＵＩ如下图，当时想到的是横向柱状图来实现，目前的效果与UI的不同是后面统计的数量显示的位置。后来经其他前端同事启发，他是用进度条来实现的，发现自己的思想有些死板了，原来进度条实现也很好啊。下面说下自己在用echarts的横向柱状图实现方法和遇到的坑。实现let option; option = { title: { show: false }, legend:
2021-11-26 17:07:21
5808
原创 git报错remote: HTTP Basic: Access denied
原因本地git配置的用户名、密码与gitlab上注册的用户名、密码不一致。解决办法如果账号、密码有变动，在git命令行里执行一下如下命令git config --system --unset credential.helper然后重新执行你的操作（如pull，push），会重新提示让您输入账号和密码。感想回想了一下，我好像确实是新创建了新的用户名和密码或者我改了密码。哦了。...
2021-11-10 18:03:34
2369
原创 npm install --save @antv/g6报错
npm install --save @antv/g6报如下错误CategoryInfo : ParserError: (:) [], ParentContainsErrorRecordExceptionFullyQualifiedErrorId : UnrecognizedToken从错误中得知源文本中存在无法识别的标记解决办法npm install --save '@antv/g6'给依赖包外层加单引号或者双引号...
2021-10-19 15:22:04
2633
原创 撤销git pull的内容
场景今天在使用webstorm集成的git拉取代码时有冲突，以往我都是按照webstorm提供的冲突文件一个一个的解决冲突的，可是这次由于有急事，我当时想着后面再解决冲突吧，就点击了关闭按钮把弹窗直接给关了，没想到这样就把冲突给更新下来了。于是有了我要撤销git pull的内容，在此记录一下。1.查看日志git reflog2.选择你要回退的状态git reset --hard 要回退的状态...
2021-08-06 11:20:22
597
原创 typescript学习
typescript的安装和编译npm install -g typescript // npm方式安装typescripttsc 文件名.ts // 编译代码,输出结果为同名的js文件typescript入门1.类型注解typescript里的类型注解是一种轻量级的为函数或变量添加约束的方式，官网如是说。function person(age: string) { return '我的年龄是' + age;}person('26');以上是我们给person函数的参数age添加了
2021-08-02 15:42:37
69
原创 app混合式开发中HbuilderX连接手机真机调试
苹果手机连接HbuilderX1.电脑上下载iTools 4版本2.连接数据线，打开HbuilderX，选中我们的项目，点击导航栏中的运行>运行到手机或模拟器>会出现我们的手机安卓手机连接HbuilderX1.手机使用数据线连接至电脑，打开HbuilderX，选中我们的项目，点击导航栏中的运行>运行到手机或模拟器>会出现我们的手机安卓小tip:之前有遇到安卓手机插上数据线只能充电，并不能检测到该手机，绕了一圈发现换个数据线就可以了。总结无论是安卓还是苹果，都要开启开发
2021-07-29 16:47:51
1422
1
原创 vue项目打包成app
1.将vue项目打包生成dist文件夹2.下载HbuilderX的APP开发版并且登录3.在HbuilderX里点击文件>新建>项目，选择5+APP，填写项目名称和存储位置，模板选择空项目。点击创建即可。4.将HbuilderX里新建项目里的js、css、image文件夹以及index.html删掉。打包的dist的文件夹里的static文件夹和index.html复制粘贴进去。5.打开manifest.json文件配置几个核心项。选择基础配置，将应用名称填写上，应用标识（APPID）
2021-07-12 15:41:15
6947
1
原创 启动vue项目报错Cannot read property ‘version‘ of undefined
场景今天在使用vue-cli4的版本创建vue2.0项目时，发现执行了yarn serve报错。错误如下图Cannot read property 'version' of undefined解决最终从网上搜索多篇解决方案后，采用了如下方案解决了问题。第1步：卸载eslintyarn remove eslint --save第2步：在package.json里将下图代码删除"@vue/cli-plugin-eslint": "~4.5.0"ok...
2021-07-08 23:52:37
1491
1
原创 vscode设置成中文语言环境
场景已经用了多年vscode了，在此记录一下自己的感慨，最近在公司下了vscode后，一直使用的是英文版，见到同事的界面时中文后，回想起来了17年刚毕业参加工作那会，我也是用的中文呀，当时也是身边同事跟我说的，但是我记不清楚当时是下了vscode之后进行设置的中文还是我直接下的汉化版的vscode了，我就是想知道，就是想不起来了。方法1.从官网下了vscode后，是英文版2.快捷键CTRL+SHIFT+P或者F1，输入configure language，选择下图所示选项3.安装中文版（zh-c
2021-07-06 15:13:47
177
原创 vue dev模式下覆盖element样式生效，build模式样式失效
场景昨天还是在别人写的项目的基础上进行UI优化的时候，遇到一个覆盖element样式在生产环境失效的问题。首先我将.el-main这个类的覆盖样式写在了app.vue里，当然写在公共的css里也一样会遇到这个问题。.el-main { padding: 0;}其次element的css样式文件是在main.js里引入的。开发环境一切正常，我覆盖的el-main的类起作用了。但是打包放到生产环境，发现padding: 0;并没有生效。解决从开发者工具那里查看样式可以看到，element的
2021-07-06 10:13:32
555
原创 { parser: “babylon“ } is deprecated； we now treat it as { parser: “babel“ }
场景今天跑一个别人的项目，已经写了有一段时间了，发现npm install之后执行npm run dev命令，报错{ parser: “babylon“ } is deprecated； we now treat it as { parser: “babel“ }。解决方案这是prettier的版本导致，我当时安装的是1.18.0，然后执行如下命令安装了1.12.0版本。npm install prettier@~1.12.0 -dok，重新npm run dev便不会报这个错误了。延伸之前
2021-06-28 16:04:09
652
原创 echarts版本导致的关系图卡顿
问题最近在一个已有的项目上添加新功能时，需要用到关系图来表示人物与粉丝的关系，发现当数据只有2000多条时，关系图卡顿且页面卡死崩溃，刚好身边同事在做的另一个项目也用到了echarts的关系图，数据同样是2000多条，却不卡顿。解决于是我将同事的关于关系图相关的echarts配置代码拷贝过来，试了一下，发现还是卡顿，同样的代码，只是数据不同，在想是不是我的数据只有一个中心点，其余数据全部连在这个点上；同事的数据是有多个中心点，多对多的原因。于是我将同事的数据放在json文件里请求，这样就是同样的代码和
2021-06-25 15:17:38
1200
原创 vue-cli3更改包管理器（npm，yarn）
场景：今天在使用vue-cli4.5.12版本创建vue 2.0项目时，发现使用vue create 项目名创建的项目采用的是yarn来创建的，这个时候我就产生了疑惑，现在想改为npm怎么办呢。解决想起前不久我选择了手动创建项目，vue-cli的官网上有写在项目创建的过程中被保存的preset将会存在用户电脑的C盘下的用户下的administrator文件夹下的名为.vuerc的json文件里，可以编辑该文件去修改或者删除它，重新执行vue create 项目名称即可。...
2021-06-25 15:02:03
329
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人