- 博客(45)
- 收藏
- 关注
原创 【2023-12-29】2023年最后一个工作日
如题,于本年的最后一个工作日,随便胡诌几句,希望来年工作日能有条不紊、按部就班。拒绝鸡飞狗跳、身心屏蔽。
2023-12-29 14:36:41
474
2
原创 【2023-11-23】生成A~Z编号
需要生成 A~Z的编号,当新的编号超过Z时,从A1开始,依次为B1 C1一直至Z1,如此循环。最大支持字母为Z,超过后以添加数字后缀的形式标记。
2023-11-23 17:42:05
174
原创 【2023-09-01】vue中自定义按钮设置disabled属性后,异常触发click事件
vue中自定义按钮设置disabled属性后,异常触发click事件
2023-09-01 12:16:05
2288
原创 【2023-4-24】前端使用websocket的简单示例
简单记录下,使用websocket的小示例,不代表实际项目中使用的情况,属于理解下机制的示例实操。
2023-04-24 15:00:44
470
原创 【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
5254
原创 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
2550
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
2677
原创 使用纯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
609
原创 项目踩坑记录: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
450
原创 antv/G6使用记录,自定义简单的节点,实现流程图
antv/G6使用记录,自定义简单的节点,实现流程图效果展示实现代码说明效果展示作为一个简单的记录,包括自定义节点,边等实现代码完整代码如下:G6使用的版本为3.5.0<template> <div class="main-content-box"> <div id="container"></div> </div></template><script>import G6 from '@a
2021-04-07 17:22:40
4383
13
原创 el-collapse-transition 移植到项目中遇到的问题,及其解决方法。
el-collapse-transition 移植到项目中遇到的问题,及其解决方法问题描述思路解析解决方案方法一方法二:方法三:问题描述 自有项目中需要实现一个collapse折叠面板的功能,由于对饿了么使用较多,故打算将饿了么中的collapse组件移植到项目中,只需要对一些细节的样式进行修改即可。本着兢(混)兢(水)业(摸)业(鱼)的态度,开始移植collapse折叠面板。 但是在查看饿了么的源码,以及实现了collapse功能后,发现面板的动画效果失效了,打开折叠的操作感觉很生硬。影响使用体验。
2021-03-11 12:25:54
2661
原创 el-tree 饿了么树状控件自定义节点的显示图标
el-tree 饿了么树状控件自定义节点的显示图标效果展示实现代码替换小三角为图标效果展示el-tree组件默认显示时,节点是不带icon的,如需使用时,可以通过自定义插槽的方式来实现,实现方式在网络上也存在很多,本篇只简单记录个人如何实现。功能点:替换默认显示的小三角图标展开即关闭节点时图标切换子节点的默认显示图标实现代码<template> <div class="tree"> <el-tree :data="data5"
2021-03-01 12:00:22
4064
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
1716
2
原创 cnpm无法加载文件 C:\Users\xxx\xxx,因为在此系统上禁止运行脚本
解决cnpm无法加载文件 C:\Users\xxx\xxx,因为在此系统上禁止运行脚本 的问题 久未更新,在此祝各位看客牛年大吉!一直使用npm安装依赖包,但公司换了办公室后,npm装依赖就有问题,无奈只有切到cnpm(淘宝源),然后就遇到这个问题:网络上找了一些解决方法,在此记录一下,很感谢广大网友的无私分享。总结一下解决方法如下:win10系统以管理员身份打开 Windos PowerShell输入“ set-ExecutionPolicy RemoteSigned” 回车根据提
2021-02-24 12:11:32
188
原创 echarts踩坑记录---dataZoom显示问题,icon数目出错!
echarts踩坑记录---dataZoom显示问题,icon数目出错!问题描述:分析问题:解决方案:总结:问题描述: 由于是有echarts图表的数据较多,所以使用了dataZoom 组件,用户可以根据自身喜好选择要查看的时间段。 于是参照官方 example,代码如下:dataZoom: [ { show: true, start: 0, end: 15 }, {
2021-01-04 15:12:06
2770
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
1655
原创 echarts踩坑记录---vue中使用echarts图表时数据绑定及tooltip自定义显示
echarts踩坑记录---vue中使用echarts图表时数据绑定及tooltip自定义显示echarts在vue项目中的使用(场景)数据绑定问题tooltip自定义显示echarts在vue项目中的使用(场景) 项目开发时使用echarts进行数据的展示,数据由后台获取。由于是根据不同的服务器来确定展示的内容,故需要选获取服务器的信息,将获取到的服务器信息作为echarts查询的参数进行数据查询。 步骤如下:方式请求,获取服务器信息服务器信息返回,将服务器的标识作为echarts数据请求
2020-11-20 13:11:41
2708
1
原创 echarts踩坑记录---仪表盘设置仪表盘的位置
echarts踩坑记录---仪表盘设置仪表盘的位置问题描述解决方法示例代码问题描述 工作中遇到了需要展示比值的图表需求,由于其他位置使用了echarts的图表,遂打消了使用el-progress 进度条模拟仪表盘的想法,毕竟直接使用还是香的啊 先看下官方示例的效果: 使用了echarts的仪表盘以后,一切似乎向着预期的方向在发展,但是突然发现一个问题,相比其他echarts图表可以通过设置 gird 属性来设置图表组件的容器位置,例如与left、top等的偏移量。但是仪表盘并不支持此属性(设置
2020-11-12 17:40:54
7190
3
原创 Vue组件中使用canvas实现蜂巢效果的一些尝试
Vue组件中使用canvas实现蜂巢效果的一些尝试 前段时间,看到D3.js的官方网站的蜂巢效果,感觉不错,不过一直没有时间去实际的实现下,借这次机会,算是填了前面的坑~~,先来看看d3.js的效果图: 近期看到一篇在Vue组件中使用canvas实现蜂巢效果的文章,抱着试一试的想法,对文章中的实现进行了复现。虽然实现上和d3存在区别,但是条条大路通罗马,基本上实现了效果:实现过程:使用canvas,绘制效果。两个canvas元素,一个用于绘制图标,一个用于绘制蜂巢,并设置交互事件canv
2020-11-06 14:49:34
2132
1
原创 antv/G6使用记录,调用save方法,对数据model进行改造,并重新渲染
antv/G6使用记录,调用save方法,对数据model进行改造,并重新渲染 主要说明在使用antv/g6时,对于画布中的节点,做某种操作(例如改变节点的颜色等),保存数据,以供一个新的画布渲染的方法 例子比较简单,不涉及太复杂的操作,先看下效果: 左侧的容器中是初始的画布,使用自定义的方式对菱形节点进行了注册(此方法为官方示例),点击按钮时将左侧的画布中的元素的数据模型进行保存,然后在右侧新创建一个graph,将保存的值稍加修改,然后进行渲染,就得到了右侧容器中的内容 场景:例如点
2020-10-17 16:43:01
5560
2
原创 纯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
849
原创 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
10463
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
197
原创 适合悄咪咪看的vue组件间通信常用方式,附源码!
vue组件间通信常用的六种方式 组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用。一般来说,组件可以有以下几种关系: 如上图所示,A 和 B、B 和 C、B 和 D 都是父子关系,C 和 D 是兄弟关系,A 和 C 是隔代关系(可能隔多代)。 针对不同的使用场景,如何选择行之有效的通信方式? 下面就介绍几种vue组件之间通信的方式:方法一 props/$emit 这种方式比较简单,也是最基本的传值方式。 父组件ParentView.
2020-08-14 19:37:28
260
原创 antv/G6使用记录,vue组件实现节点、边的动态增减、右键事件等功能
antv/G6是蚂蚁金服数据可视化团队出品的一个功能完备的图可视化引擎。 介于业务需要,最近在学习G6,特此记录下~~ 简单展示:功能点:连接关系图表鼠标控制缩放节点拖动事件画布拖动事件边的状态切换节点层级展示边的动态增加还原视图特性: 状态:G6中提供了状态管理,指的是节点或边的状态,包括交互状态和业务状态。 动画:动画是可视化中非常重要的内容,本例中涉及到边的动画效果 字体图标:本例中使用iconfont,具体实现参照G6官方文档,比较的详细
2020-08-04 19:39:56
10494
23
vue2自定义实现tag-input组件
2022-11-24
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人