![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
骑上我心爱的小摩托
掉入程序员的前端
展开
-
vscode配置快捷键注释模板
本篇文章可以在vscode中配置快捷键显示代码的信息注释,如作者、描述、创建时间等。原创 2023-02-01 18:10:15 · 3357 阅读 · 1 评论 -
vue项目中实际构建echarts拓扑关系图业务
由于现在echarts的利用率增强,需要用到拓扑图的设计,如果单纯针对echarts文档来看,虽然可以利用API详细了解到功能点,但具体的实际运用与开发场景经验案例还是略有欠缺,下面将针对echarts关系拓扑图进行实例讲解。关系拓扑图,顾名思义,是有具体的关系存在的点,具有向量指向特点。那么就要求数据具备和的属性。思路是这样的,首先描绘物体(关系点),再者是描绘连接关系点的连线。简单效果图如上图,共4层类型,同一层为同一个类型,分别是:运维人员、数据库、应用、用户,连接线为起始到终点的指向关系2.测原创 2022-11-15 15:06:16 · 8538 阅读 · 1 评论 -
vue项目中实际封装DateRangePicker组件使用
日期选择器在实际使用中,可能会要求默认固定日期、回显日期或者是时间固定点(00:00:00到23:59:59)综上所述,可见当前日期范围选择器默认时间是今天设置时间点固定为起始的00:00:00到23:59:59快捷项也设置成当前模式,自定义起始和结束时间文案当前的获取时间格式为时间戳形式。原创 2022-11-11 15:58:09 · 1998 阅读 · 2 评论 -
Element中table组件根据属性合并行数据
在实际开发中,要求使用elementUI的table组件对表格数据上下行相邻相同的数据进行合并,在elem官网上查看到是有对应的组件和合并方法。其中官网的objectSpanMethod比较简单,根据每隔两行就合并两行的数据,并不能满足实际的需求,下面直接上代码。1、首先需要生成一个与行数相同的数组,通过判断上下数据是否相同,记录每一行设置的合并数。这里就是判断当前元素与上一个元素是否相同。原创 2022-09-27 19:12:59 · 932 阅读 · 0 评论 -
vue自定义指令添加跟随鼠标光标提示框v-tooltip
通过监听鼠标移入移出的mouse方法,设置浮层样式与出现时机。2、div显示dom标签v-tooltip。此时运行后,出现浮层。原创 2022-09-26 16:17:36 · 2639 阅读 · 0 评论 -
vue项目实现Echarts在label中获取点击事件
此时针对label进行点击后,还是无法获取点击事件,经检查,是未对yAxis添加label的event事件。在click点击事件内,可以打印出当前点击信息。应对需要点击label设置的属性添加。,此时label可进行点击。原创 2022-09-26 16:27:00 · 2641 阅读 · 0 评论 -
Echats关系图les-miserables的图表详细解析(和弦图)(二)
和弦图在实际运用中还是不可或缺的,结合echarts插件进行使用,可以提高工作效率,话不多说,上代码。原创 2022-08-23 15:44:54 · 1455 阅读 · 0 评论 -
隐藏element-ui中tree懒加载叶子节点checkbox(分页懒加载效果)
css样式如下:由于属性是isleaf,所以lazy状态下叶子节点不会有加载目录符号,但此时,有个禁用复选框,现在只需要对它设置样式即可3. 分页懒加载实现功能也比较简单,可以复写tree树自带的load方法,load方法内携带两个返回参数,一个是node,一个是resolve,即懒加载数据必须是通过resolve就是return 将数据带回代码内有一点需要注意,即每次查询接口的时候,和后台约定的规则是:不包含分页,需要传值两个参数,一个是parent,即当前节点的上一级所有层级拼接,另一个是原创 2022-06-22 14:08:37 · 1307 阅读 · 0 评论 -
vue项目实现Echarts在tooltip中获取点击事件
此时针对tooltip设置了点击事件,formatter配置了两个点击事件,可自行设置样式todoSthLook方法内绑定了方法回调,先获取当前class对象,获取后进行点击事件监听,即可解决问题如果觉得还不错的话,给个关注或者点赞吧!...原创 2022-06-20 18:35:07 · 2915 阅读 · 3 评论 -
Failed to execute ‘drawImage‘ on ‘CanvasRenderingContext2D‘: The image argument is a canvas element
Echarts重绘报错,原因在于绘制时,未正确获取到画布的宽高,可在容器内写入行内样式,即可解决<template> <div class="g2-chart-container" style="height: 300px;"> <div v-show="hasData" :id="id" class="g2-chart" style="height: 300px; width: 100%;" />.原创 2022-02-25 16:32:18 · 7401 阅读 · 0 评论 -
使用yarn/npm配置resolutions按需下载版本依赖包
最近在修复项目代码漏洞时,要求对使用的依赖包进行版本升级,其中包括一些子依赖包要求升级到对应版本的问题其中关于antv/g2内携带的子依赖d3-color 当前版本为2.0.0,需升级到3.0.0一般思维,可能是直接升级d3-color,如终端执行yarn upgrade package@version,但是是不起作用的,它的最上层antv/g2为低版本,内部板顶d3-color为低版本,此时若需升级d3-color,可要么通过升级g2位最新版本来间接性升级子依赖包(事实证明,并非所有的依赖可.原创 2022-02-25 15:45:26 · 10425 阅读 · 3 评论 -
解决Warning: [antdv: LocaleProvider] `LocaleProvider` is deprecated.报错提示
搭建vueCli使用antdv时,出现了这个报错提示,原因在于localeProvider已经被弃用了,只需要把标签换成提示的configProvider即可2. 修改标签 <a-locale-provider>为<a-config-provider><template> <a-config-provider :locale="zh_CN"> <div id="app"> <router-view v-wec.原创 2021-02-25 10:17:43 · 1749 阅读 · 1 评论 -
JetBrains系列编辑器主题下载与配置(以webstorm mac为例)
1. JetBrains全系列主题下载 http://www.themesmap.com/ 支持:InteliJ IDEA, PhpStorm, PyCharm, RubyMine,WebStorm and AppCode.2. 选择需要的主题,进行下载,获得一个jar主题包**3.此处以mac webstorm为例,打开配置界面 WebStorm -->Perferences (快捷键command+,)找到Editor -->Color-Scheme,找到当前菜单页的小齿轮,点击后原创 2020-11-24 10:57:09 · 1594 阅读 · 0 评论 -
mac中Sublime高亮vue语法代码以及解决无法找到Install Package命令
在开发前端过程中,我将sublime text 2.0 作为基本编码文件的阅读器,在打开vue文件时,出现了无高亮语法的情况,此时需要对sublime安装相关对语法插件Vue Syntax Highlight,方便阅读。1. 打开sublime,找到工具栏-命令面板 Tools->Command Palette…点击后,输入package Control:Install Package,此时可能无该命令,需要先对install package进行下载安装。2. 在官网中下载 https://pac原创 2020-11-02 11:37:36 · 737 阅读 · 1 评论 -
GitHub 私人private仓库添加成员(协作者Collaborators)
选择当前私有项目,点击setting,点击Manage Access,即可通过输入协作者的邮箱帐号或用户名,进行点击invite邀请按钮,并将邀请发送给该协作者,同意后,即可加入到当前项目中。原创 2020-09-22 11:10:07 · 6360 阅读 · 0 评论 -
安装react脚手架报错 yarnpkg add --exact react react-dom react-scripts cra-template --cwd
1、安装react脚手架报错2、此时需要对yarn进行卸载npm uninstall yarn -g3.再次进行安装,问题解决原创 2020-07-27 15:34:06 · 2823 阅读 · 0 评论 -
JavaScript URLdecode函数
JavaScript中urldecode有相应的函数,使用方便。但urldecode就需要一些处理,直接上代码function UrlDecode(zipStr){ var uzipStr = ''; for (var i = 0; i < zipStr.length; i += 1) { var chr = zipStr.charAt(i); if (chr...转载 2020-04-03 09:51:34 · 14396 阅读 · 0 评论 -
界面报错Uncaught (in promise) DOMException: Failed to execute ‘open‘ on ‘XMLHttpRequest‘: Invalid URL
url写法不对,格式应为http://xxxxxxxx原创 2020-03-31 01:57:58 · 3076 阅读 · 0 评论 -
gyp ERR! configure error. gyp ERR! stack Error: gyp failed with exit code: 1
electron-vue项目初打包时报错AttributeError: ‘NoneType’ object has no attribute ‘groups’gyp ERR! configure errorgyp ERR! stack Error: gyp failed with exit code: 1解决方法:此时可npm install pack...原创 2020-03-29 09:10:07 · 5409 阅读 · 1 评论 -
warning package.json: No license field报错
只需要在package.json内对license添加“ISC”值即可 "license": "ISC",再次执行无误原创 2020-03-27 17:15:28 · 17461 阅读 · 5 评论 -
Can't locate Mac/Memory.pm in @INC报错与electron-vue打包操作
electron–builder 打包详细过程electron-vue在利用npm run build后报错,最终采用了electron-builder来打包以上是报错内容需要在打包前,先进行pack编译npm run pack在执行打包操作指令这里分为打包为dmg mac电脑安装和windows这里没安装的话 需要先安装 yarn add electron-builder ...原创 2020-03-25 15:41:39 · 1987 阅读 · 1 评论 -
鼠标hover界面logo触发放大动画效果css样式
在宣传官网上普遍的动画效果,就是鼠标hover触发logo轻微变大css代码效果如下:.featured-app-logo-wrapper{ width:120px !important; height:120px !important; margin:10px !important; transition:transform .32s !important}.featured-a...原创 2020-03-20 11:34:46 · 1305 阅读 · 0 评论 -
electron+vue项目简单创建
当具有electron和vue的基础知识后,可以创建基于vue的electron项目electron-vue 充分利用 vue-cli 作为脚手架工具,加上拥有 vue-loader 的 webpack、electron-packager 或是 electron-builder,以及一些最常用的插件,如vue-router、vuex 等等。在项目里已完成vue-cli脚手架的环境后:1. 新...原创 2020-03-19 21:32:58 · 2603 阅读 · 0 评论 -
Eslint的报错信息Module Error (from ./node_modules/_eslint-loader@2.2.1@eslint-loader/index.js)解决方法
此处报错为eslint多添加了一个分号,是因为在项目中Eslintrc.js内的配置中并未允许添加分号,故只需要修改该文件并进行配置即可。关于分号的配置为下图中的semi,此处设置为0即可module.exports = { root: true, env: { node: true }, 'extends': [ 'plugin:vue/essential'...原创 2020-03-19 15:02:22 · 29451 阅读 · 1 评论 -
HTML中选择器select下拉框内容显示不全的解决办法
1.select选择框内的value值数据过长而显示不全,从而影响界面显示2.此时需要的需求展示是,鼠标置于其上,能够全部显示出来可对select设置title后即可完成新效果截图为:...原创 2020-03-16 15:37:43 · 3106 阅读 · 1 评论 -
基于gulp搭建的前端自动化构建
基于gulp搭建的前端自动化构建,需要在项目中引入wbepack-cli,来添加gulp依赖,并对gulp文件做文件路径配置,执行打包命令即可首先新建项目文件夹后,项目目录下创建 package.json 文件。npm init安装 gulp 命令行工具npm install --global gulp-cli安装 gulp,作为开发时依赖项npm install -...原创 2020-01-09 11:30:48 · 398 阅读 · 5 评论 -
vue 计算属性computed方法内传参
遇到头疼的vue计算属性传参问题经过各种资料查找,亲测有效index.vue&lt;van-circle v-model="Ratedata[index].currentRate" color="#2462E8" fill="#fff" layer-color="#E6E6E6&quo原创 2018-10-16 15:44:18 · 30191 阅读 · 2 评论 -
Access-Control-Allow-Origin跨域解决问题
1.由于前后端自身的代码服务器不是同一个产生的跨域问题,可以通过两种方法解决。其一后台端设置可跨域访问,其二就是前端调试浏览器自行安装Access-Control-Allow-Origin的插件2.在chrome商店搜索 Access-Control-Allow-Origin 就可以找到,扩展程序装好即可3.再次启动程序后不会报错这里需要对JQury的框架使用者补充一下案例: 首先在JQur...原创 2018-10-08 16:14:17 · 1261 阅读 · 0 评论 -
No PostCSS Config Vue中启动后报错
1.新建的vue项目启动后报错No PostCSS Config found in: /Library/WebServer/Documents/WebserveProjects/shopapp-wechat/node_module2.此时需要对webpack 3.0进行配置postcss.config.js是针对webpack3.0做的特殊处理在项目根目录新建postcss.config...原创 2018-10-11 16:02:45 · 2008 阅读 · 2 评论 -
vue项目转移之后的生成依赖包
1.最近从gitos上面clone了代码之后,运行在新环境,但是vue项目启动失败,缺失依赖包。 2.最后的正确操作是删除module文件包,重新执行npm install 进行下载依赖包,具体的一些其他插件会根据报错提示就行npm 下载cd vue2.0/ npm install npm npm install –save mint-ui vue-awesome-swiper swip...原创 2018-03-11 13:40:33 · 3602 阅读 · 1 评论 -
gulp打包报错 “Error: Unhandled 'error' event at new JS_Parse_Error”
报错信息如下:原因在于gulp打包时未将es6语法转为es51.首先在项目下进行安装gulp的babel转码npm install --save-dev gulp-babel babel-core babel-preset-es2015 2.此时在gulp压缩配置文件内添加如下babelvar gulp = require('gulp'), babel = require("...原创 2019-04-23 13:52:57 · 3121 阅读 · 0 评论 -
gulp使用babel的坑:使用babel后js并没有压缩 未更新
在使用gulp进行对项目文件的压缩时,出现了es6语法转化未es5后进行压缩js,并没有按照设置的生成预期出现的minjs,以及更新相应的js文件。问题:经过网上查询资料以及反复尝试,发现是npm发布的gulp-babel版本问题,他并不会报错,仅仅是不更新压缩文件。解决方法:首先查看自身的package.json文件发现当前babel版本为8,而我们的插件使用版本为7。此时需要对当前版本...原创 2019-05-13 12:42:17 · 1987 阅读 · 0 评论 -
Vue组件嵌套-全局/局部注册组件
一般都使用局部注册组件与使用Users.vue<template> <div></div></template>1.全局注册组件main.jsimport Users from './components/Users'Vue.component("users",Users);app.vue<users></u...原创 2019-06-15 17:29:35 · 760 阅读 · 0 评论 -
Vue路由引导-当路径路由出错
当路由填写出错或不存在时,可在router的路由界面中填写以下index.js内容:const routes = { { path:'*',redirect:'/' }}原创 2019-06-17 16:00:38 · 405 阅读 · 0 评论 -
es6的foreach与some的循环遍历
1.foreach循环遍历直接上代码: result.value.forEach((item,index)=>{ console.log(index);})对于return,break不起作用2.some的循环遍历 let arr = [1,2,3,4,5,6,7] if (arr.some((item,index) => { ...原创 2019-08-15 14:49:44 · 1764 阅读 · 0 评论 -
Error: tunneling socket could not be established, cause=connect ECO微信小程序本地调试预览出错
微信小程序中,编译后进行预览突然报错Error: tunneling socket could not be established, cause=connect ECO经查找资料发现可以通过以下方式1.找到开发工具中 “工具 - 设置 - 代理设置”,选择不使用任何代理即可2.再次编译后即可恢复正常...原创 2018-10-11 16:00:53 · 10522 阅读 · 0 评论 -
js时区时间转换格式:h5内转换含有T字母的8小时时区时间格式
1.后台传过来的数据含有时区日期,该日期为浏览器识别日期,此时进行日期格式的转换,如采用getFullYears()等方法后,手机微信打开的h5界面则显示为NAN,非法日期格式,此时应采用如下方法转换。 2018-09-12T19:19:30.000+0000 2.首先对日期进行拆解,获得日期字符串 var arr=date.split("T"); var d=arr[0]; ...原创 2018-09-13 03:27:11 · 15289 阅读 · 1 评论 -
Duplicate keys detected: '1'. This may cause an update error. vue报错
1.报错信息 错误信息展示为关键字‘keys‘,此时应该检查for循环中的key,循环的key值不为唯一性<van-cell v-for="(item,index) in list" :key="item"> {{item}}</van-cell>此时应将item改为index,则不再报错了...原创 2018-09-08 21:55:49 · 35949 阅读 · 15 评论 -
vue项目中轮询状态更改(钩子函数)
在实际项目中,对于实时存储改变的数据,如果不是使用websoct,就需要使用到轮询,对于轮询实际是前端设置的定时器,不停存储获取数据并进行更改。而对于退出该界面后,轮询逻辑依然在定时器的执行中进行,此时需要用到钩子函数判断路由离开状态后,进行清除定时器 //离开当前页面beforeRouteLeave(to, from, next) { window.clearInterval...原创 2018-05-02 11:05:04 · 5210 阅读 · 0 评论 -
webstorm报错:Import declarations are not supported by current JavaScript version
原因为:不支持当前的js版本,在perference中进行设置javascript的版本即可注意:在perference中进行更改,而不是defeaut perference,快捷键操作为:command + “,”Languages & Frameworks —> javascript —>ECMAScript 6 / React JSX...原创 2018-05-02 10:50:42 · 3408 阅读 · 1 评论