前端
文章平均质量分 51
万德佛
个人笔记与经验!!仅供参考
展开
-
NODEJS安装及环境配置 -> 创建vue项目
**由于在开发vue项目时遇到了node-sass安装不上的问题,所以重新配置了一下node环境,也严格按照对应版本号安装。**1.nodeJS版本 10.23.0 (vue项目中sass4.0版本号对应) 下载路径: https://nodejs.org/zh-cn/download/releases/![在这里插入图片描述](https://img-blog.csdnimg.cn/7c7485489ee4416ebe8ddbcd4eb09d0b.png?x-oss-process=image/w原创 2021-11-02 11:27:10 · 1681 阅读 · 0 评论 -
原生JS前端 导出 流文件
//js 前端导出流文件//utils.js文件// method: 请求类型,url: 请求地址,data: 参数function fileDownload(method, url, data) { //可删除 遮罩层开始 这里是遮罩层,我用的layer的,如果你没有用到layer就用你的遮罩层效果 ,否则你的会报错 var myMsg = layer.msg('Please wait.....', { icon: 16, time: -1, s原创 2021-08-04 14:58:40 · 978 阅读 · 0 评论 -
Ant Design Vue前端UI框架 日期控件选择季度
Ant Design Vue 日期控件选季度原创 2024-07-31 10:30:29 · 277 阅读 · 0 评论 -
原生JavaScript,根据后端返回扁平JSON动态【动态列头、动态数据】生成表格数据
JS动态生成表格原创 2024-03-08 14:28:43 · 1029 阅读 · 0 评论 -
JavaScript 模拟点击 下载文件
【代码】JavaScript 模拟点击 下载文件。原创 2023-12-14 09:12:37 · 486 阅读 · 0 评论 -
js数组对象 模糊查找 指定 匹配字段内容
JavaScript模糊搜索原创 2023-07-18 15:15:12 · 807 阅读 · 0 评论 -
VUE+Typescript(TSX)使用函数防抖、函数节流
【代码】VUE+TSX使用函数防抖、函数节流。原创 2023-02-09 15:28:57 · 491 阅读 · 1 评论 -
Echars柱状图嵌套 居中对齐 柱子占比宽度由大到小嵌套包含 并用小箭头标记当前产出位置
效果图:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Echars柱状图嵌套 </title> <style type="text/css"> body{ height: 100%; width: 100%; background-color: #0a3b76; } </style>原创 2022-04-28 08:45:03 · 1288 阅读 · 0 评论 -
JQuery定时滚动浏览Echars视图
以下仅供参考~<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Echars视图滚动浏览Demo</title> <style type="text/css"> body { background-color: #0f375f; } .roll-box { width: 100%; height:原创 2022-04-19 13:12:06 · 411 阅读 · 0 评论 -
点击某个标签 跳到指定 ID 内容DIV块
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>触发点击事件跳到指定ID内容块</title> <style type="text/css"> .block01,.block02,.block03{ display: flex; justify-content: center; align-items: cen原创 2022-04-18 19:54:12 · 549 阅读 · 0 评论 -
Echars 热力图 自定义颜色
以下仅供参考~注意: 一定要注意echars版本需要实现的效果是: target 、 Safe Time 单独指定颜色,超时时间数量根据条件指定对应颜色效果图:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>热力图 自定义颜色</title> <style type="text/css"> body { backg原创 2022-04-18 14:11:53 · 4278 阅读 · 0 评论 -
uni-app 开发微信小程序项目运行时报错 Error: tourist appid
以下是uni-app小程序开发项目:微信小程序开发工具中错误提示:解决措施(示例开发工具:HBuilder X ):找到你项目中的JSON配置文件 --> 找到微信小程序配置 --> 输入微信小程序 appid -> 重新运行...原创 2022-04-06 13:24:29 · 4864 阅读 · 0 评论 -
后端返回JSON数据格式,前端根据JSON数据 导出.CSV文件
以下仅供参考~效果图/** * 前端JSON导出CSV文件 * @param {Object} dataObj 对象 * title:["名称"], * jsonKey:["Name"],//键值对 key * data: JSON数据, * fileName: 文件名 */function exportCvs(dataObj) { var title = dataObj.title; var jsonKey = dataObj.jsonKey; var data = dataO原创 2022-03-30 18:31:33 · 1413 阅读 · 2 评论 -
Echars控制图例全选全不选-简单案例
以下仅供参考~效果图:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script> <sc原创 2022-02-25 15:56:35 · 844 阅读 · 0 评论 -
JavaScript 间隔5s 依次打印数组中的值,无限循环执行
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>间隔打印</title> </head> <body> 定时遍历数组值,间隔打印 [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] <div id="text"></div> </body> <script typ原创 2021-12-25 18:36:34 · 1206 阅读 · 0 评论 -
百度Echarts设置markPoint展示样式
以下仅供参考~效果图:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="https://lib.baomitu.com/echarts/4.7.0/echarts.js"></script> </h原创 2021-11-16 14:11:06 · 6483 阅读 · 0 评论 -
Qiankun简单基座搭建
#基础环境(https://blog.csdn.net/qq_39251440/article/details/121096727?spm=1001.2014.3001.5501)1.nodeJS版本 10.23.0 (vue项目中sass4.0版本号对应)2.安装包管理工具:npm版本6.14.8/cnpm(npm install -g cnpm --registry=https://registry.npm.taobao.org)/yarn(npm install yarn -g)3.安装expr原创 2021-11-03 08:46:23 · 516 阅读 · 0 评论 -
HTML内容无缝连接滚动效果
以下仅供参考~<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- 父容器 --> <div id="marqueeA" style="width: 500px;height: 100px;overflow: scroll;"> <原创 2021-08-23 20:41:58 · 683 阅读 · 0 评论 -
Echars 堆叠柱状图lable显示,但Tooltip保持数显示数量
以下仅供参考~<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="https://lib.baomitu.com/echarts/4.7.0/echarts.js"></script> </head&g原创 2021-08-16 20:36:40 · 623 阅读 · 0 评论 -
Echars 折线图 自动向右平移显示数据(数据量大的时候适应)
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Echars 折线图 自动向右平移显示数据(数据量大的时候适应)</title> </head> <body> <!-- Dom容器 --> <div id="myCharts" style="width: 600px;height:400px;">.原创 2021-08-16 20:27:21 · 2329 阅读 · 0 评论 -
Echars 折线图+仪表盘
以下内容仅供参考~<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Echars 折线图+仪表盘</title> </head> <body> <div id="echarsID" style="height: 600px;"></div> </body> <script sr原创 2021-08-16 19:53:04 · 527 阅读 · 0 评论 -
Echarts堆叠图 Tooltip提示信息 数量+百分比 显示
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>堆叠图</title> </head> <body> <div id="container" style="width:100%;height:600px;"></div> <!--其他样式自行加上即可--> ...原创 2020-05-13 17:08:42 · 4155 阅读 · 0 评论 -
Echars横向柱状图,xAxis名称过长的情况下可以使用
Echars横向柱状图,xAxis过长导致图形挤压变形,由于有时候一些莫名其妙的情况导致echars02的那个xAxis显示不出来的情况,所以准备了echars01,是由官网案例直接改造的,以下内容,仅供参考~效果图一:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Echars横向柱状图</title> <style type="text/原创 2021-08-09 09:19:27 · 696 阅读 · 0 评论 -
由于ecahrs热力图不知道怎么改造 yAxis带展开功能 ,所以用表格仿echars热力图仿yAxis可展开收缩
业务简介:用热力图显示 合并制程展示制程下所有机台、线别的OEE值( OEEValue = (av) * (pf) * (yield) * 100) )写的一个小案例,代码写的挺烂的,属性名取得也不标准,请博友多多指点,以下内容仅供参考~HTML:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</titl...原创 2021-04-29 20:15:57 · 230 阅读 · 0 评论 -
babel转码器的使用
我所使用的编辑器: Visual Studio Code 简称 "VS Code"文件目录示意图:操作步骤:注意: 以下操作,在 nodeJS 基础上操作并完成,所以在这之前你需要确认是否安装与配置了nodejs1.npm项目初始化操作(1)新建文件夹 babelDemo(2)cmd 进入当前目录下(如果是用的vscode编辑器就直接打开终端输入) npm init -y 生成package.json,类似于后端pom.xml文件2.babel使用(1)babel是.原创 2021-03-01 14:59:01 · 389 阅读 · 0 评论 -
前端正则表达式指定邮箱域名匹配
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>指定邮箱匹配</title> </head> <body> <p>以下为指定邮箱匹配,@后指定字符<.原创 2021-02-25 16:55:50 · 1004 阅读 · 0 评论 -
ecahrs 柱状图+饼图+点击事件
饼图可根据个人需求来删减,以下是根据官网案例修改,仅供参考~<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>混合图型双饼图,且自定义是否显示柱状图legend,带点击事件</title> </head> <body> <div id="echarsID" style="height: 400px;"><原创 2021-01-29 16:06:07 · 863 阅读 · 0 评论 -
Vue项目报错: Invalid prop: type check failed for prop “index“. Expected String with value “1“, got Numbe
加载菜单的时候报Invalid prop: type check failed for prop "index". Expected String with value "1", got Number with value 1.错误,原因是el-submenu里面的index为number类型,要改为字符串类型。控制台错误信息:解决方法:...原创 2021-01-28 17:18:33 · 1363 阅读 · 0 评论 -
echarts热力图点击事件带自定义参数
echarts热力图点击事件带自定义参数,根据官网示例修改了一下,仅供参考~<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>热力图</title> </head> <body> <div id="echarsID" style="height: 400px;"></div> </bod.原创 2021-01-28 15:49:44 · 2489 阅读 · 6 评论 -
Vue项目报错: Uncaught TypeError: vuex__WEBPACK_IMPORTED_MODULE_1__.default.store is not a constructor
此错误是由于Vuex创建Store的时候写成了小写S才导致报错。控制台错误信息:解决方法:原创 2021-01-28 11:11:57 · 9935 阅读 · 11 评论 -
日期往前推N天
注意事项: 请记得引入jquery脚本文件<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>日期往前推N天</title> </head> <body> <div id="show"> </div> </body> <script src="js/jquery-.原创 2021-01-06 16:50:27 · 546 阅读 · 0 评论 -
小程序 轮播图之自动适应宽高度
以微信小程序为例:wxml文件:<!-- 1.轮播图外层容器 swiper 2.每一个轮播项 swiper-item 3.swiper标签 存在默认样式 1.width 100% 2.height 150px image 存在默认宽度和高度 320* 240 3.swiper 高度无法实现由内容撑开 4.先找出来 原图的宽度和高度 等比例 给swiper 定 宽度和高度 原图的宽度和高度 750 x 300 swiper 宽度 /.原创 2021-01-05 18:46:56 · 3331 阅读 · 3 评论 -
微信小程序开发,导入样式时报错,但在wxss里按住Ctr,路径是可以点击访问的
控制台打印错误如下 [ WXSS 文件编译错误] ./pages/dome04/dome04.wxss File not found: ../../styles/common.wxss解决方法: 在控制台输入openVendor() 后,会打开一个文件夹,删掉里面的wcsc.exe文件,重启编译或重启开发工具即可~图片:...原创 2021-01-05 16:09:33 · 761 阅读 · 0 评论 -
HTML动态拼接表头动态匹配表列,并导出Excel
注意: 1.请记得引入js文件; 2.仅供参考,可自行优化,如有错误之处,还请多多指教~.<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> table { width: 80%; } table tr th,td{ border: 1px ...原创 2020-12-24 10:41:10 · 763 阅读 · 0 评论 -
java后端导出.csv(excel文件也可以,但需要设置一下类型)文件返回文件流,前端为了避免用户疯狂点击下载,添加遮盖屏
//下载文件 function excleDownload(id, stauts) { //方案一 //window.location.href = "/web/report/snByInfoExcel.cyl?gpId="+ id +"&stauts="+ stauts; //方案二 带遮盖屏 //我这里使用的是layer.min.js的弹窗,注意如果要使用记得引入遮盖js文件 .原创 2020-12-10 20:27:29 · 717 阅读 · 0 评论 -
AngularJS事件指令(个人笔记)
温馨提示:(1)记得引入angular.min.js(2)按F12打开控制台,选择console,可以查看事件起到作用且成功打印<!DOCTYPE html><html ng-app="myApp"> <head> <meta charset="utf-8"> <title></title> <script src="js/angular.min.js" type="text/javascript".原创 2020-11-05 10:42:56 · 386 阅读 · 0 评论 -
windows系统安装SASS的步骤+Could not find a valid gem ‘compass‘ (>= 0) in any repository compass安装失败解决方案
windows系统安装SASS的步骤 地址:https://www.cnblogs.com/lee90/p/7248497.htmlCould not find a valid gem 'compass' (>= 0) in any repository compass安装失败解决方案 地址:https://blog.csdn.net/dm1314oooooooo/article/details/72956877...原创 2020-10-30 11:06:36 · 269 阅读 · 0 评论 -
由于页面定时器多次调用Echars图表导致系统页面报内存不足的错误(喔唷,崩溃啦! 错误代码:Out of Memory)解决方案
页面定时刷新情况下:1.初始化echarts前先判断echarts对象是否存在,防止重复初始化:var myChart = echarts.getInstanceByDom(document.getElementById(echarsName));if (myChart === undefined) { myChart = echarts.init(document.getElementById(echarsName));}2.构建echarts时先清除原先数据,释放内存:myChart.原创 2020-09-05 15:03:04 · 4844 阅读 · 4 评论 -
MUI页面带参跳转,提交数据后带参回退给父页面并触发函数
父页面a.html 的js<script src="../js/mui.min.js"></script><script src="../js/mui.view.js "></script><script src="../js/app.js"></script><script> mui.init({ swipeBack: false }); //点击li列表行触发 $('#nav_i.原创 2020-07-30 09:05:10 · 416 阅读 · 0 评论 -
前端架构应该考虑哪些方面?
https://www.jianshu.com/p/b84677648ad6转载 2020-07-13 08:34:12 · 937 阅读 · 0 评论