一个月，Vue四件套，专为移动端深度优化的第三方网易云 WebApp
这年代真的很魔幻：物价在涨、黄金在涨，人都在悄悄发福，更别说内存条蒸蒸日上。结果回头一看，音乐软件也跟着 “发福” 到离谱。
就拿网易云来说，十年间安装包膨胀十几倍，从一个纯粹的播放器，硬生生塞成了集直播、K 歌、社区、短视频、商城于一体的 “全能平台”。权限越要越多，体积越更越大，对于性能不怎么好的设备 ...
高德地图-物流路线
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
有些时候我们的项目只使用原生一些内容是无法实现一些功能的，所以今天我带来了一个大家都熟悉的，也是生活中常见的一个功能，也就是大家在网购的时候，下单成功后就可以看到自己的订单，当然也可以查看物流信息，那么物流信息中有一个部分就是地图部分，这部分可以让用户看 ...
前端工程化 - 良好的feature-based-目录结构与具体示例
良好的feature-based-目录结构与具体示例
背景
先拆”业务边界”,不是拆组件
从业务角度来说,这个订单页其实有3个部分:
核心 - 浏览能力
订单列表
基础筛选
分页
Extension - 可选 - 插件能力
高级筛选
导出
状态变更
Detail - 按需能力
订单详情单床
重构目录结构
把 “ 按技术类型” 改为 “按业务角色”
...
vue 甘特图 vxe-gantt 设置每个进度条分为计划和实际两条，实现上下分布任务条
vue 甘特图 vxe-gantt 设置每个进度条分为计划和实际两条，实现上下分布任务条，实现方式是利用子任务的子视图渲染模式，来间每条任务拆分成2条子任务，就可以利用自带的子视图渲染功能来渲染。
https://gantt.vxeui.com
由于放2行超出默认高度，所以还需要通过 cell-config.height设置一下行高，再通过树形表格的子任务来 ...
基于PDF.js的安全PDF预览组件实现：从虚拟滚动到水印渲染
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
基于PDF.js的安全PDF预览组件实现：从虚拟滚动到水印渲染
本文将详细介绍如何基于Mozilla PDF.js实现一个功能完善、安全可靠的PDF预览组件，重点讲解虚拟滚动、双模式渲染、水印实现等核心技术。
前言
在Web应用中实现PDF预览功能是常见需求，尤其是在线教育、文档管理等场 ...
书架效果的实现
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
1. 对齐目标
前端想实现一个类似的书架放置书籍的效果，目标如下：
2. 思路梳理
我们使用的技术栈：vue
实现这样的一个效果，我们需要知道以下信息：
每行可以放置多少书本？
放下所有的书本需要多少行?
需要什么样的数据结构?
我们现在一个个来思考，既然我们选择了vue来 ...
SciChart.js v5版本全新发布：为Web图表开发带来更高效体验
近日，SciChart 官方宣布发布 SciChart.js v5 版本，这是该 JavaScript 图表库系列的重要更新之一。在本次版本升级中，开发团队重点围绕性能优化、图表渲染效率提升和功能扩展等方面进行了改进，为前端数据可视化应用提供更流畅、更灵活的开发体验。
获取SciChart.js新版试用，请联系慧都科技>>>
核心性能提升
...
用户单击文本并复制至剪帖板
Html5网页，一些内容，可以让用户点击选中文本，并把选中的文本复制至剪帖板(Clipboard)。Insus.NET已经实现与测试，记录于此，方便时可以重来查阅与参考。复制文本到剪贴板（兼容所有浏览器）
function CopyTextToClipboard(text) {
// 方法1: 使用现代Clipboard API（首选）
if (navigator.clipboard & ...
uniapp多边形动画
实现效果
使用三角形，四边形等拼成一个爱心的图形。
爱心的图形一段时间会有高光闪过。
点击爱心图形会使拼成一个心字。
实现思路
三角形，四边形可以用clip-path: polygon();画出来，确定几个顶点可以画出任意图形。
高光需要在每个多边形添加动画延迟然后加上统一的动画。
爱心变成心字只需要确定更改后的多边形顶点位 ...
前端实现速度线
功能
前端实现速度线，在矩形内生成黑白三角形且闪动。
思路
速度线可以使用多个角度相同的三角形分解矩形。三角形的渲染使用canvas连线fill就行，三角形在矩形上的两个点可以通过计算每个三角形的边长来获取。三角形在矩形上的边长使用三角函数获取。
HTML结构：包含一个画布（Canvas）用于显示图片。
CSS样式：定义了页 ...
上传图片修改透明边距并下载下来
功能
允许用户上传图片，并在图片周围添加透明边距。用户可以调整边距的大小，然后将修改后的图片下载为PNG格式。
思路
HTML结构：包含一个画布（Canvas）用于显示图片，以及一些输入框和按钮用于调整边距和下载图片。
CSS样式：定义了页面的基本布局和样式，使页面居中显示，并设置了画布的大小和边框。
JavaScript功能： ...
老板：能不能别手动复制路由了？我：写个脚本自动扫描
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
起因
周五快下班，老板过来看权限配置页面。
"这个每次都要手动输路径？"
"对，现在是这样。"我打开给他看：
角色：运营专员
路由路径：[手动输入] /user/list
组件路径：[手动输入] @/views/user/List.vue
"上次运营配错了，/user/list 写成 /user/lists，页面打不开找了 ...
THREE.js 摄像机分享
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
前置代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,
body {
margin: 0;
height: 100%;
}
#c ...
面试官：如何解决按钮重复点击？这个问题挂了80%的人！
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
前言
还记得上周我们团队在招聘前端工程师，一个看起来经验丰富的候选人坐在我对面。
"你们项目中是如何处理按钮重复点击的问题的？"我抛出了这个看似简单的问题。
"这个简单，使用防抖就可以了。"他很快回答。
然而，当我继续追问细节时，他却陷入了沉思...
实际上，这个问 ...
利用自定义html元素实现支持实时修改的高亮代码块
利用自定义html元素实现支持实时修改的高亮代码块
代码块高亮是前端开发中常见的需求，尤其是在展示代码片段的博客、文档等场景中。市面上有很多成熟的代码高亮库，比如Highlight.js、Prism.js等，它们都能很好地实现代码高亮功能。
通常的高亮代码块是“静态”的，修改代码内容后需要对DOM元素重新应用高亮样式。由于涉及D ...
这 5 个冷门的 HTML 标签，能让你少写 100 行 JS
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
大家好!😁。
Code Review 的时候，我最怕看到什么？
不是复杂的算法，也不是什么正则。而是明明一个 HTML 标签就能搞定的事，有人非要写几百行 JS + CSS 去重新发明轮子 。
前几天，我看到一个新同学为了写一个折叠面板（Accordion），引入了一个重型的第三方库，还写了一堆 ...
CSS 有什么奇技淫巧？
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
aspect-ratio
宽高比
<style>
div {
width: 190px; /* 注意，这个数字要能容纳完内容才有效 */
aspect-ratio: 16 / 9;
background: tomato;
}
</style>
<div>我永远保持 16:9</div>
如果，你 aspect-ratio 的值写成 1 ，那么就可以得 ...
wangeditor5自定义扩展设置图片宽高（px）
wangeditor设置图片宽高默认有30%、50%、100%三种等比缩放选择，但是有的时候需要按照像素控制图片大小不在乎图片是否有拉伸的情况。所以只能编写设置图片宽高的自定义扩展。
编辑
1、设置图片大小最好就是与原生一样放置到选中工具栏上最合适，且因为要设置宽高两种属性所以用弹窗嵌套表格方便填写。
2、查看官方文档 ...
Vue 中的 deep、v-deep 和 >>> 有什么区别？什么时候该用？
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
“你用 Element Plus 写了个按钮，想改下 hover 颜色，结果死活不生效！最后查了半天，发现得加个 :deep() 才行”
其实，这是 Vue 中一个非常常见的坑：样式作用域冲突。那为什么用 UI 库时，加上 :deep()、::v-deep 或 >>>后，样式就能生效呢？
它们是什么？有什么区别？什 ...
vue 甘特图 vxe-gantt 自定义任务条插槽模板的用法
vue 甘特图 vxe-gantt 自定义任务条插槽模板的用法
https://gantt.vxeui.com
过设置 taskBar 插槽来自定义模板
<template>
<div>
<vxe-gantt v-bind="ganttOptions">
<template #task-bar-overview="{ row }">
<div class="custom-task-bar" :style="{ backgroundColor: row.bgColor }">
<d ...
