- 博客(116)
- 资源 (3)
- 问答 (2)
- 收藏
- 关注
RSS订阅原创 vue项目中实际构建echarts拓扑关系图业务
由于现在echarts的利用率增强，需要用到拓扑图的设计，如果单纯针对echarts文档来看，虽然可以利用API详细了解到功能点，但具体的实际运用与开发场景经验案例还是略有欠缺，下面将针对echarts关系拓扑图进行实例讲解。关系拓扑图，顾名思义，是有具体的关系存在的点，具有向量指向特点。那么就要求数据具备和的属性。思路是这样的，首先描绘物体（关系点），再者是描绘连接关系点的连线。简单效果图如上图，共4层类型，同一层为同一个类型，分别是：运维人员、数据库、应用、用户，连接线为起始到终点的指向关系2.测
2022-11-15 15:06:16
7991
原创 vue项目中实际封装DateRangePicker组件使用
日期选择器在实际使用中，可能会要求默认固定日期、回显日期或者是时间固定点（00:00:00到23:59:59）综上所述，可见当前日期范围选择器默认时间是今天设置时间点固定为起始的00:00:00到23:59:59快捷项也设置成当前模式，自定义起始和结束时间文案当前的获取时间格式为时间戳形式。
2022-11-11 15:58:09
1937
2
原创 基于el-table-infinite-scroll实现表格数据无限加载的功能
当表格组件的翻页不想局限通用的Pagination，也可结合无限滚动进行浏览加载数据主要是注意的绑定方法load的使用，以及disabled和有问题欢迎提问和私信，觉得有帮助的话，给个赞或者关注吧~
2022-11-11 15:30:22
7432
2
原创 Element中table组件根据属性合并行数据
在实际开发中，要求使用elementUI的table组件对表格数据上下行相邻相同的数据进行合并，在elem官网上查看到是有对应的组件和合并方法。其中官网的objectSpanMethod比较简单，根据每隔两行就合并两行的数据，并不能满足实际的需求，下面直接上代码。1、首先需要生成一个与行数相同的数组，通过判断上下数据是否相同，记录每一行设置的合并数。这里就是判断当前元素与上一个元素是否相同。
2022-09-27 19:12:59
902
原创 vue项目实现Echarts在label中获取点击事件
此时针对label进行点击后，还是无法获取点击事件，经检查，是未对yAxis添加label的event事件。在click点击事件内，可以打印出当前点击信息。应对需要点击label设置的属性添加。，此时label可进行点击。
2022-09-26 16:27:00
2575
原创 vue自定义指令添加跟随鼠标光标提示框v-tooltip
通过监听鼠标移入移出的mouse方法，设置浮层样式与出现时机。2、div显示dom标签v-tooltip。此时运行后，出现浮层。
2022-09-26 16:17:36
2508
原创 解决vCharts不兼容Echarts5+版本问题
根据报错信息来看，v-charts内所含子依赖"echarts-liquidfill"、"echarts-wordcloud"版本较低（elem团队已经4年未更新vcharts），再根据npm官网进行查询，发现最新echarts5.3.3关于此两子依赖为高版本，故不能兼容，此时只需要将此俩子依赖全部固定版本升级最新即可（根据echarts版本）解决了问题。若不需要考虑Echarts版本高低的问题，可以对Echarts进行降级使用。如果看不懂resolutions的，建议看我之前的博客。
2022-09-22 11:43:30
3078
原创 Echats关系图les-miserables的图表详细解析（和弦图）（二）
和弦图在实际运用中还是不可或缺的，结合echarts插件进行使用，可以提高工作效率，话不多说，上代码。
2022-08-23 15:44:54
1342
原创 隐藏element-ui中tree懒加载叶子节点checkbox（分页懒加载效果）
css样式如下：由于属性是isleaf，所以lazy状态下叶子节点不会有加载目录符号，但此时，有个禁用复选框，现在只需要对它设置样式即可3. 分页懒加载实现功能也比较简单，可以复写tree树自带的load方法，load方法内携带两个返回参数，一个是node，一个是resolve，即懒加载数据必须是通过resolve就是return 将数据带回代码内有一点需要注意，即每次查询接口的时候，和后台约定的规则是：不包含分页，需要传值两个参数，一个是parent，即当前节点的上一级所有层级拼接，另一个是
2022-06-22 14:08:37
1256
原创 vue项目实现Echarts在tooltip中获取点击事件
此时针对tooltip设置了点击事件，formatter配置了两个点击事件，可自行设置样式todoSthLook方法内绑定了方法回调，先获取当前class对象，获取后进行点击事件监听，即可解决问题如果觉得还不错的话，给个关注或者点赞吧！...
2022-06-20 18:35:07
2807
3
原创 git提交忽略文件名称大小写问题解决
1、git在提交代码时，会忽略文件名称大小写，导致本地代码与远程代码不一致，此时可利用终端指令来检查下git congfig --get core.ignorecase2、若为true值则代表当前是忽略的，此时需要将当前项目提交设置为falsegit config core.ignorecase false3、设置完成后，进行git status可发现当前文件名称差异显示出来了；若是提交后进行的设置，可进入本地代码，将文件名改为test2（原文件名TEST），待提交后，再修改为test接口.
2022-03-29 09:31:42
5787
2
原创 解决d3.event在v7版本无效影响zoom拖拽缩放问题
近期由于代码内关于d3版本的更新，由原来的v3 v4更新值v7.0.0，导致原有关于d3的波点图内zoom方法的拖拽缩放、tooltip提示框问题开始报错，即d3.event数据废弃了1、设置d3图形的缩放配置时，在d3.event.transform.x中，即提示Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'x')此时可在zoom方法内，使用匿名函数获取当前参数current，参数内即
2022-03-02 13:20:12
2654
1
原创 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
7166
原创 使用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
9926
2
原创 Module build failed: Error: Node Sass version 6.0.1 is incompatible with ^4.0.0.
vue内写入sass样式后，npm run dev 后 报错提示“Module build failed: Error: Node Sass version 6.0.1 is incompatible with ^4.0.0.”原因是 当前node-sass版本过高直接卸载node-sass后重新安装低版本npm uninstall node-sassnpm install [email protected]重新启动后，界面恢复正常...
2021-08-18 12:51:24
1886
原创 解决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
1729
1
原创 react引入antd按需加载警告“You are using a whole package of antd, please use...“
react引入antd后报出黄色警告You are using a whole package of antd, please use https://www.npmjs.com/package/babel-plugin-import此时需要引入babel-plugin-import按需加载npm install babel-plugin-import --save-dev新建文件babelrc{ "plugins": [ ["import", { "libraryNa..
2021-01-27 10:08:20
4486
5
原创 Vue与Unity 网页插件Embedded Browser交互通信
在运用中，需要将web导入到unity中使用（大屏端交互需求），此篇文章以unity网页插件Embedded Browser监听Web方法获取数据为例进行阐述。Web端：vue中新建需要导入渲染的界面，监听方法统一为getButtonClick,设定需求为web通过点击事件clickButton触发 <button type="primary" style="margin: 20px auto;" @click="clickButton">点击按钮</button>点
2021-01-21 14:07:09
1870
1
原创 安装指定版本nodejs
1、控制nodejs版本可用模块n来管理，首先安装模块nnpm install -g n2、将node升级到稳定版本n stable3、指定版本安装noden v8.16.0
2021-01-20 15:06:42
2115
原创 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
1566
原创 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
708
1
原创 Vue与UnityWebGl交互通信（vue-unity-webgl的使用）
最近项目需要在可视化界面内添加unity3D文件并进行交互展示效果，特此整理如下：1.Vue 中自带 Unity3D的依赖包 vue-unity-webgl，进行安装npm install vue-unity-webgl --save//或使用 yarn add vue-unity-webgl --save2.将unity导出文件放在vue项目本地文件static下3.添加相应组件信息<template> <div> <unity src="../../
2020-10-29 17:49:27
9440
29
原创 GitHub 私人private仓库添加成员（协作者Collaborators）
选择当前私有项目，点击setting，点击Manage Access，即可通过输入协作者的邮箱帐号或用户名，进行点击invite邀请按钮，并将邀请发送给该协作者，同意后，即可加入到当前项目中。
2020-09-22 11:10:07
6101
原创 安装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
2801
原创 nodejs访问mysql报错：{ Error: ER_NOT_SUPPORTED_AUTH_MODE: Client does not support authentication protocol
1.当使用nodejs连接mysql，调用接口时，报错throw err; // Rethrow non-MySQL errors；可能是sql语句没写对，或者是nodejs取参数异常（没有那个参数字段），检查一遍修改即可2.当出现{ Error: ER_NOT_SUPPORTED_AUTH_MODE: Client does not support authentication protocol requested by server; consider upgrading MySQL client这
2020-07-14 13:45:45
1581
2
原创 解决macOS系统向日葵远控无法被远程控制问题
向日葵远控软件除了在mac电脑中使用安全隐私内的录屏功能添入权限，还需添加另外一个步骤1.正常配置中，在设置 - 安全性与隐私 内，将屏幕录制、文件和文件夹、完全的磁盘访问权限 全部添入向日葵客户端2.点击辅助功能，解锁按钮后，点击左下角的 加号，进行选择程序通过文件访达command + shift +G 打开，输入 /Applications/SunloginClient.app/Contents/Helpers/SunloginClient_Desktop ，找到它，并点击打开。确保向日
2020-07-10 16:05:44
112664
26
转载 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
14136
原创 界面报错Uncaught (in promise) DOMException: Failed to execute ‘open‘ on ‘XMLHttpRequest‘: Invalid URL
url写法不对，格式应为http://xxxxxxxx
2020-03-31 01:57:58
2999
原创 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
5333
1
原创 warning package.json: No license field报错
只需要在package.json内对license添加“ISC”值即可 "license": "ISC",再次执行无误
2020-03-27 17:15:28
17420
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
1963
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
1286
原创 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
2591
原创 Eslint的报错信息Module Error (from ./node_modules/[email protected]@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
29268
1
原创 波涛滚动动画效果css样式
波涛效果图，入下图所示，实际动画效果是利用css animate不断左右平移波浪图，使其看起来像是在翻滚1.动画css，此处用了三个波浪图，用两个动画效果进行交替移动展现 @keyframes trains{ from{background-position:0} to{background-position:-100% 0} } @keyframes trains2{ fr...
2020-03-18 12:58:25
471
原创 css设置字母数字字体库信息
引入字母数字字体库，当前展示效果如下：对于css的引入font-face设置@font-face { font-family: "Source Sans Pro"; src: local("Source Sans Pro"), url("/fonts/Source_Sans_Pro/SourceSansPro-Regular.ttf");}@font-face { font-...
2020-03-17 15:57:25
3784
原创 HTML中选择器select下拉框内容显示不全的解决办法
1.select选择框内的value值数据过长而显示不全，从而影响界面显示2.此时需要的需求展示是，鼠标置于其上，能够全部显示出来可对select设置title后即可完成新效果截图为：...
2020-03-16 15:37:43
3009
1
gulpfile.js前端自动化构建配置文件
2020-03-19
MUI框架中监听干预怎么处理
2017-06-13
MUI框架中功能效果的class样式修改问题
2017-06-07
TA创建的收藏夹 TA关注的收藏夹
TA关注的人