前端开发 - 网站分类

CSS 有什么奇技淫巧？

‍ 写在开头点赞 + 收藏学会 aspect-ratio 宽高比 <style> div { width: 190px; /* 注意，这个数字要能容纳完内容才有效 */ aspect-ratio: 16 / 9; background: tomato; } </style> ...

wangeditor5自定义扩展设置图片宽高（px）

wangeditor设置图片宽高默认有30%、50%、100%三种等比缩放选择，但是有的时候需要按照像素控制图片大小不在乎图片是否有拉伸的情况。所以只能编写设置图片宽高的自定义扩展。编辑 1、设置图片大小最好就是与原生一样放置到选中工具栏上最合适，且因为要设置宽高两种属性所以用弹窗嵌套表格方 ...

Vue 中的 deep、v-deep 和 >>> 有什么区别？什么时候该用？

‍ 写在开头点赞 + 收藏学会 “你用 Element Plus 写了个按钮，想改下 hover 颜色，结果死活不生效！最后查了半天，发现得加个 :deep() 才行” 其实，这是 Vue 中一个非常常见的坑：样式作用域冲突。那为什么用 UI 库时，加上 :deep()、:: ...

vue 甘特图 vxe-gantt 自定义任务条插槽模板的用法

vue 甘特图 vxe-gantt 自定义任务条插槽模板的用法 https://gantt.vxeui.com 过设置 taskBar 插槽来自定义模板 <template> <div> <vxe-gantt v-bind="ganttOptions"> <template #task-bar-ov ...

拆解一个由 setTimeout 引发的“页面假死”悬案

‍ 写在开头点赞 + 收藏学会引言灵魂拷问你是不是也写过这样的代码？ “这个动画有点卡，加个 setTimeout 延时一下？” “这个状态更新顺序不对，给它个 100ms 缓冲？” “不知道什么时候滚动结束？先延迟个 300ms 再说！” 在前端开发中，setTime ...

为什么有些人边框不用border属性

‍ 写在开头点赞 + 收藏学会 1) border 会改变布局（占据空间） border 会参与盒模型，增加元素尺寸。例如，一个宽度 200px 的元素加上 border: 1px solid #000，实际宽度会变成： 200 + 1px(left) + 1px(righ ...

手把手教你实现前端邮件预览功能

‍ 写在开头点赞 + 收藏学会你是否曾经想过，在浏览器中直接点击一个邮件附件，就能预览完整的邮件内容——包括发件人、收件人、抄送、正文甚至内嵌图片？今天，我们要揭秘一个基于 Vue 3 和 Vant UI 的邮件预览上传组件，它不仅能上传 .eml 格式的邮件文件，还能在弹 ...

一些有用的javascript函数

作者：不爱喝橙子汁 /** * 类型检测函数 * 为typeof关键字的增强版，可以准确判断null，date类型 * 原理是使用V8引擎最初的toString方法观察数据类型 * @author 不爱喝橙子汁 * @version 1.0.0 * @param {Object} obj 任意对象， ...

关于antd前端组件a-select组件选择无效的问题处理记录

在使用公司的信息系统时，偶然发现一个下拉组件选择无效，于是看一下前端页面的代码。前端页面是基于ant Design vue组件开发，JS代码如下，主要用于获取当前登录用户所属的组织机构列表和默认的组织机构 //获取用户信息 const userInfo = tool.data.get('USER_ ...

vue2 甘特图 vxe-gantt 一行渲染多个子任务的配置

vue2 甘特图 vxe-gantt 一行渲染多个子任务的配置，但需要在父级任务直接显示所有子任务时，可以通过 task-bar-subview-config 和父级任务设置type= VxeGanttTaskType.Subview 来设置，会自动将所有子任务渲染到父级任务中 https://ga ...

那个写 width: 33.33% 的前端，终于被 flex: 1 拯救了

‍ 写在开头点赞 + 收藏学会告别百分比计算：从文档流到 Flex 弹性布局的进化之路在 CSS 的世界里，布局方式的演进就像是一场对“控制权”的争夺战。从最初顺其自然的文档流，到精打细算的 inline-block，再到如今游刃有余的 Flexbox，我们的代码变得越来 ...

大屏适配方案

前言：不同分辨率的大屏适配这个是每个前端都会遇见的问题，以前也尝试过多种方案，今天就来分享一下我尝试过的方案跟我比较推荐的方案。一、常见的大屏适配方案 1. 固定宽高 + scale 整体缩放核心思想：把设计稿当作“画布”，用 CSS transform: scale() 对整张画布缩放，保证视 ...

vue甘特图 vxe-gantt 如何将子任务显示一行在父级中，父级行内渲染显示子任务的用法

vue甘特图 vxe-gantt 如何将子任务显示一行在父级中，父级行内渲染显示子任务的用法，行内展示子任务由 task-bar-subview-config 和父级任务设置type= VxeGanttTaskType.Subview 来启用。启用后会将所有子任务渲染到父级任务中，可以直观的看到任务 ...

用 10 行代码就能当 “服务器老板”+“网络小偷”+“文件管家”？Node.js：别不信！

‍ 写在开头点赞 + 收藏学会前言当你叩开 Node.js 的大门，会发现它的内核逻辑恰似一套精密的 “后端工具链”：http模块是搭建服务的 “基建脚手架”，以极简代码就能拉起可被浏览器访问的 Web 端点；https模块是对接外部世界的 “数据导管”，能安全拉取远程接 ...

桌面新搭子！一款开源跨平台桌面宠物神器！

WindowPet —— 一款使用 Tauri 和 React 构建的宠物叠加应用程序，在屏幕上拥有可爱的宠物、动漫人物等伙伴，支持 Windows、macOS 和 Linux 系统。 ...

甲方嫌弃，项目首页加载太慢

‍ 写在开头点赞 + 收藏学会有一天，甲方打开一个后台管理的项目，说有点卡，不太满意，项目经理叫我优化，重新打包一下。从输入地址到展示首屏，最佳时间在 3秒内，否则，甲方挂脸，咱就有可能有被裁的风险，understand? 废话不多说，先来看一下怎么个优化法吧。优 ...

vue表单vxe-form如何多字段联动校验，对一个控件校验多个关联字段

vue表单vxe-form如何多字段联动校验，对一个控件校验多个关联字段。正常的表单场景是一个控件一个字段，那么配置起来非常任意，一个字段对应一个校验规则。当时某些复杂场景就不一样了，比如用户控件，有id/code/role等。比如范围日期选择，一个控件是对应2个字段的，开始日期和结束日期。这个时候 ...

vxe-table 表格 vue 单元格渲染上传附件，显示图片列表，适配上传附件样式的用法

vxe-table 表格 vue 单元格渲染上传附件，显示图片列表，适配上传附件样式的用法，在系统中渲染复制表格时，经常会涉及到附件和图片等上传问题，比如在列表单元格中需要支持上传附件，由于单元格太小，一般的组件根本无法正常显示适配，这时候就可以使用上传附件紧凑模式，通过配置更多按钮来实现。 htt ...

【案例分享】SciChart高性能数据可视化，助力某大型科研平台实现海量信号实时监测

在高精尖科研与工程应用场景中，实时可视化与海量数据处理能力是支撑复杂系统分析与决策的核心技术要素。某大型科研机构在其用于核聚变与超导体实验的监测平台中集成了 SciChart 高性能图表库，用于推进信号处理与数据可视化能力，实现对数百通道高频实验数据的实时展示与分析，为科研决策提供更有力的技术支撑。 ...

vue 表格 vxe-table 如何设置列默认不显示，用户可以手动通过工具栏设置显示

vue 表格 vxe-table 如何设置列默认不显示，用户可以手动通过工具栏设置显示。实现该方式非常简单，可以通过列的 visible 属性设置为默认不显示，然后用户可以在工具栏的自定义列里面勾选显示或隐藏。自定义方式就很方便了。 https://vxetable.cn 通过设置 toolbar- ...