- 博客(22)
- 收藏
- 关注
原创 TypeScript学习笔记归纳(先做基础梳理,后期不断丰满,持续更新ing)
一、TypeScript是什么?TypeScript 是一种由 Microsoft 开发的开源语言。TypeScript与JavaScript有着不同寻常的关系。它是 JavaScript 的一个超集,添加了可选的静态类型和基于类的面向对象编程。TypeScript 提供了JavaScript的所有功能,并且额外增加了:类型系统。简单可以概述为:TypeScript(简称:TS)是JavaScript(简称:JS)的超集(JS 有的 TS 都有);Type。
2023-12-23 17:12:40 1446 1
原创 JavaScript + setInterval实现简易数据轮播效果
JavaScript + setInterval实现简易数据轮播效果 枚举数据
2023-11-15 22:00:00 618
原创 前端实现定时任务,每天定时更新数据 “ setInterval + new Date()(或moment.js)“
每天定时更新系统数据,前端通过new Date() 或者moment.js获取系统时间配合setInterval来实现定时任务效果
2023-11-15 21:00:00 1127
原创 前端实现模拟彩虹桥:echarts仪表盘 => 多层级仪表盘进度 -彩虹桥 - 自定义添加圆环样式和仪表进度比例展示
前端实现模拟彩虹桥设计稿想到的是使用Ant Design中的进度条实现,但是吧,圆形的,还多层级,好想没有遇到过这种。处于之前搞过一个 “最近在项目开发中遇到一个,觉得还蛮有意思的设计,实现类似彩虹🌈一样的多层级的进度展示,在这记录一下(注意:下方有。具体的一些配置参数根据自己的项目需求,可以去echarts官网查阅。,不同的颜色不同的层级代表着不动的数据项进度,清晰又直观。看看,这种带进度比例的echarts是不是很像个。考虑层级,通过遍历处理配置数据。废话不多说,直接上主体代码(完整代码及效果在。
2023-06-03 08:00:00 978
原创 前端实现动态切换主题色-使用 css/less 动态更换主题颜色(换肤功能)或通过单击更改背景颜色
前端实现动态切换主题色-使用 css/less 动态更换主题颜色(换肤功能)或通过单击更改背景颜色CSS中原生变量“--”和var()使用纯CSS控件切换主题颜色或通过单击更改背景颜色,
2023-04-16 11:42:25 5824 1
原创 给Vscode配置ESlint语法检查 — ESLint 插件自动格式化设置(实现Ctrl+S 按照ESLint规则自动格式化代码)
实现按照ESLintESLint(读取ESLint配置文件进行语法检测)—主要Prettier(代码格式化工具)vetur vue代码高亮本文主要通过VScode中的ESLint插件进行配置,代码规范是很重要的。这样做不仅可以很大程度地避免基本语法错误,也保证了代码的可读性。这里使用的开发工具是vscode,配合eslint来对项目进行格式校验,本文vue项目添加配置。给Vscode配置ESlint语法检查;ESLint 插件自动格式化设置(实现Ctrl+S 按照ESLint规则自动格式化代码)......
2022-07-28 18:06:20 18225 1
原创 javaScript中Number()对象的toFixed()方法返回的数据类型原来一直是string字符串……‘ 2 ‘>‘ 11 ‘ == true ?JS的隐式类型转换?
javaScript中Number()函数的toFixed()方法返回的数据类型原来一直是string字符串……' 2 '>' 11 ' == true ?JS的隐式类型转换?;三元表达式(运算符);隐式数据类型转换;javaScript中Number()对象的toFixed()的方法;js toFixed 的坑...
2022-07-22 16:56:11 2719 2
原创 element calendar 自定义显示(例如:通知事项日历)vue+element自定义日历
element calendar 自定义显示(例如:通知事项日历)vue+element自定义日历;最近帮一个后端朋友处理一个前端问题,elementUI 中calendar日历组件内容进行自定义显示,实现类似通知事项的日历效果,感觉还挺有意思,在这做简单的分享问题描述提示:elementUI组件中针对calendar日历组件其实可以实现自定义内容的效果。下图,官网自定义效果。前端自定义日历...
2022-04-24 17:52:13 11107 30
原创 echarts水球图-动态波纹百分比数据显示
最近帮助朋友根据ued图学习设计了一个echarts水球图,觉得还蛮有意思的,在这记录一下具体效果:看看,这种带比例的echarts是不是很像个水球,随着比例变动水位不断变化,再看看那一圈圈涟漪(ps:就这些‘涟漪’开始麻烦死了……)进入正题:废话不多说,直接上代码,希望对你有帮助:function Pie() { let dataArr = []; for (var i = 0; i <.前端水球图;vue水球图;...
2021-11-06 17:44:29 9020 6
原创 >>> /deep/ ::v-deep 深度作用选择器
在写一些vue项目时候,经常会引入一些组件。无论是自定义组件还是引入的外部组件。style经常用scoped属性实现组件的私有化,防止影响到其他页面上的样式。但是有时需要在父组件中更改自组件的样式,比如要改变element-ui某个深层元素(eg:.el-input__inner)或其他深层样式时,就要用到组件穿透(也叫深度修改css,深度作用选择器)可用的方法有 >>> 、 /deep/ 、 ::v-deep有些像 Sass 之类的预处理器无法正确解析 >>&g...
2021-08-23 17:04:17 2851
原创 this的指向问题
对象方法调用构造函数调用事件绑定方法定时器函数立即指向函数具体的打印结果:JavaScript常用的三种处理函数内部this的指向问题的方法:call( ) 、apply( ) 、bind( )三者的区别:共同点:都可以改变this指向不同点:主要的应用场景:~~上述有些地方表述可能不够严谨,欢迎交流~~...
2021-03-18 21:07:15 2152 22
原创 Ant Design Tree defaultExpandAll设置无效无法实现展开所有树节点,获取各节点下的末位子节点的key,再通过expandedKeys实现展开所有树节点
Ant Design Tree defaultExpandAll设置无效无法实现展开所有树节点;最近在使用Ant Design的树形控件做树形数据展示,要求全部节点展示。expandedKeys (受控)展开指定的树节点;树结构数据遍历获取子节点
2023-01-16 14:44:01 2011
原创 js 替换字符串中所有 “ 引号 —— 数据处理
描述:例如:我有组动态数据格式是"text":[“aaa”,“bbb”]如何转化为"text":“[“aaa”,“bbb”]”处理:提示:注意数据类型转换处理:处理代码:let text=["aaa","bbb"] // 1、JSON数组转化为JSON字符串let str=JSON.stringify(text)// 2、用字符串的replace方法进行对应的字符替换// let rep=str.replace(/\"/g,'\\"').replace(/\[/g,'\"[').re
2022-04-26 15:37:51 2658
原创 antd table Summary总结栏置顶
antd4.x 表格合计行在表头下方展示(合计行置顶)实现步骤:1、首先给table添加sticky属性设置粘性头部2、通过修改table中对应的css实现合计行置顶实现步骤:1、首先给table添加sticky属性设置粘性头部 <Table // 1、添加sticky属性 sticky columns={columns} ... summary={pageData => { ... }}
2022-03-28 15:19:44 4496
原创 Vue echarts初始化实例Error in mounted hook: “TypeError: Cannot read property ‘init‘ of undefined“
项目场景:Vue echarts初始化实例:Error in mounted hook: “TypeError: Cannot read property ‘init’ of undefined”问题描述:1.安装echarts依赖 通过 npm 获取 echarts,npm install echarts --save2.main.js中全局引用 import echarts from 'echarts' // 全局方法挂载 Vue.prototype.$echarts
2021-08-13 15:19:43 796
原创 element 表格处理后端返回的时间格式,Table 表格使用formatter 属性
项目场景:有时我们在项目中后端返回给我们的时间数据格式(2021-08-04T14:39:47.939)并不是我们最终想要展示的样子,显示的效果不好,这时候我们就需要对返回过来的时间数据进行初始化处理,来达到最终的展示效果(2021-08-04 14:39:47)。后端返回的时间数据展示效果:解决方案:期初是想引入moment.js 插件,绑定处理时间格式的方法,来专门进行时间戳转化,虽说可以实现最终的效果,但是考虑到需要下载安装插件……通过在对 Element UI 中的Tabl.
2021-08-11 09:31:41 3261 2
原创 element DateTimePicker 日期时间选择器,针对接口返回的特定时间数据做“快捷时间范围选项”处理
目录项目场景:Data TimePicker日期选择器使用问题描述:日期选择器快捷选择操作原因分析:this指向及对象实例方法解决方案:最终效果:代码及效果项目场景:在最近做的项目中需要大量的使用日期时间选择器对时间进行处理,其中最主要的还是根据已有的时间数据进行快捷选择操作。问题描述:在element中 DateTimePicker 日期时间选择器时期时间范围的快捷选择,只是对当前时间newDate( )进行时间范围快捷选择的操作,对我当前的项目需求并不匹配...
2021-08-03 13:46:17 2670 2
原创 Element UI table组件中的滚动条无效问题
目录项目场景:问题描述:原因分析:解决方案:项目场景:在最近的项目中接触了下拉框与表格数据联动的需求:通过点击select下拉框节点触发列表渲染,页面初始化时默认选中下拉框中第一个节点并渲染数据。问题描述:知识提要:在element-UI中只要在el-table元素中定义了height属性,即可实现固定表头的表格,若数据过多则会产生列表滚动效果。问题描述:下拉框设置默认选择节点后,绑定表格数据渲染。在页面初始化时,表格数据渲染出来了,但是列...
2021-07-23 18:15:36 5263 4
原创 Duplicate keys detected:‘/da…‘
项目场景:最近在熟悉公司的一个项目,发现老是存在一个bug,强迫症我的看着就很难受,在此记录一下问题描述:Vue中Duplicate keys detected错误:原因分析:在同一层DOM节点上,vue发现key不是唯一的,是会出现报错。但如果不是在同一层DOM使用v-for循环,则不会报错。这种情况一般出现在 v-for循环生成列表等情况,对key值处理不当时,正如此项目在对data中的数据进行v-for时,key值不唯一,遍历的出的数据没有自己独特的标志,也就是唯一
2021-05-26 16:04:29 3683 4
原创 JavaScript简单倒计时效果的实现
JavaScript简单倒计时效果的实现 new Date() / 通过js内置的日期对象Date实现 setInterval 注:在核心算法中,是不能直接拿着时分秒相减,比如 05 分减去25分,结果会出现负数的问题,正确的操作是获取总到毫秒数进行相减求差值。倒计时,定时器
2021-03-19 21:29:17 720 1
原创 无法完成包的安装npm ERR! Refusing to install package with name “moment“ under a package also called “moment“
node.js 解决安装时名称冲突错误node.js中无法完成包的安装,报错:npm ERR! Refusing to install package with name “moment” under a package also called"moment".我开始的操作步骤:创建了一个名为“moment“”文件夹在执行命令时所处的目录“moment“文件夹中打开终端,在终端输入npm init -y 命令 ,快速创建 package.json 这个包管理 配置文件 想要下载安装一个
2021-01-11 20:36:21 736 1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人