文字逐行显示 一、先看效果 二、实现思路1、复制一层文字放在实际文字上2、通过控制上层文字的背景颜色的 渐变属性的百分比 实现文字逐渐展示的视觉效果 三、代码示例1、html部分 <div class="body"> <div class='box'> <p> React是用于构建用户 2024-10-08 #css #text #animation
纯css弹窗处理 一、使用情况最开始是要做一个高德地图展示,需要在多个 market 上展示弹窗,但是高德地图的 infoWindow 同时只能存在一个,所以需要自己写 market 的逻辑 可以直接使用react-amap这个包给market传入组件就不需要考虑这个问题 二、实现思路1、利用 type 为 checkbox 的 input 标签的选中和非选中实现两种状态2、 css 中的选择器实现 style 2024-07-11 #css
sheetjs带样式导出 一、引入需要的包在 sheetjs 中只能导出默认不带样式的表格,如果需要表格宽度、字体颜色、单元格背景颜色等,需要引入另外的包 npm install xlsx-js-style 二、使用使用 xlsx-js-style 和 sheetjs 的形式相差不大,需要从 xlsx 中导出 写文件的方法 import { utils, writeFile } from " 2024-07-11 #sheetjs #xlsx
vlmcsd 部署 在 Debian 中部署1、首先从 Github 中下载构建好的二进制文件https://github.com/Wind4/vlmcsd 2、在目录中找到适合运行环境的文件例如:\binaries\binaries\Linux\intel\static\vlmcsd-x64-musl-static 3、通过 SFTP 上传到 Debian 的目录中,再复制到合适的位置cp /temp/vlmcs 2024-04-24 #kms #windows #linux
开发中端口号乱跳 一、情况概述使用 windows 11 开发,在偶然的情况下会出现 1888、8080、8000 端口被占用,导致项目启动到别的端口号上,甚至每次启动都不一样 当这个情况出现后,可能重启一次能解决问题,可能一直重启都无法解决问题,并且使用 netstat -ano | findstr [端口号] 也无法找到占用端口的程序,但是项目无法正确的在 1888 上启动 二、造成这种情况的原因1、wind 2023-10-26 #windows #vue #nodejs #react #vite #port #webpack
sheetjs导入和导出 一、引入 xlsx 包import { utils, writeFile, read } from "xlsx"; 二、读取一个文件1、通过传统的方式读取文件兼容性比较好的方式,创建一个 type 为 file 的元素然后点击它 const inputDom = document.createElement("input"); inpu 2023-10-12 #sheetjs #xlsx
amd显卡光标变白 如果使用了 amd 的 GPU 包括 apu,独立显卡,会出现鼠标移动到浏览器地址栏光标变白色的问题,会有一个时刻找不到光标位置,但是在截图和录屏中是正常的 解决方案: 一、更换 windows 光标样式通过win+i打开设置面板,在左侧找到设备-鼠标,进入到鼠标设置后在右侧蓝色文字 “其他鼠标选项”,弹出鼠标属性窗口,切换到指针tab页,更换文本选择的指针样式。 二、在关闭硬件加速在浏览器、o 2023-04-09 #AMD #openGl #win
鼠标移入方向的解决方式 前言先看一个效果 很简单,通过鼠标移入方向的不同做一些操作,在这个例子中只讨论实现判断鼠标移入方向的方式 思考 例如在这个蓝色方框中,通过对角线分割四个单独的三角形,我们在三角形的焦点建立一个坐标系,在这个方框中对于当前坐标系来说,我们只要计算出来方框中某一个点在坐标系中的位置到原点的连接线相对于 x 轴正轴方向的角度就可以判断出点在方框中的位置。 代码// 获取元素 const conta 2023-03-12 #animation #js
BEM命名管理样式 前言做 VUE 开发最常使用的就是 elementUI/elementPlus,使用中发现 element 的元素类名起的非常规整,结合自己开发中的困难(指不知道怎么起类名),看一下如何优雅的使用 BEM 命名 BEM 介绍BEM 是一种针对 CSS 的命名规范的简称,B/E/M 分别代表,块(Block),元素(Element),修饰符(Modifier)的简写。以 2023-02-25 #css #element
css_clip-path clip-path “clip-path的作用是使用裁剪方式创建元素的可显示区域。区域内的部分显示,区域外的隐藏。” 直接写在选择器中: div{ width:50px; height:50px; clip-path:xxxxx; } 基本语法clip-source | basic-shape | geometry-box | none \ 分别表示: 2022-12-12 #css