![](https://img-blog.csdnimg.cn/20190918135101160.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
前端学习记录笔记
记录工作中学习到的内容
hongsir_12
觉悟者,恒幸福
展开
-
Vue前进刷新,后退缓存
vue中要实现的一个场景就是:1.从搜索页面 -》 搜索结果列表页时,搜索结果列表页要重新获取数据。2.搜索结果列表页面 -》点击进入详情页 -》 再从详情页返回结果列表页,要保存上次已经加载的数据和自动还原上次的浏览位置。需要用到缓存组件转载 2022-12-09 14:23:23 · 2001 阅读 · 1 评论 -
封装elementUI消息提示弹框
封装elementUI消息提示弹框原创 2022-08-03 14:49:53 · 1003 阅读 · 0 评论 -
给v-html绑定事件
给需要解析成html的标签内容加上自定义属性:通过获取dataset触发事件:原创 2022-07-07 10:01:51 · 1352 阅读 · 0 评论 -
记录简单扁平数据结构转成树结构练习
let arr = [ {id: 1, name: '部门1', pid: 0}, {id: 2, name: '部门2', pid: 1}, {id: 3, name: '部门3', pid: 1}, {id: 4, name: '部门4', pid: 3}, {id: 5, name: '部门5', pid: 4},]// 输出结果[ { "id": 1, "name": "部门1", "pid": 0原创 2022-05-20 16:59:17 · 302 阅读 · 0 评论 -
记录导出el表格为Excel文件
import FileSaver from "file-saver";import XLSX from "xlsx";/** * @param * 导出表格 * 目前只适用于el-table * @arg 参数xlsxName 导出文件名 string * @arg 参数className 类名 string * @arg 参数widths array */ exportExcel(xlsxName, className, w原创 2022-05-05 09:02:05 · 498 阅读 · 1 评论 -
多步骤动画表单
index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <.原创 2022-04-03 13:35:14 · 608 阅读 · 0 评论 -
Vue中将绑定的带参事件回调函数转换为节流或者防抖
<uni-number-box :value="item.goodsNum" @change="debounceHandleChangeGoodsNum($event,item.cartsRid)"></uni-number-box>computed:{ debounceHandleChangeGoodsNum(){ return _.debounce(this.changeGoodsNum,200) } },changeGoodsNum(e,cart原创 2022-03-08 18:46:33 · 635 阅读 · 0 评论 -
JS执行机制学习
掘金文章“ 这一次,彻底弄懂 JavaScript 执行机制”和“浏览器多线程和JS单线程”学习记录浏览器内核是多线程的javascript是一门单线程语言Event Loop是javascript的执行机制事件循环Event Loop同步和异步任务分别进入不同的执行"场所",同步的进入主线程,异步的进入Event Table并注册函数。当指定的事情完成时,Event Table会将这个函数移入Event Queue。主线程内的任务执行完毕为空,会去Event Queue读取对应的.原创 2022-02-28 15:01:48 · 335 阅读 · 0 评论 -
布尔类型比较与转换
console.log(([])?true:false); //trueconsole.log(([]==false?true:false)); //trueconsole.log(({}==false)?true:false) //falseBoolean([]) //true// 布尔类型里只有这几参数个返回false,其它都为trueBoolean(undefined) // falseBoolean(null) // false Boolean(0) // false原创 2022-02-28 00:17:28 · 503 阅读 · 0 评论 -
给uni-app的uni-icons组件添加自定义图标(2022)
一、找到uniicons.ttf字体文件二、在线字体编辑器中打开uniicons.ttf在线字体编辑器链接三、去iconfont官网下载svg格式的图标四、在线字体编辑器上方工具栏点击导入svg然后就可以看到新增一个从iconfont下载的图标了。五、(可选)点击新增图标右上角编辑进入编辑页面将图标大小调整为跟默认图标差不多后点击保存,然后退出编辑。六、选中新增图标后点击上方工具栏“设置代码点”七、上方工具栏中选择导出ttf后并替换原有的uniicons.ttf八、修改文件原创 2022-01-26 14:15:54 · 3286 阅读 · 2 评论 -
封装uni-app微信小程序request请求
class Request { constructor(options = {}) { // 请求的根路径 this.baseUrl = options.baseUrl || '' // 请求的 url 地址 this.url = options.url || '' // 请求方式 this.method = 'GET' // 请求的参数对象 this.data = null // header 请求头 this.heade原创 2022-01-23 17:34:35 · 1169 阅读 · 0 评论 -
echart堆叠柱状图,顶部显示堆叠柱总数的技巧
有这么些堆叠柱状图,想要在每个堆叠柱的顶端显示总数,这时我们可以在series里面再push一个bar,这个bar的值为前面柱子数据的总数和,因此高度是等高的。记得这个新push的bar的stack属性值是和前面相同同stack的堆叠柱是不同的值,然后设置z为-1,barGap为’-100%’,这样就能够把总计的柱子给隐藏到堆叠柱的后面了。代码//各子公司不同设备工单分布统计表let data = [ {公司: '寿险',硬件设备: 5,操作系统: 15,数据库中间件: 25,安全: 5,.原创 2022-01-20 15:16:33 · 11953 阅读 · 2 评论 -
工作记录——数组数据格式转换
// 现有以下数据格式表,按公司划分,对各公司的设备进行分类统计数量let data = [ {公司: '寿险',硬件设备: 5,操作系统: 15,数据库中间件: 25,安全: 5,网络: 9}, {公司: '健康险',硬件设备: 7,操作系统: 13,数据库中间件: 5,安全: 21,网络: 17}, {公司: '南中心',硬件设备: 18,操作系统: 28,数据库中间件: 5,安全: 12,网络: 17}, {公司: '科技运营部',硬件设备: 12,操作系统: 13,数据库中间件:原创 2022-01-20 15:03:03 · 419 阅读 · 0 评论 -
记录moment.js的使用
moment.js中文网main.js中// 引入moment时间库import moment from 'moment'// 将全局的moment对象挂载到vue的原型对象上Vue.prototype.$moment = moment使用this.$moment.locale('zh-cn'); //更改语言环境//本周四日期let currentWeekThursday = this.$moment() .startOf('week') .wee.原创 2022-01-20 10:40:11 · 418 阅读 · 0 评论 -
js对页面进行动态编译以及生成导出word文件
ace编译器安装npm install ace-builds --save-dev引入并挂载在main.js中// 引入ace编辑器组件import ace from 'ace-builds'Vue.use(ace)使用创建编辑器组件<template> <div class="ace-container"> <div class="toolbar" @mousedown="toolbarDown" @mouseup="toolbarUp"&g.原创 2022-01-19 13:26:54 · 1610 阅读 · 0 评论 -
工作记录——IP格式化相关操作
// 要求:// 将ip分开,ip属性只存放一个ip,其他ip放到另外一个属性中let obj = [ { ip: '192.168.19.1-5' }, { ip: '192.168.20.1,192.168.9.10' }, { ip: '192.168.20.13' }, { ip: '192.168.20.16,192.168.19.2-4' }]obj.forEach(e => { // 先将ip对象字符串按逗号分割转化为数组 let ip原创 2022-01-13 19:39:05 · 254 阅读 · 0 评论 -
input内容禁止全为空格——正则
this.$messageBox.prompt('请输入配置名称', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', inputPattern: /^(?!(\s+$))/, inputErrorMessage: '配置名称不能为空' })// /^(?!(\s+$))/ //允许input的输入内容以空格开头、以空格结尾、中间也可以有空格原创 2022-01-11 09:16:11 · 1942 阅读 · 0 评论 -
js修改对象属性名
代码// 更改对象属性名// 第一个参数为要更改的对象,第二个参数为属性名映射数组// 如将属性名为 “日期” 更改为 "date" : [{ key: '日期', value: 'date' }]export function copyTransFunc (obj, typeArr) { let result; let toString = Object.prototype.toString; if (toString.call (obj) === '[object Arr原创 2021-12-24 14:24:08 · 7250 阅读 · 0 评论 -
js将json转换为Excel并导出
安装XLSXnpm i xlsx创建json2Excel.js工具函数并导出内容代码引用自思否文章json转Excel且有些许修改import XLSX from 'xlsx'function changeData(s){ //如果存在ArrayBuffer对象(es6)最好采用该对象 if(typeof ArrayBuffer !== 'undefined'){ //1.创建一个字节长度为s.length的内存区域 let buf = new Array原创 2021-12-23 09:46:29 · 3045 阅读 · 1 评论 -
js比较俩个对象数组筛选新增对象
let newArr = [ {date:"2021-12-12",device:"ASD1",type:"SAS"}, {date:"2021-12-13",device:"ASD2",type:"SSD"}, {date:"2021-12-14",device:"ASD3",type:"CPU"}, {date:"2021-12-15",device:"ASD1",type:"SAS"}, {date:"2021-12-15",device:"ASD1",type原创 2021-12-23 08:59:06 · 534 阅读 · 0 评论 -
Three.js平面接收不到阴影
首先确认渲染器有无开启阴影贴图,默认是false// 创建渲染器var renderer = new THREE.WebGLRenderer()// 设置渲染物体阴影renderer.shadowMap.enabled = true然后确认物体材质是否可受光照影响// 创建地面几何体const planeGeometry = new THREE.PlaneGeometry(60,20) // 创建地面材质const planeMaterial = new THREE.MeshLam原创 2021-11-23 10:45:00 · 2719 阅读 · 4 评论 -
js冒泡排序和数组去重
冒泡排序let arr = [2,3,20, 4, 8, 5, 1, 9, 3, 10, 20, 6,8]Array.prototype.bubbleSort = function(){ for(let i = 0;i<this.length;i++){ let flag = true for(let j = 0;j<this.length-i-1;j++){ if(this[j]>this[j+1]){原创 2021-10-30 23:22:44 · 209 阅读 · 0 评论 -
用Vue实现简单的echarts在线编辑器
用Vue实现简单的echarts在线编辑器简述思路效果图页面分布main.js的配置其中ace编辑器的配置按钮功能实现思路具体实现图表初始化图表组件传给父组件option配置对象父组件传给编辑器组件scriptStr字符串编辑器组件编辑区显示option配置内容编辑器点击运行按钮向图表组件传递编辑器内容字符串根据新的图表配置重新渲染图表拓展上传excel并获取表格数据简述昨天试着用纯html制作一个echarts在线编辑器,今天试着用vue的方式实现。用html制作简单的echarts编辑器思路效原创 2021-10-26 17:32:11 · 5094 阅读 · 6 评论 -
用aceEditor和new Function制作简单的echarts编辑器
效果图先引入jQuery、echarts和ace.js<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script><script src="https://cdn.jsdelivr.net/npm/echarts@5.2.1/dist/echarts.min.js"></script><script src="https://cdn.bootcd原创 2021-10-25 10:39:22 · 1438 阅读 · 0 评论 -
初试vue写echarts可视化布局
初试vue写echarts可视化布局项目初始化创建全局样式表并导入iconfont字体文件全局挂载echarts对象初始化ScreenPage主体视图页面和各个组件配置路由主屏幕的布局分析期望最终效果图修改全局样式global.less页面布局分析@jiaminghi/data-view大屏数据可视化开源组件的使用安装并引入边框组件的使用效果图如何使用echarts组件template代码生成echarts图表为了更方便操作echarts,将echarts的option配置进行拆分项目初始化创建全局样式原创 2021-10-15 15:22:58 · 1438 阅读 · 1 评论 -
echarts使用数据集分别描绘两种类型图
echarts使用数据集分别描绘两种类型图使用数据集初尝试option详细配置项和数据数据集dataset设置指定数据所要展示的图表类型完整js代码使用数据集根据echarts官网使用手册,数据集(dataset)是专门用来管理数据的组件。虽然每个系列都可以在 series.data 中设置数据,但是从 ECharts4 支持 数据集 开始,更推荐使用 数据集 来管理数据。因为这样,数据可以被多个组件复用,也方便进行 “数据和其他配置” 分离的配置风格。初尝试要求在同一页面中摆放两种图表:opt原创 2021-10-13 10:41:24 · 1463 阅读 · 0 评论