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 ...
拆解一个由 setTimeout 引发的“页面假死”悬案
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
引言
灵魂拷问
你是不是也写过这样的代码?
“这个动画有点卡,加个 setTimeout 延时一下?” “这个状态更新顺序不对,给它个 100ms 缓冲?” “不知道什么时候滚动结束?先延迟个 300ms 再说!”
在前端开发中,setTimeout 就像是一剂强效止痛药。它能快速掩盖逻辑上的时序 ...
为什么有些人边框不用border属性
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
1) border 会改变布局(占据空间)
border 会参与盒模型,增加元素尺寸。
例如,一个宽度 200px 的元素加上 border: 1px solid #000,实际宽度会变成:
200 + 1px(left) + 1px(right) = 202px
如果不想影响布局,就很麻烦。
使用 box-shadow: 0 0 0 1px #000不会 ...
🔥 手把手教你实现前端邮件预览功能
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
你是否曾经想过,在浏览器中直接点击一个邮件附件,就能预览完整的邮件内容——包括发件人、收件人、抄送、正文甚至内嵌图片?今天,我们要揭秘一个基于 Vue 3 和 Vant UI 的邮件预览上传组件,它不仅能上传 .eml 格式的邮件文件,还能在弹窗中完整渲染邮件内容, ...
一些有用的javascript函数
作者:不爱喝橙子汁
/**
* 类型检测函数
* 为typeof关键字的增强版,可以准确判断null,date类型
* 原理是使用V8引擎最初的toString方法观察数据类型
* @author 不爱喝橙子汁
* @version 1.0.0
* @param {Object} obj 任意对象,例如null,undefined,date
* @return {String} 类型的全小写字符串
*/
function ty ...
关于antd前端组件a-select组件选择无效的问题处理记录
在使用公司的信息系统时,偶然发现一个下拉组件选择无效,于是看一下前端页面的代码。
前端页面是基于ant Design vue组件开发,JS代码如下,主要用于获取当前登录用户所属的组织机构列表和默认的组织机构
//获取用户信息
const userInfo = tool.data.get('USER_INFO')
//获取用户归属的组织机构列表(有多个)
const orgs ...
vue2 甘特图 vxe-gantt 一行渲染多个子任务的配置
vue2 甘特图 vxe-gantt 一行渲染多个子任务的配置,但需要在父级任务直接显示所有子任务时,可以通过 task-bar-subview-config 和父级任务设置type= VxeGanttTaskType.Subview 来设置,会自动将所有子任务渲染到父级任务中
https://gantt.vxeui.com
设置 task-bar-subview-config.showOverview 设置是否任务总览,当子任 ...
那个写 width: 33.33% 的前端,终于被 flex: 1 拯救了
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
告别百分比计算:从文档流到 Flex 弹性布局的进化之路
在 CSS 的世界里,布局方式的演进就像是一场对“控制权”的争夺战。从最初顺其自然的文档流,到精打细算的 inline-block,再到如今游刃有余的 Flexbox,我们的代码变得越来越优雅。
一、 随波逐流:HTML 文档流
...
大屏适配方案
前言:不同分辨率的大屏适配这个是每个前端都会遇见的问题,以前也尝试过多种方案,今天就来分享一下我尝试过的方案跟我比较推荐的方案。
一、常见的大屏适配方案
1. 固定宽高 + scale 整体缩放
核心思想:把设计稿当作“画布”,用 CSS transform: scale() 对整张画布缩放,保证视觉一致性。
原理:根据屏幕尺寸与设计稿尺 ...
vue甘特图 vxe-gantt 如何将子任务显示一行在父级中,父级行内渲染显示子任务的用法
vue甘特图 vxe-gantt 如何将子任务显示一行在父级中,父级行内渲染显示子任务的用法,行内展示子任务由 task-bar-subview-config 和父级任务设置type= VxeGanttTaskType.Subview 来启用。启用后会将所有子任务渲染到父级任务中,可以直观的看到任务全程进度, task-bar-subview-config.showOverview 设置是否任务总览,当子 ...
用 10 行代码就能当 “服务器老板”+“网络小偷”+“文件管家”?Node.js:别不信!
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
前言
当你叩开 Node.js 的大门,会发现它的内核逻辑恰似一套精密的 “后端工具链”:http模块是搭建服务的 “基建脚手架”,以极简代码就能拉起可被浏览器访问的 Web 端点;https模块是对接外部世界的 “数据导管”,能安全拉取远程接口的资源流;而fs模块则是连接本地存储的 ...
桌面新搭子!一款开源跨平台桌面宠物神器!
大家好,我是 Java陈序员。
每天对着空空的电脑屏幕敲代码、处理工作,是不是总少了点治愈感?想不想让软萌的小动物、心仪的动漫角色悄悄“住进”你的屏幕,成为随时能看见的暖心搭子?
今天,给大家推荐一款开源跨平台桌面宠物神器,帮助你拥有专属桌面宠物!
关注微信公众号:【Java陈序员】,获取开源项目分享、AI副业 ...
甲方嫌弃,项目首页加载太慢
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
有一天,甲方打开一个后台管理的项目,说有点卡,不太满意,项目经理叫我优化,重新打包一下。
从输入地址 到 展示 首屏,最佳时间在 3秒内,否则,甲方挂脸,咱就有可能有被裁的风险,understand?
废话不多说,先来看一下怎么个优化法吧。
优化
✅ cdn
分析
用Webpack B ...
vue表单vxe-form如何多字段联动校验,对一个控件校验多个关联字段
vue表单vxe-form如何多字段联动校验,对一个控件校验多个关联字段。正常的表单场景是一个控件一个字段,那么配置起来非常任意,一个字段对应一个校验规则。当时某些复杂场景就不一样了,比如用户控件,有id/code/role等。比如范围日期选择,一个控件是对应2个字段的,开始日期和结束日期。这个时候就可以使用 rule 规则中 f ...
vxe-table 表格 vue 单元格渲染上传附件,显示图片列表,适配上传附件样式的用法
vxe-table 表格 vue 单元格渲染上传附件,显示图片列表,适配上传附件样式的用法,在系统中渲染复制表格时,经常会涉及到附件和图片等上传问题,比如在列表单元格中需要支持上传附件,由于单元格太小,一般的组件根本无法正常显示适配,这时候就可以使用上传附件紧凑模式,通过配置更多按钮来实现。
https://vxetable.cn
附 ...
【案例分享】SciChart高性能数据可视化,助力某大型科研平台实现海量信号实时监测
在高精尖科研与工程应用场景中,实时可视化与海量数据处理能力是支撑复杂系统分析与决策的核心技术要素。近日,一大型科研机构在其用于核聚变与超导体实验的监测平台中集成了 SciChart 高性能图表库,用于推进信号处理与数据可视化能力,实现对数百通道高频实验数据的实时展示与分析,为科研决策提供更有力的技术支撑 ...
vue 表格 vxe-table 如何设置列默认不显示,用户可以手动通过工具栏设置显示
vue 表格 vxe-table 如何设置列默认不显示,用户可以手动通过工具栏设置显示。实现该方式非常简单,可以通过列的 visible 属性设置为默认不显示,然后用户可以在工具栏的自定义列里面勾选显示或隐藏。自定义方式就很方便了。
https://vxetable.cn
通过设置 toolbar-config.custom 启用列个性化设置功能,然后将列的 visible ...