Twinkle_sone的博客

大家对于雷达图应该都不陌生了吧，比如龙珠中这个经典的龙珠雷达，今天让我们一起来看看怎么封装一个雷达图vue组件。

前端开发中，当我们需要展示大量数据列表时，直接渲染所有数据项往往会导致性能问题，页面加载缓慢、滚动卡顿等。为了解决这一问题，虚拟列表技术应运而生。今天我们一起来简单实现一个虚拟滚动列表。

微信里的@功能大家应该都用过了吧，那么有没有想过它是怎么实现的呢？今天我们就一起来简单实现一个带@功能的输入框组件。

不知道大家平时有没有遇到需要 获取输入框当前光标的前一个字符 的场景？今天让我们一起来看一下怎么实现这个功能。

最近追剧的时候发现，现在很多视频平台都会在视频暂停的时候播放广告，并将播放的视频页面缩小到角落里，长视频平台的"暂停广告"似乎已成行业潜规则。那么这种“反人性的交互设计”功能是怎么实现的呢？

显示省份的中国地图大家应该都实现过了吧？那么显示全国所有城市的中国地图大家实现过吗？最近刚好自己在实现一个小功能需要显示全国所有城市的中国地图，在这里分享一下怎么快速实现一个。

🎈所谓的数据脱敏，是指在不影响数据分析结果的准确性前提下，对原始数据中的敏感字段进行处理，从而降低数据敏感度和减少个人隐私风险的技术措施。在现在这个大数据时代，个人隐私信息在互联网上传播的几率是很大的，因此作为前端工程师，我们很多时候也需要在视图层面对数据进行脱敏展示处理。

在短视频兴起的时代，很多的视频软件都有视频加速的功能，只需轻轻长按屏幕，视频便会根据预设的速度模式进行倍速播放，这是很常用而且很实用的一个功能，今天就让我们来简单实现一个组件，支持长按屏幕加速，且可以滑动选择加速倍率。

最近在做一个需求，需要在用户输入数字失焦后实时将数字转为大写中文，聚焦的时候将大写中文转为数字以便用户继续修改。这里我们可以封装一个通用指令来做转换，接下来就让我们一起来实现一个转换指令吧。

🎈上拉加载更多的分页功能大家应该都见过或者使用过了吧？那么有多少同学自己实现过吗？今天我们来简单实现一个上拉加载更多分页组件。

最近在做一个统计表单录入功能，每一个表单项都需要自己先计算好总数再录入，这样操作显得有些繁琐，所以就想着可不可以将计算过程也集成到输入框里，这样我们可以直接输入算式，然后由输入框来完成计算，最后直接得出结果，于是就封装了一个可以自动计算算式的输入框组件。

🎈元素拖拽缩放功能大家都不陌生吧？今天我们一起来看看怎么简单编写一个vue指令来实现元素拖拽缩放功能。

📺在数字时代，表情符号已成为我们沟通的延伸。大部分同学在平时沟通聊天中都少不了使用emoji表情，所以今天我们一起来编写一个emoji选择器组件，可以一键引入为你的输入框添加emoji表情选择功能。

🎈鼠标控制元素旋转功能大家应该都不陌生了吧，今天我们一起来看看怎么编写一个`vue指令`来实现元素旋转功能吧！

🎈元素拖拽功能大家应该都不陌生了吧，今天我们一起来看看怎么编写一个vue指令来实现元素拖拽功能吧！

在构建丰富的单页应用（SPA）时，Vue Router 提供的钩子函数是实现高级路由逻辑的关键。

🎈在构建 Vue 应用程序时，路由守卫是确保流畅用户体验和强大逻辑控制的关键工具。本文将一起探讨 Vue 路由守卫的概念、类型和实际应用，帮助你理解如何利用这些守卫来增强应用的导航能力、实现权限控制和优化用户流程。

🎈在构建复杂的 Vue 应用程序时，我们经常会遇到需要在非直接父子关系的组件之间进行通信的情况。本文将深入探讨 Vue 提供的多种非父子组件通信方法，并提供实用的代码示例和应用场景。

🎈防抖（Debounce）在前端开发中是一种常用的技术，它的作用是限制某个操作在短时间内的频繁触发，只有在一定的间隔时间内才执行相应的操作。

🎈对数字进行千分位分隔后展示应该是大部分同学都做过的功能了吧，常规的做法通常是编写一个工具函数来对数据进行转换，那么我们可不可以通过`vue指令`来实现这一功能呢？

🎈网页的功能和用途可能各不相同，在传统右键菜单栏中无法满足每个用户的个性化需求。通过自定义右键菜单栏，用户可以根据自己的需求添加、调整和删除菜单选项，以实现个性化定制。通过自定义右键菜单栏，可以为用户提供快速访问常用功能和操作的便捷方式，从而提高用户体验。

🎈平时我们使用Chrome插件通常都只是用来编写简单的js注入脚本，大家有没有遇到过需要插件在页面上注入一个弹窗呢？比如我们希望可以通过快捷键快速唤起`ChatGPT面板`或者快速唤起一个`翻译面板`，这时候我们就需要在页面上注入一个可以使用快捷键唤起的弹窗面板了，那么在插件开发中，我们怎么使用vue框架来进行弹窗面板开发呢？

流程图在技术领域是一种常见的可视化工具，用于展示系统、应用或业务流程的各个步骤以及它们之间的关系。它们可以帮助开发人员和项目团队更好地理解和规划复杂的流程，从而提高工作效率和准确性。但是，传统的静态流程图有时无法满足用户的需求，因此实现可拖拽的流程图组件成为了一个重要的需求。

🎈Vue 手势密码锁组件是一个功能强大且易于集成的解决方案，旨在为您的应用程序提供安全的登录体验。该组件允许用户通过绘制特定的手势图案来解锁应用程序，取代传统的用户名和密码输入方式。通过引入图案手势锁，用户可以享受到更高的安全性，因为手势图案具有较高的复杂度和难以猜测性。同时，使用手势密码锁还可以提升用户体验，让登录过程更加便捷和流畅。Vue 手势密码锁组件支持高度定制化，您可以轻松地调整样式、主题和验证规则，以适应不同的应用场景。无论您是开发移动应用、网页应用还是桌面应用，Vue 手势密码锁组件都是您打

图片滑块验证功能很难吗？难？哪里难了？这么多年都是这么简单好吧，不要睁着眼睛乱说，有时候找找自己的原因好吧，这么多年了技术涨没涨，有没有认真学习

想象一下，你是否曾经希望能够拥有一个专属于自己的Chrome浏览器插件，能够满足你特定的需求和兴趣？本文将带你了解如何快速创建个人化的Chrome浏览器插件，无论是增强浏览体验、提高工作效率，还是添加个性化功能，你都可以在几个简单步骤内实现。无需编程背景，只需跟随本文指南，你也可以成为自己的插件设计师！

贡献度面板（Contribution Graph）是指在代码仓库中按时间展示每位开发者的提交情况的可视化图表。它会显示不同日期的提交次数，并用颜色的深浅表示提交的数量。

当创意遇上技术，Canvas带来了一种全新的图像处理体验！在本博客中，我们将探索如何使用Canvas实现一个令人惊叹的锚点抠图功能。通过简单的代码，你将学会如何利用Canvas的强大功能，精确地选择并抠出你想要的图像部分。无论是给设计作品增添独特的视觉效果，还是为社交媒体发布引人注目的图片，这个锚点抠图功能都将成为你的秘密武器。让我们一起踏上这个创意之旅，释放你内心的艺术家！

不管前端还是后端，大家或多或少都了解使用过echarts图表吧，很多时候我们只是需要展示指定区间的数据，但有时我们希望在图表上能够轻松地切换数据的展示区间，以便更清晰地观察特定时间段或区域的变化。在本文中，我将向大家介绍如何实现在 ECharts 图表上左右滑动切换数据区间的功能，让数据展示交互变得更加灵活。

平时我们在终端输入命令的时候是不是都可以通过tab键来进行快速补全？那么有没有想过怎么去实现这个自动补全的功能呢？今天让我们一起来使用字典树实现一个可以自动补全的输入框。

🎈相信很多80、90后的朋友，对QQ宠物印象非常深刻，每次开机宠物就会自动跑出来。曾经很多人想饿死他，但失败了；也有很多人一上线就退出，但就是不愿因取消“开机自动开启”的勾选。2018年09月15日，QQ宠物正式停止游戏运营，关闭游戏服务器，很多人表示惋惜，不得不对陪伴了自己这么多年的宠物说了再见。那么现在自己有了一点的能力，为什么不能亲自动手来“复活”一下它呢。

>🎈刮刮卡大家应该都玩过吧，还记得小时候的小卖部总会有各种各样的刮卡抽奖活动，刮卡时那心跳的感觉让我们更加的欲罢不能，随着时代的发展，现在很多回忆也都有了网页版，通过canvas我们可以很方便的实现一个刮刮卡的功能效果，那么不使用canvas的话呢？我们也可以很快速的实现这个功能！

🎈常见的轮播图组件我们见得很多了，那么来封装个3D轮播图组件怎么样呢？使用CSS3中的transform-style 和 perspective属性来实现一个3D轮播图。

🎈上上个星期写了一篇文章，记录了怎样通过纯前端实现一个鼠标滑动预览视频封面的vue组件，不少人跟我反馈说那样实现的效果不太好，用户体验感较差，也给了我一个新的实现方案，所以现在我在上上周实现的组件基础上增加了使用精灵图的展现方式。...

🎈不知道大家平时在逛B站的时候有没有发现这么一个功能？在视频封面移入鼠标时我们可以对视频进行预览，预览过后再决定时候要点进去观看视频，那么这个实现具体是怎么实现的呢？让我们一起动手来试一下吧。...

作为一名前端开发，页面交互少不了图片上传，但有时候我们需要对上传图片做一些限制，如尺寸要求和像素分辨率要求，所以这里我们一起来看看前端上传图片如何获取图片的分辨率。

🎈所谓的数据脱敏，是指在不影响数据分析结果的准确性前提下，对原始数据中的敏感字段进行处理，从而降低数据敏感度和减少个人隐私风险的技术措施。在现在这个大数据时代，个人隐私信息在互联网上传播的几率是很大的，因此作为前端工程师，我们很多时候也需要在视图层面对数据进行脱敏展示处理。...

说在前面🎈现在很多人都喜欢使用图案手势锁，这里我使用vue来封装了一个可以直接使用的组件，在这里记录一下这个组件的开发步骤。效果展示组件实现效果如下图：预览地址http://jyeontu.xyz/jvuewheel/#/JAppsLock实现步骤完成一个组件需要几步？1.组件设计首先我们应该要知道我们要做怎样的组件，具备怎样的功能，这样才可以开始动手去实现。功能上其实是已经很明确了，就是仿照手机上现有的图案锁来进行网页版组件开发。这里我们对入参和回调先进行一个大致的设计。siz

现在很多地方都有使用到弹幕，最近在捣鼓自己的个人博客网站，也想着在里面加入一个弹幕模块，所以在这里封装了一个可复用的弹幕组件，目前已经实现了基本的功能，可能还会有存在缺陷，后续会继续优化。这里给大家介绍分享一下实现的过程。

说在前面🎈相信大家对于连连看这款游戏都不陌生了吧？还记得在我小时候，有一段时间周边的人都被这游戏给吸引了，那时候我就在想，我点了两个图片，它怎么知道能不能连线，还有明明有很多条路线可以走，为什么就要走那一条？直到后来我学习了BFS算法体验地址大家可以先到体验地址试玩一下，欢迎大家的意见反馈。JYeontuGame在线体验地址：http://jyeontu.xyz/JYeontuGame/#/项目介绍本游戏是基于vue2.0的一个项目，服务端使用node简单的做了两个接口，数据库则是使用的m