![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 86
JYeontu
不止前端
展开
-
元素旋转?一个vue指令搞定
🎈鼠标控制元素旋转功能大家应该都不陌生了吧,今天我们一起来看看怎么编写一个`vue指令`来实现元素旋转功能吧!原创 2024-06-24 08:51:39 · 1139 阅读 · 0 评论 -
元素拖拽?一个vue指令搞定
🎈元素拖拽功能大家应该都不陌生了吧,今天我们一起来看看怎么编写一个vue指令来实现元素拖拽功能吧!原创 2024-04-02 08:43:45 · 1989 阅读 · 2 评论 -
veu-router 钩子函数有哪些?
在构建丰富的单页应用(SPA)时,Vue Router 提供的钩子函数是实现高级路由逻辑的关键。原创 2024-03-18 14:54:28 · 637 阅读 · 0 评论 -
Vue 中的 路由守卫 到底是个什么东西?
🎈在构建 Vue 应用程序时,路由守卫是确保流畅用户体验和强大逻辑控制的关键工具。本文将一起探讨 Vue 路由守卫的概念、类型和实际应用,帮助你理解如何利用这些守卫来增强应用的导航能力、实现权限控制和优化用户流程。原创 2024-03-15 14:56:52 · 929 阅读 · 0 评论 -
Vue 中如何进行非父子组件通信?
🎈在构建复杂的 Vue 应用程序时,我们经常会遇到需要在非直接父子关系的组件之间进行通信的情况。本文将深入探讨 Vue 提供的多种非父子组件通信方法,并提供实用的代码示例和应用场景。原创 2024-03-13 09:37:12 · 479 阅读 · 0 评论 -
函数防抖?一个vue指令搞定
🎈防抖(Debounce)在前端开发中是一种常用的技术,它的作用是限制某个操作在短时间内的频繁触发,只有在一定的间隔时间内才执行相应的操作。原创 2024-02-26 10:24:56 · 2558 阅读 · 0 评论 -
千分位分隔?一个vue指令搞定
🎈对数字进行千分位分隔后展示应该是大部分同学都做过的功能了吧,常规的做法通常是编写一个工具函数来对数据进行转换,那么我们可不可以通过`vue指令`来实现这一功能呢?原创 2024-02-19 18:49:22 · 2021 阅读 · 0 评论 -
不想要网页默认的右键菜单栏,怎么封装一个可以自定义的右键菜单组件?
🎈网页的功能和用途可能各不相同,在传统右键菜单栏中无法满足每个用户的个性化需求。通过自定义右键菜单栏,用户可以根据自己的需求添加、调整和删除菜单选项,以实现个性化定制。通过自定义右键菜单栏,可以为用户提供快速访问常用功能和操作的便捷方式,从而提高用户体验。原创 2024-01-23 00:09:52 · 2366 阅读 · 0 评论 -
使用vue快速开发一个带弹窗的Chrome插件
🎈平时我们使用Chrome插件通常都只是用来编写简单的js注入脚本,大家有没有遇到过需要插件在页面上注入一个弹窗呢?比如我们希望可以通过快捷键快速唤起`ChatGPT面板`或者快速唤起一个`翻译面板`,这时候我们就需要在页面上注入一个可以使用快捷键唤起的弹窗面板了,那么在插件开发中,我们怎么使用vue框架来进行弹窗面板开发呢?原创 2024-01-16 01:03:19 · 2403 阅读 · 5 评论 -
可拖拽流程图组件开发
流程图在技术领域是一种常见的可视化工具,用于展示系统、应用或业务流程的各个步骤以及它们之间的关系。它们可以帮助开发人员和项目团队更好地理解和规划复杂的流程,从而提高工作效率和准确性。但是,传统的静态流程图有时无法满足用户的需求,因此实现可拖拽的流程图组件成为了一个重要的需求。原创 2024-01-01 16:29:58 · 1058 阅读 · 0 评论 -
轻松创建自定义手势图案锁 - Vue 手势密码锁组件
🎈Vue 手势密码锁组件是一个功能强大且易于集成的解决方案,旨在为您的应用程序提供安全的登录体验。该组件允许用户通过绘制特定的手势图案来解锁应用程序,取代传统的用户名和密码输入方式。通过引入图案手势锁,用户可以享受到更高的安全性,因为手势图案具有较高的复杂度和难以猜测性。同时,使用手势密码锁还可以提升用户体验,让登录过程更加便捷和流畅。Vue 手势密码锁组件支持高度定制化,您可以轻松地调整样式、主题和验证规则,以适应不同的应用场景。无论您是开发移动应用、网页应用还是桌面应用,Vue 手势密码锁组件都是您打原创 2023-12-11 21:46:39 · 2643 阅读 · 0 评论 -
图片滑块验证功能很难吗?做个可以自己抠形状的图片滑块验证组件
图片滑块验证功能很难吗?难?哪里难了?这么多年都是这么简单好吧,不要睁着眼睛乱说,有时候找找自己的原因好吧,这么多年了技术涨没涨,有没有认真学习原创 2023-11-30 23:47:17 · 1254 阅读 · 0 评论 -
从零开始,轻松打造个人化Chrome浏览器插件
想象一下,你是否曾经希望能够拥有一个专属于自己的Chrome浏览器插件,能够满足你特定的需求和兴趣?本文将带你了解如何快速创建个人化的Chrome浏览器插件,无论是增强浏览体验、提高工作效率,还是添加个性化功能,你都可以在几个简单步骤内实现。无需编程背景,只需跟随本文指南,你也可以成为自己的插件设计师!原创 2023-11-30 08:28:32 · 1018 阅读 · 0 评论 -
高效管理团队表现:构建可视化的贡献度面板组件
贡献度面板(Contribution Graph)是指在代码仓库中按时间展示每位开发者的提交情况的可视化图表。它会显示不同日期的提交次数,并用颜色的深浅表示提交的数量。原创 2023-11-29 16:22:36 · 921 阅读 · 0 评论 -
Canvas艺术之旅:探索锚点抠图的无限可能
当创意遇上技术,Canvas带来了一种全新的图像处理体验!在本博客中,我们将探索如何使用Canvas实现一个令人惊叹的锚点抠图功能。通过简单的代码,你将学会如何利用Canvas的强大功能,精确地选择并抠出你想要的图像部分。无论是给设计作品增添独特的视觉效果,还是为社交媒体发布引人注目的图片,这个锚点抠图功能都将成为你的秘密武器。让我们一起踏上这个创意之旅,释放你内心的艺术家!原创 2023-11-26 01:24:47 · 976 阅读 · 0 评论 -
怎么在echarts图上左右滑动切换数据区间
不管前端还是后端,大家或多或少都了解使用过echarts图表吧,很多时候我们只是需要展示指定区间的数据,但有时我们希望在图表上能够轻松地切换数据的展示区间,以便更清晰地观察特定时间段或区域的变化。在本文中,我将向大家介绍如何实现在 ECharts 图表上左右滑动切换数据区间的功能,让数据展示交互变得更加灵活。原创 2023-11-21 01:08:23 · 1150 阅读 · 2 评论 -
轻松搭建智能搜索功能,封装字典树自动补全输入框组件
平时我们在终端输入命令的时候是不是都可以通过tab键来进行快速补全?那么有没有想过怎么去实现这个自动补全的功能呢?今天让我们一起来使用字典树实现一个可以自动补全的输入框。原创 2023-11-15 02:43:15 · 392 阅读 · 0 评论 -
谁能拒绝一个会动的皮卡丘挂件
🎈相信很多80、90后的朋友,对QQ宠物印象非常深刻,每次开机宠物就会自动跑出来。曾经很多人想饿死他,但失败了;也有很多人一上线就退出,但就是不愿因取消“开机自动开启”的勾选。2018年09月15日,QQ宠物正式停止游戏运营,关闭游戏服务器,很多人表示惋惜,不得不对陪伴了自己这么多年的宠物说了再见。那么现在自己有了一点的能力,为什么不能亲自动手来“复活”一下它呢。原创 2022-11-22 21:14:51 · 3214 阅读 · 4 评论 -
不使用canvas怎么实现一个刮刮卡效果?
>🎈刮刮卡大家应该都玩过吧,还记得小时候的小卖部总会有各种各样的刮卡抽奖活动,刮卡时那心跳的感觉让我们更加的欲罢不能,随着时代的发展,现在很多回忆也都有了网页版,通过canvas我们可以很方便的实现一个刮刮卡的功能效果,那么不使用canvas的话呢?我们也可以很快速的实现这个功能!原创 2022-08-22 20:38:36 · 478 阅读 · 0 评论 -
vue封装一个3D轮播图组件
🎈常见的轮播图组件我们见得很多了,那么来封装个3D轮播图组件怎么样呢?使用CSS3中的transform-style 和 perspective属性来实现一个3D轮播图。原创 2022-08-08 11:02:17 · 4109 阅读 · 7 评论 -
vue实现一个鼠标滑动预览视频封面组件(精灵图版本)
🎈上上个星期写了一篇文章,记录了怎样通过纯前端实现一个鼠标滑动预览视频封面的vue组件,不少人跟我反馈说那样实现的效果不太好,用户体验感较差,也给了我一个新的实现方案,所以现在我在上上周实现的组件基础上增加了使用精灵图的展现方式。...原创 2022-08-03 09:25:35 · 1404 阅读 · 6 评论 -
vue实现一个鼠标滑动预览视频封面组件
🎈不知道大家平时在逛B站的时候有没有发现这么一个功能?在视频封面移入鼠标时我们可以对视频进行预览,预览过后再决定时候要点进去观看视频,那么这个实现具体是怎么实现的呢?让我们一起动手来试一下吧。...原创 2022-07-24 13:51:26 · 3660 阅读 · 5 评论 -
input上传图片并同步获取图片分辨率
作为一名前端开发,页面交互少不了图片上传,但有时候我们需要对上传图片做一些限制,如尺寸要求和像素分辨率要求,所以这里我们一起来看看前端上传图片如何获取图片的分辨率。原创 2022-06-16 15:24:42 · 2416 阅读 · 1 评论 -
如何优雅的对input框数据进行动态脱敏
🎈所谓的数据脱敏,是指在不影响数据分析结果的准确性前提下,对原始数据中的敏感字段进行处理,从而降低数据敏感度和减少个人隐私风险的技术措施。在现在这个大数据时代,个人隐私信息在互联网上传播的几率是很大的,因此作为前端工程师,我们很多时候也需要在视图层面对数据进行脱敏展示处理。...原创 2022-06-15 16:10:15 · 3399 阅读 · 3 评论 -
vue封装一个图案手势锁组件
说在前面🎈现在很多人都喜欢使用图案手势锁,这里我使用vue来封装了一个可以直接使用的组件,在这里记录一下这个组件的开发步骤。效果展示组件实现效果如下图:预览地址http://jyeontu.xyz/jvuewheel/#/JAppsLock实现步骤完成一个组件需要几步?1.组件设计首先我们应该要知道我们要做怎样的组件,具备怎样的功能,这样才可以开始动手去实现。功能上其实是已经很明确了,就是仿照手机上现有的图案锁来进行网页版组件开发。这里我们对入参和回调先进行一个大致的设计。siz原创 2022-05-31 09:02:15 · 573 阅读 · 2 评论 -
vue封装一个弹幕组件
现在很多地方都有使用到弹幕,最近在捣鼓自己的个人博客网站,也想着在里面加入一个弹幕模块,所以在这里封装了一个可复用的弹幕组件,目前已经实现了基本的功能,可能还会有存在缺陷,后续会继续优化。这里给大家介绍分享一下实现的过程。原创 2022-04-18 00:03:27 · 3064 阅读 · 13 评论 -
使用学过的算法做个游戏很酷的好吗
说在前面🎈相信大家对于连连看这款游戏都不陌生了吧?还记得在我小时候,有一段时间周边的人都被这游戏给吸引了,那时候我就在想,我点了两个图片,它怎么知道能不能连线,还有明明有很多条路线可以走,为什么就要走那一条?直到后来我学习了BFS算法体验地址大家可以先到体验地址试玩一下,欢迎大家的意见反馈。JYeontuGame在线体验地址:http://jyeontu.xyz/JYeontuGame/#/项目介绍本游戏是基于vue2.0的一个项目,服务端使用node简单的做了两个接口,数据库则是使用的m原创 2022-04-15 21:28:02 · 3132 阅读 · 0 评论 -
vue + echarts实现国省市三级下钻联动
说在前面🎈最近在捣鼓自己的个人博客网站,在管理统计页中想要加入地区用户访问数量统计图📈,原本准备使用饼图进行呈现,但是最后还是选择了呈现效果更好地地图🌎来进行展示。在这里对此功能进行总结,也给大家分享一下在vue中echarts地图的使用,以及如何实现省市下钻联动📝前面给大家分享过一篇国到省的地图联动demo👉vue + echarts实现中国地图省份下钻联动,现在我将收集来的市级地图资源也整合到了该demo里面,完成了从国到省,再从省到市的三级地图下钻联动。体验体验地址:http://jye原创 2022-04-09 18:41:08 · 2175 阅读 · 3 评论 -
Vue封装一个瀑布流图片容器组件
瀑布流,又称瀑布流式布局。是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest,逐渐在国内流行开来。国内大多数清新站基本为这类风格。原创 2022-04-07 09:03:19 · 870 阅读 · 0 评论 -
纯CSS实现悬浮提示并封装成vue组件
说在前面🎈平时给文字加悬浮提示,我们通常都是直接使用title属性来实现,但是这样的效果并不好看,那我们可以自己动手做一个tooltip悬浮提示框吗?说做就做,让我们一起来看看✍️效果预览地址:http://jyeontu.xyz/jvuewheel/#/JToolTipView效果实现HTML部分如下图,简单写一段话使用p标签包裹起来,span标签中的内容是需要我们设置悬浮提示的内容。<p> I am <span class="j-tooltip"&g原创 2022-04-05 17:22:00 · 2670 阅读 · 0 评论 -
vue + echarts实现中国地图省份下钻联动
说在前面🎈最近在捣鼓自己的个人博客网站,在管理统计页中想要加入地区用户访问数量统计图📈,原本准备使用饼图进行呈现,但是最后还是选择了呈现效果更好地地图🌎来进行展示。在这里对此功能进行总结,也给大家分享一下在vue中echarts地图的使用,以及如何实现省份下钻联动📝体验http://jyeontu.xyz/JDemo/#/china引入echartsnpm下载npm install echartscdn引入<script type="text/javascript" s原创 2022-04-04 18:53:56 · 11169 阅读 · 33 评论 -
vue封装即引即用的评论组件
说在前面最近在搭建一个自己的博客网站,博客网站肯定少不了和读者的交流,因此需要一个评论模块来搭建起博主和读者的联系,在完成评论模块的时候顺手将其封装成了一个评论组件,在这里记录一下,也给大家简单分享一下,大家有什么好的建议都可以评论告诉我。组件介绍博客地址:http://jyeontu.xyz/JYeontuBlog/#/home组件在博客中的展示如上图,博客链接也贴在了上面,感兴趣的同学可以进去体验看看效果,可以顺便给我留下几句祝福就更好了。组件主要实现了以下几个功能:(1)数据转换将扁平原创 2022-04-01 14:03:50 · 6130 阅读 · 24 评论 -
vue简单实现词云图组件
vue简单实现词云图组件原创 2022-02-11 17:27:17 · 6795 阅读 · 2 评论 -
VUE简单封装分页器组件
效果说在前面分页器是列表展示页面必备组件之一,由于项目需要,所以我也简单的封装了一个分页器组件,效果如上图。组件设计入参 props: { //总数 total: { type: Number, default: 100, }, //每页条数 pageSize: { type: Number, default: 10,原创 2022-01-05 18:31:57 · 807 阅读 · 3 评论 -
打造个性化代码高亮组件
vue + 正则,打造个性化代码高亮组件。原创 2021-12-16 00:37:08 · 403 阅读 · 1 评论 -
vue可拖拽悬浮按钮组件
效果预览预览地址:http://120.79.163.94/JYeontuComponents/#/JHoverBtnView关键代码实现阻止默认拖动选择事件preventEvent(){ document.getElementById('j-hover-btn').ondragstart = function() { return false; }; document.getElementById('j-hover-btn').onselectstart = function ()原创 2021-12-01 16:34:20 · 7137 阅读 · 30 评论 -
vue数字滚动效果组件
数字滚动变化效果组件效果预览体验地址用途大屏展示,数字滚动效果实现使用js控制元素移动。关键代码如下://修改chang(oldVal,newVal,id){ if(oldVal >= newVal) return; let stepTime = this.stepTime; let time = Math.ceil((newVal - oldVal) / this.fontSize); time = stepTime / time; const dom = doc原创 2021-11-25 16:47:19 · 2161 阅读 · 0 评论 -
vue+canvas实现手写签字画板
vue+canvas实现手写签字画板效果预览体验地址用途涂鸦画板签名板实现使用canvas,通过监听鼠标动作来进行绘图。关键代码如下:drawing(event){ if(!this.penClick) return;//鼠标按下状态 const canvas = document.getElementById('canvas'); //获取canvas标签 const ctx = canvas.getContext("2d");//创建 contextconst ca原创 2021-11-22 17:52:01 · 3531 阅读 · 0 评论 -
将自己开发的vue组件库发布到npm
将自己开发的vue组件库发布到npm安装vue环境已有的可以跳过npm i vue -g npm i vue-cli -g创建一个vue项目vue create .文件目录如下图:调整目录1、packages增加一个packages目录,用来存放我们的组件模块2、examples修改原来的src目录为examples,用于运行展示代码文件调整1、vue.config.js修改项目入口const path = require('path')function resolv原创 2021-11-19 18:47:50 · 1131 阅读 · 0 评论 -
简单实现可拖拽流程图vue组件
效果说在前面因为自己有需求,想要一个可以自由拖拽排序的流程图组件,在网上没有找到合适的demo,所以便自己动手做了这样一个雏形。组件设计首先需要设计好配置参数,然后就是讲配置参数融入到样式的设计处理上,最后是实现组件拖动并实时展示效果。参数整体参数参数描述title标题(String)dragAble是否可拖拽(Boolean)width图标最小宽度(number)radius是否圆角(Boolean)data流程项(Array)d原创 2021-11-06 02:06:12 · 4655 阅读 · 2 评论