前端大杂烩
记录一下前端各种技巧、插件、特效~
帅龍之龍
没有强度,全是手法。
展开
-
基于Vue3+Hooks实现4位随机数和60秒倒计时
首先,Vue3的Hooks是一种新的 API,用于在Vue组件中管理状态和生命周期。它们是基于 React Hooks的概念设计的,可以让开发者更方便地在函数式组件中使用状态管理和生命周期函数。本文给大家分享一下基于Hooks实现的两个案例。原创 2024-01-24 17:51:35 · 427 阅读 · 0 评论 -
超简单使用Vite+Vue3构建共享开发和分模块打包的前端项目
最近有个需求就是构建一个可复用公共组件、可分模块独立部署的前端项目。关于这个共享开发和分模块打包的操作,还记得是在上家公司的某个SpringBoot项目上见过。它的好处就是子模块各自独立开发与打包、可复用父模块的共享代码、降低耦合度等。前端这里还没试过这样的操作,于是面向谷歌/百度开发一下。嗯,原来有这种操作的,真是流批,在此记录一下这个解决方案。原创 2023-10-10 17:37:57 · 700 阅读 · 0 评论 -
使用Vue实现一个当鼠标悬浮时出现,鼠标离开时消失的双层菜单
分享一个基于Vue实现一个当鼠标悬浮时出现,鼠标离开时消失的双层菜单。同时也是为了以后需要类似的需求时,可以提供一个实现思路,以及可以快速ctrl+c和ctrl+v操作,提高工作效率~原创 2023-12-08 10:53:30 · 967 阅读 · 0 评论 -
在Vue3+ElementPlus项目中实现一个简单的新增/移除行记录的小组件
有时需要一些前端需求就是支持表格编辑,点击新增一行或者移除一行。这不马上搞一个示例代码出来了吗?方便以后复制粘贴,提升工作效率~原创 2023-10-18 17:59:16 · 46 阅读 · 0 评论 -
基于Vue实现具有固定表头、合并单元格的Html表格
本文主要是通过设置`rowspan`和`colspan`属性来实现合并单元格,通过CSS的`position: sticky`属性来实现固定表头。原创 2021-02-18 11:37:35 · 532 阅读 · 1 评论 -
SpringBoot+JQuery+Ajax实现表单数据传输和单文件或多文件的上传
本文是一篇由前端发起JQuery+Ajax异步请求,传输表单和文件数据,后端控制器获取数据的文章。复制粘贴,亲测可用!原创 2020-11-06 20:57:53 · 1676 阅读 · 3 评论 -
如何在Vue3项目中使用防抖节流技巧
防抖节流是可以说是一种优化组件性能的技巧,可以有效减少组件中的渲染次数和计算量,从而提高组件的响应速度和用户体验。在Vue3中可以使用`lodash`库中的`debounce`和`throttle`函数来分别实现防抖和节流。当然也可以自行设计实现防抖节流函数,调用方式都差不多。原创 2023-11-02 17:01:51 · 3974 阅读 · 0 评论 -
在Vue3+ElementPlus项目中使用具有懒加载的el-tree树形控件
有时遇到一些需求就是在使用树形控件时,服务端并没有一次性返回所有数据,而是返回首层节点列表。然后点击展开首层节点中的某个节点,再去请求该节点的子节点列表,那么就得用上懒加载的机制了。在此以ElementPlus的树形控件为例,实现一个具有懒加载的树形控件的示例页面。原创 2023-11-01 17:10:01 · 2667 阅读 · 0 评论 -
Vue3项目使用G6可视化组件实现一个树形机构图
之前一直使用Echarts或Highcharts实现图表,也有听说G2/G6这些玩意,于是在项目中使用看看效果,还不错的样子。原创 2023-10-24 20:14:58 · 929 阅读 · 1 评论 -
在Vue项目中使用Echarts图表库
ECharts是一款基于JavaScript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。其使用方式颇为简单。原创 2022-02-10 11:12:11 · 788 阅读 · 0 评论 -
使用 Vue-Cli 创建 Vue3+TS 项目并整合 ElementPlus、Axios 等组件或插件
记录一下使用 Vue-Cli 创建 Vue3+TS 项目并整合 ElementPlus、Axios 等组件或插件。原创 2022-11-14 15:58:58 · 2625 阅读 · 0 评论 -
Vue2 项目使用 CRC32 和 Unicode 编码生成字符串对应的颜色值
简单记录一下在 Vue2 项目使用 CRC32 和 Unicode 编码生成字符串对应的颜色值。原创 2022-03-28 16:27:42 · 1769 阅读 · 0 评论 -
如何在 Vue3 项目配置全局方法
大家都知道 Vue2 项目配置全局方法最简单就是使用【Vue.prototype.$XXX = XXX】这种实现方式。如该文章【https://blog.csdn.net/Cai181191/article/details/123797934】就是用这种方式来实现,然而Vue3 项目实现配置全局方法可能就有点不一样了。原创 2022-11-17 18:02:13 · 2575 阅读 · 0 评论 -
使用ElementPlus实现内嵌表格和内嵌分页
有时遇到这样的需求,就是在表格里面嵌入一个表格,以及要求带有分页,这样在ElementPlus中很好实现。以下使用Vue2语法实现一个简单例子,毕竟Vue3兼容Vue2语法,若想要Vue3版本例子,简单改改就OK了。原创 2023-09-14 16:53:51 · 994 阅读 · 0 评论 -
在 Vue3 + ElementPlus 项目中使用 computed 实现前端静态分页
在Vue项目中,偶尔会遇到一些需求,需要前端实现分页。如果服务端一次性返回所有数据,由前端实现分页,那么这样的分页称为静态分页。本示例使用Vue2写法实现,为的是照顾还没会Vue3写法的童鞋,另外Vue3支持Vue2写法,若想改为Vue3+语法糖等其它写法,自行改改即可。原创 2023-03-28 17:42:22 · 315 阅读 · 0 评论 -
在 Vue3 + ElementPlus 项目中使用 el-autocomplete 控件
这个 el-autocomplete 控件颇为好用!在大量数据的情况下,其可以替换 el-select 控件,不会说卡顿得不行。另外,我发现当 element-plus 版本为2.2.32时,这个控件的clearable 属性失效,在使用当前最新版本2.3.9时,这个属性起效了,应该是修复了这个 bug 了吧。原创 2023-07-13 21:18:14 · 1682 阅读 · 0 评论 -
ElementPlus 之 el-select 多选实现全选功能
经常会遇到这种多选下拉框支持全选的需求,在此简单记录一下在 ElementPlus 框架下,如何使得多选的 el-select 控件支持实现全选功能。原创 2023-05-05 18:15:59 · 2206 阅读 · 1 评论 -
简单记录使用 ElementPlus 的虚拟化树形控件(el-tree-v2)心得
首先在 ElementPlus 官方文档中有 el-tree-v2 使用说明,其实和 el-tree 基本一样。不同就是 el-tree-v2 使用了虚拟滚动技术,正如官方文档所说,不论数据量多大,虚拟树都能毫无压力地处理。原创 2022-05-06 20:22:58 · 3524 阅读 · 2 评论 -
如何在Vue2.X/Vue3.X项目引入jQuery,以及增加jQuery.easing扩展?让你的动画效果更加丝滑!
还记得在2015左右,网页开发依然是jQuery的天下,虽然Vue、React开始盛行,以及后面Angular也开始抢占市场,但是jQuery在市场上依然占有较大的比重。当时的html页面大多是用jQuery来写的,为jQuery设计的插件也是相当丰富的。比如,使用jquery.js 结合 jquery.easing.js 来实现动画效果就挺方便的。原创 2023-08-14 01:19:08 · 616 阅读 · 0 评论 -
Vue3项目使用 wow.js 让页面滚动更有趣~
wow.js是一个可以在页面滚动的过程中逐渐释放动画效果,让页面滚动更有趣的一个插件库。原创 2022-12-29 16:30:33 · 2601 阅读 · 2 评论 -
在Vue2或Vue3中项目中使用 Isotope(同位素) 过滤和排序神奇的布局神器,全网独家实现!
目前,不仅JQuery支持Isotope,还有Vue、React、Angular等这些框架也有对其进行封装,做成了组件,方便引入项目并使用。但是随着Vue等框架版本的升级,这些组件许多没有继续更新,不支持高版本的前端框架。也就是说在高版本前端框架的项目中引入许多年前的组件,或多或少会出现报错导致无法使用。于是,UP在此实现如何在Vue2或Vue3项目中使用 Isotope(同位素)神器,挺简单的,全网独家实现。原创 2023-07-24 17:55:57 · 359 阅读 · 6 评论 -
Vue3使用Mitt中央事件总线实现组件之间通讯(发布订阅库)
现在的项目慢慢从 Vue2 升级到 Vue3 了,之前 Vue2 自带的中央事件总线是 EventBus,在 Vue3 中已经被移除了,官方推荐使用 Mitt 发布订阅库。在此简单记录一下 Mitt 的使用方式。原创 2023-08-03 18:07:17 · 600 阅读 · 1 评论 -
使用 el-tree 实现计算每个非叶子节点的后代节点的个数并显示
今天实现一个这样的 Web 前端需求,给定一个嵌套结构的 json 数据,计算每个非叶子节点中,其后代节点的个数,以及其后代节点中ID为一万倍数的个数,在此简单记录一下。原创 2023-05-08 17:41:53 · 548 阅读 · 0 评论 -
使用Vue+CSS实现汉堡图标过渡为叉号图标,有点意思
本文给大家分享三个具有过渡效果的汉堡图标,当点击汉堡图标时,过渡为叉号图标。这种具有过渡特效的图标挺炫酷的,感觉一下子给网页增加一点新颖特色。早在2015年左右,国外挺多优秀门户网站都有使用类似的图标,那时不知道怎么实现,现在研究了一下,大概是使用CSS伪类和动画的技巧来实现。原创 2023-08-01 00:40:25 · 1431 阅读 · 3 评论 -
基于Vue3实现鼠标按下某个元素进行拖动,实时改变左侧或右侧元素的宽度,以及点击收起或展开的功能
其原理主要是利用JavaScript中的鼠标事件来控制CSS样式。大致就是监听某个DOM元素的鼠标按下事件,以及按下之后的移动事件和松开事件。在鼠标按下且移动过程中,可实时获得鼠标的X轴坐标的值,通过简单计算,可计算出目标元素的宽度,然后再用CSS赋值就实现该效果了。原创 2023-07-28 15:19:15 · 3593 阅读 · 0 评论 -
Vue3项目引入 vue-quill 编辑器组件并封装使用
这是一款支持Vue3的富文本编辑器,在此演示一下Vue3项目引入 vue-quill 并封装使用。原创 2022-12-01 17:42:37 · 2837 阅读 · 1 评论 -
基于Vue2+ElementUI/Vue3+ElementPlus对el-notification增加倒计时进度条特效,鼠标移入,暂停计时,鼠标移出,继续计时
遇到一个需求就是对这个el-notification加一个倒计时进度条,方便用户知道该通知何时自动关闭。于是自己动手丰衣足食。原创 2022-12-12 15:05:24 · 2000 阅读 · 0 评论 -
Vue3之script-setup 语法糖
简单了解和记录一下Vue3常用的语法使用方式,颇有收益~原创 2021-02-18 15:14:24 · 354 阅读 · 0 评论 -
如何在前端项目中单独引入 ElementUI 图标以及使用
首先 element-ui 图标是基于字体文件的的形式实现的,如woff和ttf等。有时候一些需求用CSS的before和after为元素实现,自然用到 content 属性,而这个content不仅仅可以承载空格,还可以承载字符编码的。原创 2021-01-18 17:05:21 · 6140 阅读 · 0 评论 -
在Vue3项目中使用 vue3-seamless-scroll 无缝滚动插件
有需求需要用到这个大腿们设计的无缝滚动插件(vue3-seamless-scroll),效果不错,记录一下使用过程。本插件不需要全局引用,只需要局部引用到页面中即可,主要有三个步骤,分别是引入、注册、使用。原创 2023-07-17 18:12:42 · 7591 阅读 · 4 评论 -
如何对ElementUI、ElementPlus中的Tree树组件进行美化,如增加辅助线、替换展开收起图标、点击节点后文字高亮等效果?本文给你答案!
ElementUI、ElementPlus树组件功能很不错,但是官方的树形组件没有显示线条,感觉稍微不够大气。于是网上查了一些资料,找了很多也感觉也不够完美,最后找到一个还不错的实现方案,并且再美化改进一下,分享给大家。原创 2022-11-08 19:24:51 · 6322 阅读 · 2 评论 -
使用React的函数式组件实现一个具有过渡变化、刻度切换、点击高亮的柱状图DIY组件
本想使用业界大佬们开源的各种图表库(如:ECharts、G2可视化引擎、BizCharts ...),但是有的需求不仅要求有过渡变化,还要点击某个图高亮同时发送HTTP请求数据等功能,着实不知道怎么把canvas或svg绘制的图表弄成高亮,于是自己动手丰衣足食。虽然说React是通过虚拟DOM来渲染视图的,最好不要直接操作DOM,但是目前技术有限,而且也只是操作一下DOM来修改一点点CSS样式,这个以后再优化吧。原创 2023-07-10 15:51:01 · 527 阅读 · 0 评论 -
记一下 Windows11 安装与配置 node.js 的标准步骤
记一下 Windows11 安装与配置 node.js 的标准步骤。1、首先随便下载个 node.js 的x86或x64.msi安装包,双击直接安装,安装的路径如"C:\Program Files\nodejs\";2、安装完成后,打开 cmd命令控制符,输入查看版本命令来验证是否安装成功;3、接下来配置 npm,打开 cmd命令控制符,输入以下两条指令;4、镜像加速,若只能连公司内网就用公司镜像仓库,若可以连外网可以用其他镜像仓库;5、开始 node.js 开发之旅吧;原创 2020-11-10 11:32:16 · 2340 阅读 · 3 评论 -
基于Vue3实现简约型侧边栏
有时遇到一些需求,需要实现左边侧边栏为父级菜单,右侧内容区的顶部为子级菜单,以及其底部为子级菜单对应的模块内容。原创 2023-07-08 17:53:46 · 1334 阅读 · 0 评论 -
使用 Vite 创建 React+TS+SW 项目并整合 AntDesign 、Scss 等组件或插件
记录一下使用 Vite 创建 React+TS+SW 项目并整合 AntDesign 、Scss 等组件或插件。原创 2023-06-25 18:24:53 · 618 阅读 · 0 评论 -
Vue3使用createVNode和render函数实现仿 Antd 加载动效
项目是基于Vue3+Element plus框架设计的,本来使用Element plus的Loading加载动效已经是满足项目需求的,但是感觉AntDesign的加载动效图标好看一点点,于是自行实现一个基于Vue3,以及仿AntDesign的加载动效的示例。其主要用到Vue3的createVNode和render函数。原创 2022-12-21 15:46:33 · 981 阅读 · 0 评论 -
基于 Vue2.X/Vue3.X 项目引入 vue-code-diff/v-code-diff 代码差异插件并使用
基于 Vue2.X/Vue3.X 项目引入 vue-code-diff/v-code-diff 代码差异插件并使用原创 2022-11-30 20:15:59 · 2534 阅读 · 5 评论 -
基于Vue2超简单实现DIY定制的步骤条
由于一些定制化的需求无法在网上直接找到可用插件来实现,只能DIY设计实现,如以下步骤条。原创 2022-08-23 20:08:36 · 3192 阅读 · 1 评论 -
基于Vue2.X对WangEditor 5富文本编辑器进行封装与使用,支持单个或多个图片点击、粘贴、拖拽上传,Vue3.X项目也可直接使用
一直想要一个神奇多功能的富文本编辑器,经同事介绍这个 WangEditor 富文本编辑器,发现挺好用的。于是自行封装一下,这样在复用组件时,可以少写一些代码,直接组件引用即可。原创 2022-09-02 12:39:04 · 6650 阅读 · 0 评论 -
基于CSS3、原生JS、Vue3.0技术各自实现序列帧动画效果
还记得序列帧技术在2018年的时候很火的,那时做H5很吃香的...那么在此记录一下用纯CSS3、原生JS、Vue3.0,这3种方式来设计几个例子。需要自己去找一下雪碧图哦,比如阿里云、腾讯云官网有很多雪碧图的~原创 2022-09-02 18:16:18 · 2176 阅读 · 0 评论