弃用 html2canvas!快 93 倍的截图神器
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
在前端开发中,网页截图是个常用功能。从前,html2canvas 是大家的常客,但随着网页越来越复杂,它的性能问题也逐渐暴露,速度慢、占资源,用户体验不尽如人意。
好在,现在有了 SnapDOM,一款性能超棒、还原度超高的截图新秀,能完美替代 html2canvas,让截图 ...
vxe-table 如何自定义排序图标按钮,自定义排序
vxe-table 如何自定义排序图标按钮,自定义排序
查看官网:https://vxetable.cn
gitbub:https://github.com/x-extends/vxe-table
gitee:https://gitee.com/x-extends/vxe-table
使用表头排序按钮插槽 sort 来自定义模板
<template>
<div>
<vxe-grid ref="gridRef" v-bind="gridOptions">
<template #name ...
移动端h5适配方案
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
em + PostCSS插件
使用PostCSS插件将项目中的px单位自动转换为rem,搭配JS动态设置根字体大小(监听window.resize)。
vite配置
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pxtorem from 'postcss-pxtorem'
// https://vite.dev/co ...
CSS尺寸、盒子模型、定位、浮动与布局(Flex/Grid)
CSS尺寸、盒子模型、定位、浮动与布局(Flex/Grid)
尺寸单位: px,em,rem,fr
各单位定义
px (像素): 相对固定的单位,代表屏幕上的一个物理点。在高分辨率屏幕上,1个CSS像素可能对应多个物理像素。
em: 相对单位,相对于父元素的字体大小。如果父元素字体大小为16px,则1em = 16px。
rem (root em): 相对单位,相对于根 ...
【金融行业案例】借助DHTMLX打造高效银行排班与管理系统
作为全球知名的前端控件开发商之一,DHTMLX 一直致力于为企业提供灵活、高效的 JavaScript 界面组件。近日,DHTMLX 再次与北美软件开发商 oint Enterprises Inc. 展开深入交流,了解其基于 DHTMLX Suite 与 Scheduler 的银行员工排班系统 StaffPro® 的最新成果。该系统通过灵 ...
vxe-table 树形表格显示连接线的方式
vxe-table 树形表格显示连接线的方式
完整连接线
通过 tree-config.showLine 来启用是否显示连接线
<template>
<div>
<vxe-grid v-bind="gridOptions"></vxe-grid>
</div>
</template>
<script setup>
import { reactive } from 'vue'
const gridOptions = reactive({
showOverflow: true,
border: 'outer', ...
前端表格工具AG Grid 34.3 发布:重磅引入AI工具包,全面支持 React 19.2!
近日,全球知名的前端表格工具AG Grid 发布最新版本 v34.3!本次更新带来了全新的AI工具包(AI Toolkit)、列宽自适应与数据透视增强功能,并正式支持React 19.2,助力开发者打造更智能、更高效的数据可视化体验。
AG Grid最新版试用,请联系AG Grid官方合作伙伴慧都科技
核心亮点一览
AI Toolkit —— 基于大模型 ...
Web前端入门第 89 问:总结 8 种跨域通信处理方案
为什么会跨域?跨域是谁附加的限制?为什么 APP 不会有跨域问题?
首先跨域问题是由于浏览器的同源策略(Same-Origin Policy)导致的,基本上所有浏览器都有限制,默认情况是不允许跨域访问的!!
APP 的请求不受浏览器的同源策略限制,所以不存在跨域。类似一个服务器像另一个服务器发起请求一样,也不会受跨域影响。
想想 ...
【前端效率工具】:告别右键另存,不到 50 行代码一键批量下载网页图片
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
先看效果:在素材网站一键批量保存所有图片
废话不多说,直接上手!
项目结构
image-downloader-extension
├── manifest.json # 扩展的"身份证"
└── background.js # 插件后台脚本
创建文件夹 image-downloader-extension
创建manifest.jso ...
FFmpeg开发笔记(八十六)基于Node.js的国产视频编辑开源框架OpenCut
《FFmpeg开发实战:从零基础到短视频上线》一书的“第 12 章 FFmpeg的移动开发”介绍了如何使用FFmpeg在手机上剪辑视频,方便开发者更好地开发类似剪映那样的视频剪辑软件。那么在桌面系统上还有一款国产的开源视频编辑框架OpenCut,通过该框架可以更快地加工编辑视频文件,下面就来介绍如何在桌面系统中使用OpenCu ...
上传图片后图片加载失败,或因后台ftp传输共享目录延迟导致获取不到
在前端上传图片后,通过ajax传输至后台服务器,后台服务器通过ftp方式将文件发送至共享目录中,或因传输延迟或共享目录同步延迟导致前端无法获取到已上传的图片信息,这时需要对图片进行重新加载处理。
进行重新加载时需考虑加载次数以及加载时间,当图片加载失败时,通过重试机制重新加载图片。随加载次数递增,延长加载时 ...
别再说我不懂Node"流"了
Nodejs中包括4种类型的流:Readable、Writable、Duplex和Transform.
Readable Stream
自定义Readable
自定义 Readable 流必须调用 new stream.Readable([options]) 构造函数并实现 readable._read() 方法。
import { Readable } from "node:stream";
const readable = new Readable();
readable.on("data", (chunk) => ...
vivo 前端三剑客发展历程及原理揭秘
作者: vivo 互联网前端团队- Han Xuejian、Zhang Hao异地协作模式,给开发和测试间的问题沟通及定位带来了诸多挑战。本文从前端开发视角出发, 阐述在这过程中遇到的痛点,探索解决的思路,并在过程中成功孵化出技术工具“前端三剑客”,文章深入解析了“前端三剑客”技术的实现原理及应用场景。
1分钟看图掌握核心观点
& ...
CSS3 超实用属性:pointer-events (可穿透图层的鼠标事件)
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
CSS3 pointer-events 属性:实现可穿透图层的鼠标事件
在网页开发中,我们通常会遇到多个元素重叠的情况。在这种情况下,如何使得被遮挡的元素仍然能够响应鼠标事件呢?CSS3 引入了 pointer-events 属性,允许开发者控制元素是否能够接收鼠标事件。通过合 ...
Vue视差标题背景
一、说明
这个我是为了放在博客的标题部分作为背景图,上下滚动的时候比较好看。
原理就是通过几张透明的png进行叠加,然后在上下滚动时,外层png移动的快,内层png移动得慢来实现视差效果。
先放一张示意图:
这里实际的距离X和Y在观察者看来是一样的,原因是距离观察者的距离Z不一样导致的。
再放一张视差标题背景的3 ...
如果使用 vxe-table 实现全键盘操作,按键切换复选框单选框的选中状态
如果使用 vxe-table 实现全键盘操作,按键切换复选框单选框的选中状态,当遇到特点需求,比如需要通过按键来选中复选框或单选框时,该功能就非常有用了。
查看官网:https://vxetable.cn
gitbub:https://github.com/x-extends/vxe-table
gitee:https://gitee.com/x-extends/vxe-table
效果
代码
通过设置 keyboard-confi ...
解决用electron打包Vue工程(Vite)报错electron : Failed to load URL : xxx... with error : ERR _CONNECTION_REFUSED
解决用electron打包Vue工程(Vite)报错electron : Failed to load URL : xxx... with error : ERR _CONNECTION_REFUSED
Background: 生产环境通过 Electron 直接加载本地文件系统中的静态资源
注:node后的状态码不重要
明明前端工程可以运行,后端连接也没问题,为什么打包完成后总是连不上网址?
网上常规的排错思路:
• ...
给VitePress的右上角增加Github角标
介绍
我没有找到VitePress的Github角标的插件,所以做了后面的嵌入流程,方案是在主题布局中直接引入。如果不知道这两个项目的同学可以看看介绍部分
github-corner
可以在页面的四角显示Github角标,可以自定义大小、背景颜色。当鼠标移动到这个角标时还能看到Github摇尾巴的动画
官网地址: https://tholman.com/github-cor ...
Pixelium Design:Vue3 的像素风 UI 组件库
👾 Pixelium Design:Vue3 的像素风 UI 组件库
Pixelium Design 是一个基于 Vue 3 的像素风 UI 组件库。我们从早期像素游戏的经典美学中汲取灵感,为现代 Web 应用带来复古风格的界面和体验。该项目的初衷是为开发者提供一系列可复用、高效能的像素风组件,让项目中轻松实现独特的视觉风格。
如果你对这个项目感兴趣,欢迎 ...
宝藏工具站!一个轻量实用的在线工具集合!
大家好,我是 Java陈序员。
在日产生活中,常常需要各种小工具来解决日常遇到的问题,比如图片处理、文本转换、编程开发等。
快速搭建!一个轻量的在线工具箱!
8.7K+ Star!快速搭建个人在线工具箱
今天,给大家推荐一个集成了多种实用功能的轻量工具集合网站,无论是日常办公、学习还是娱乐,都能在这里找到合适的工具。
...