前端
文章平均质量分 67
lookingForw_4585
大龄青年,编程小白。
头发茂密的前端攻城狮~~~
展开
-
【2023-6-02】关于项目中数组遍历场景的记录
关于数组遍历的一篇随记原创 2023-06-02 16:59:07 · 537 阅读 · 0 评论 -
【2023-5-31】设置input框禁止输入
input框禁止输入,非禁用原创 2023-05-31 14:57:44 · 1134 阅读 · 0 评论 -
【2023-3-29】JavaScript使用promise顺序调用函数并抛出异常
JavaScript使用promise顺序调用函数并抛出异常原创 2023-03-29 15:37:56 · 504 阅读 · 0 评论 -
【2023-3-7】前端进行树状结构数据排序简单示例
前端实现树状数据排序功能的小示例原创 2023-03-07 17:52:57 · 565 阅读 · 0 评论 -
【2023-2-8】前端JSON格式展示,pre标签首行缩进问题
前端JSON格式展示及pre标签首行缩进问题原创 2023-02-08 14:37:42 · 1743 阅读 · 2 评论 -
【2022-11-09】vue2实现简单的tag-input标签输入框
vue2实现tag-input原创 2022-11-09 11:12:45 · 3329 阅读 · 1 评论 -
【2022-10-13】前端js下载文件的小示例
前端js实现下载文件的小示例原创 2022-10-13 12:13:36 · 139 阅读 · 0 评论 -
【2022-8-24】vue2中使用箭头函数踩坑记录
vue2项目中使用箭头函数踩坑原创 2022-08-24 15:42:31 · 588 阅读 · 0 评论 -
[2022-7-25]vue3学习之简单hooks使用
vue3学习之简单hooks使用原创 2022-07-25 15:36:12 · 949 阅读 · 0 评论 -
【npm 安装依赖报错The operation was rejected by your operating system】
简单记录下如何解决问题:本地安装了gnvm作为node的版本管理工具后,于某天安装依赖是报错 The operation was rejected by your operating system。大意为你的操作系统拒绝了你的操作请求。最简单的方法是npm install 时以管理员方式运行。感谢万能的网友提供的方法。win10 系统 ,如下图所示,找到cmd程序快捷方式所在位置,然后右键 — 属性 — 快捷方式 -----高级 设置 用管理员身份运行然后重新执行安装命令,即可正常安装依赖。原创 2022-03-15 12:01:20 · 4994 阅读 · 0 评论 -
2021-07-15 el-tree获取选中节点,节点全选时返回被全选的节点,未全选则正常返回被选中的节点
el-tree获取选中节点,节点全选时返回被全选的节点,未全选则正常返回被选中的节点相关描述实现代码实现思路:实现代码:感谢:相关描述 需要获取树组件选中的节点,假如父节点被选中(该节点全选),即只返回父节点的id,如父节点未被全选,则正常返回被选中节点的id。示例一:如上图,所以的节点都选中了,此时需要获取到一级 2 这个节点的id即可示例二:如上图,此时,除了三级 3-2-1 节点外,其余节点均选中,此时需要获取到三级 3-2-2 、二级 2-1 两个节点的id。即二级2-1节点是全选原创 2021-07-15 18:03:34 · 2437 阅读 · 4 评论 -
2021-07-12Git - git pull时遇到error: cannot lock ref ‘refs/remotes/origin/master‘: unable to resolve...
git pull时遇到问题及解决方法问题描述:解决方法及原因分析:1、git log 错误:解决方法:修复 .git/refs/heads/分支名原因分析:IDE的错误关闭2、git pull 错误:解决方法:原因分析:问题描述: 重新启动电脑后,打开项目,发现多了很多修改(1K+),执行git pull 及git log命令时,均会报错。现记录下解决方法(网络整理,真实可用):git pull 报错:error: cannot lock ref ‘refs/remotes/origin/mast原创 2021-07-12 15:03:41 · 2530 阅读 · 0 评论 -
使用纯css实现轮播效果
使用纯css实现轮播效果属性介绍scroll-snap-typescroll-snap-align代码实现结尾属性介绍制作网页尤其是电商类、网站主页等都会遇到轮播图的需求,以往实现轮播图,若不借助第三方插件如swiper等,就需要自行手动实现轮播效果,一大堆的js代码,现在可以使用css实现简单的轮播效果(不包括循环滚动、跳转等)。scroll-snap-typescroll-snap-type CSS 属性定义在滚动容器中的一个临时点(snap point)如何被严格的执行。具体语法,可以参考M原创 2021-06-03 11:37:10 · 568 阅读 · 0 评论 -
项目踩坑记录:require.js+jQuery等改造vue
require.js+jQuery等改造vue背景介绍问题描述解决方案反思及说明写在最后背景介绍改造require.js+jQuery+bootstrap实现的一个老项目。 原有项目使用require.js实现模块化,ui界面及操作主要是bootstrap配合jQuery,项目中部分实现代码嵌套在java代码中(大概就是这个意思),为方便后续维护,现将此项目计划改造为vue的项目。由于项目还会添加新的功能,原来的编码(实现)方式有点不合时宜——所有的页面都是通过前端发送数据请求后,后端返回的HTML原创 2021-05-25 17:01:08 · 405 阅读 · 0 评论 -
el-tree 饿了么树状控件自定义节点的显示图标
el-tree 饿了么树状控件自定义节点的显示图标效果展示实现代码替换小三角为图标效果展示el-tree组件默认显示时,节点是不带icon的,如需使用时,可以通过自定义插槽的方式来实现,实现方式在网络上也存在很多,本篇只简单记录个人如何实现。功能点:替换默认显示的小三角图标展开即关闭节点时图标切换子节点的默认显示图标实现代码<template> <div class="tree"> <el-tree :data="data5"原创 2021-03-01 12:00:22 · 3823 阅读 · 1 评论 -
vue2.x版本中使用summernote编辑器
vue2.x版本中使用summernote编辑器summernote的基本属性如何配置(工具栏)获取数据(HTML内容)summernote的基本属性 summernote是一款基于jQuery的编辑器,vue社区中关于类似的编辑器也有很多,但是原有的就项目中使用了summernote,为了保持统一,故使用summernote!显示效果如下,顶部的工具条为自定义配置的,后面讲到。使用summernote需要先安装依赖:npm install summernotenpm install jqu原创 2021-02-26 15:10:53 · 1570 阅读 · 2 评论 -
Typescript + Vue 2.x版本,使用element-ui中form表单验证的问题记录
Typescript + Vue 2.x版本,使用element-ui中form表单验证的问题记录报错:Property 'validate' does not exist on type 'Vue | Element | Vue[] | Element[]'. Property 'validate' does not exist on type 'Vue'.错误分析:解决方法:错误:form的validate()方法不执行(不进入该方法)错误分析:注意:此处自定义的校验方法,使用官方示例中 的 箭头函数原创 2020-12-30 16:16:39 · 1541 阅读 · 0 评论 -
echarts踩坑记录---vue中使用echarts图表时数据绑定及tooltip自定义显示
echarts踩坑记录---vue中使用echarts图表时数据绑定及tooltip自定义显示echarts在vue项目中的使用(场景)数据绑定问题tooltip自定义显示echarts在vue项目中的使用(场景) 项目开发时使用echarts进行数据的展示,数据由后台获取。由于是根据不同的服务器来确定展示的内容,故需要选获取服务器的信息,将获取到的服务器信息作为echarts查询的参数进行数据查询。 步骤如下:方式请求,获取服务器信息服务器信息返回,将服务器的标识作为echarts数据请求原创 2020-11-20 13:11:41 · 2612 阅读 · 1 评论 -
echarts踩坑记录---仪表盘设置仪表盘的位置
echarts踩坑记录---仪表盘设置仪表盘的位置问题描述解决方法示例代码问题描述 工作中遇到了需要展示比值的图表需求,由于其他位置使用了echarts的图表,遂打消了使用el-progress 进度条模拟仪表盘的想法,毕竟直接使用还是香的啊 先看下官方示例的效果: 使用了echarts的仪表盘以后,一切似乎向着预期的方向在发展,但是突然发现一个问题,相比其他echarts图表可以通过设置 gird 属性来设置图表组件的容器位置,例如与left、top等的偏移量。但是仪表盘并不支持此属性(设置原创 2020-11-12 17:40:54 · 6549 阅读 · 3 评论 -
Vue组件中使用canvas实现蜂巢效果的一些尝试
Vue组件中使用canvas实现蜂巢效果的一些尝试 前段时间,看到D3.js的官方网站的蜂巢效果,感觉不错,不过一直没有时间去实际的实现下,借这次机会,算是填了前面的坑~~,先来看看d3.js的效果图: 近期看到一篇在Vue组件中使用canvas实现蜂巢效果的文章,抱着试一试的想法,对文章中的实现进行了复现。虽然实现上和d3存在区别,但是条条大路通罗马,基本上实现了效果:实现过程:使用canvas,绘制效果。两个canvas元素,一个用于绘制图标,一个用于绘制蜂巢,并设置交互事件canv原创 2020-11-06 14:49:34 · 1933 阅读 · 1 评论 -
纯css实现的旋转木马效果(旋转相册)
纯css实现的旋转木马效果(旋转相册)值此双节之际,祝各位双节快乐,每天开心,财源广进。啊哈哈~~话不多说,先看效果:完整代码:<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>照片墙效果</title> <style type="text/css"> body, p, dl,原创 2020-10-01 19:08:09 · 784 阅读 · 0 评论 -
vue中,使用scss后,样式穿透失效的问题
vue中,使用scss后,样式穿透失效的问题 如题,vue项目中样式使用scss时,对于需要穿透的样式,使用 >>> 穿透可能会不生效,解决办法也很简单:将<style lang="scss" scoped>.a >>> .b { font-size: 24px;}</style>修改为:<style lang="scss" scoped>.a /deep/ .b { font-size: 24px;}原创 2020-09-27 16:47:54 · 10233 阅读 · 1 评论 -
css搭配js实现简单的时钟效果
简单的时钟效果先看下效果代码简单,就不做多于的赘述了,直接上代码:<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } .bp { width: 400p原创 2020-09-24 18:05:26 · 167 阅读 · 0 评论 -
antv/G6使用记录,vue组件实现节点、边的动态增减、右键事件等功能
antv/G6是蚂蚁金服数据可视化团队出品的一个功能完备的图可视化引擎。 介于业务需要,最近在学习G6,特此记录下~~ 简单展示:功能点:连接关系图表鼠标控制缩放节点拖动事件画布拖动事件边的状态切换节点层级展示边的动态增加还原视图特性: 状态:G6中提供了状态管理,指的是节点或边的状态,包括交互状态和业务状态。 动画:动画是可视化中非常重要的内容,本例中涉及到边的动画效果 字体图标:本例中使用iconfont,具体实现参照G6官方文档,比较的详细原创 2020-08-04 19:39:56 · 9663 阅读 · 23 评论 -
JavaScript中 如何判断两个对象是否相等?
JavaScript中 如何判断两个对象是否相等?object类型作为JavaScript中的基本数据类型,也是实际前端开发中经常使用的一种数据类型。 对于数字(Number)、字符串(String)、Boolean类型等数据,判断其是否相等,使用 === 全等于符合即可判断。但是对于object类型的数据,进行判断时就需要多做一些处理。常见的判断方法有:方法一: 使用 JSON.stringify()方法,将对象转化为字符串。然后使用 “===” 判断即可:let obj1 = { a原创 2020-07-29 20:04:48 · 13542 阅读 · 2 评论 -
Git --修改push过后的commit信息
日常的代码管理,已经完全的使用git来进行了,有时候commit时,写了错别字、或者直接就是错误的信息,想要修改过来,看完本篇你就可以!首先,不论是在Git bash 还是在vs code的终端里,都可以进行这个操作,输入git log 查看提交的版本信息我们来修改最近一次提交的commit信息(随便输入的~~~)git rebase -i HEAD ~1 //1 代表倒数第一次的commit出现如下界面:按 i 进入编辑模式,将要修改的那一条commit的pick改为 edit,然原创 2020-06-03 18:48:35 · 4158 阅读 · 4 评论 -
vue 项目实现开发中的前后端连载
vue 项目实现开发中的前后端连载 前后端分离的开发环境,需要开发一个新的项目时,确定好需求,前端。后端人员就开始自己的工作,前端人员自己模拟数据,在前后端联调时将不合适的地方进行修改,直至联调结束,项目发布上线。 目前使用的前端框架,以数据驱动为主,简单的开发可以将数据写在源码中,如vue中的data中写入假数据,也可以使用一些mock方案进行假数据的模拟。也可以使用nodejs自己搭建一个Web服务器,本篇主要介绍一下怎么在一个项目中实现前后端连载(nodejs + vue)。 首先搭建一个原创 2020-05-29 16:39:39 · 428 阅读 · 0 评论