【HTML5】CSS JS VUE LAYUI 前端处理
关注
分享
扫一扫
文章平均质量分 62
各种前端代码
斯幽柏雷科技
专注多媒体科技领域,对物联网/智慧展厅/智能家居/定制展示展览设备/ARVAMR/人机交互等领域有着更深的研究.凑满60个字.
展开
-
[前端]解决Iframe即使设置高度100%,但还是显示滚动条scrollbar的问题
解决iframe触发滚动条问题,overflow:auto;height:100%;原创 2024-07-24 10:26:30 · 473 阅读 · 0 评论 -
解决Iframe无论怎么设置都无法透明的问题
事出反常必有妖,但这次着实我是没想到这么离谱…我怎么也没想到Iframe不透明居然是因为深色模式导致的…原创 2024-02-15 14:20:18 · 851 阅读 · 0 评论 -
Vite插件自动编译svg图标为字体
很多时候我们在开发阶段是不能确定使用哪些图标的,它会随着开发不停的新增或调整.所以我一般会从直接下载svg图标保存起来.一开始我是直接将svg代码直接插入dom中,但总觉得这么干会浪费内存影响效率之类的…后来我就好奇平时常见的图标字库是怎么构建的…查着查着就发现了这件神器.原创 2024-01-24 05:35:45 · 1114 阅读 · 0 评论 -
在Vite5.x中使用monaco-editor
解决在Vite中使用Monaco报错问题.Uncaught (in promise) Error: Unexpected usage at _EditorSimpleWorker.loadForeignModule原创 2024-01-24 04:31:08 · 1162 阅读 · 1 评论 -
JS独占鼠标(像FPS游戏那样锁定鼠标位置)
在 JavaScript 中，你可以使用 Pointer Lock API 来实现 FPS 游戏中的鼠标捕获效果。原创 2024-01-22 20:34:32 · 516 阅读 · 0 评论 -
CSS鼠标指针表
火狐漏洞275173](https://bugzil.la/275173)：在Windows和macOS上，不允许拖放。[火狐漏洞275174](https://bugzil.la/275174)：在Windows上，所有滚动都与移动相同。在某些环境中，会显示等效的双向调整大小光标。例如，n-resize和s-resize与ns resize相同。例如，当移动从长方体的东南角开始时，将使用se调整大小光标。有些东西可以向任何方向滚动（平移）。项目可能无法放置在当前位置。原创 2023-10-03 13:08:40 · 480 阅读 · 0 评论 -
【WebContainers】浏览器内运行NodeJS研究记录
WebContainers为近年来新出的前端技术,它允许在浏览器内运行一个虚拟的NodeJS环境进行后端开发…这项技术听起来 乍一看挺牛,但本文我想说一下我试用后才发现的一些实际问题。原创 2023-10-03 10:13:21 · 421 阅读 · 0 评论 -
解决vue pointerevent事件无法更改cursor问题 抓取图标(grab/grabbing)
告诉你一个扎心的事情,Ctrl+F5就好了…原创 2023-04-21 18:52:52 · 1000 阅读 · 0 评论 -
VUE3 取Slot元素方法
如果加了一层会影响元素原有的css样式,各种css层级会产生很大问题…所以,为了不改变原有dom结构,我希望通过js操作dom的方式搞它…就比如说我要给一个元素添加自定义拖放事件,正常来说大概是这样的。//slot获取不到,但是我们自定义的div可以通过ref找到。/* 你也可以在获取到slot元素后使用v-if卸载它 */这个鬼点子是用js获取相邻元素API完成的…你既然都看到这了,也说明你被他也搞好久了…话说前面,这方法诡异的很…/* 我们还需要对自定义元素隐藏 */所以,代码大概是这样子的。原创 2023-04-20 06:18:59 · 2075 阅读 · 0 评论 -
JS勾股定理算两坐标距离(直线像素距离,非地球经纬度)
这玩意我写了不下5次了,脑子不行每次写都百度一圈费好大劲。这回写完CV一份过来,下回直接用!原创 2023-04-20 04:53:51 · 431 阅读 · 0 评论 -
Electron自定义协议Protocol对web网站做数据交互,使用SSE实时数据推送到网站
Electron对在线网站做数据交互方案,实现在线网站判断Electron调用自定义接口通讯非IPC通讯,使用自定义协议实现原创 2023-01-12 00:06:54 · 2869 阅读 · 6 评论 -
VUE2动态加载外部组件(编译后项目动态加载外部vue文件)
前言这真的是一个大坑,我花了将近一周的时间去搞它,网上搜罗了一圈发现了几个相关的案例,这里来谈一谈它们的优略势.vue自带的import()用法httpVueLoader - 从URL加载vue文件运行时渲染 - 动态运行代码(可以做组件在线编辑器)......原创 2022-02-18 01:58:47 · 7801 阅读 · 4 评论 -
H5 HTML 移动端触摸拖拽drag drop 自定义拖拽样式 使用PointerEvent模拟的拖拽方案
前言原生的drag事件有许多诟病，比如拖拽时跟随鼠标指针的那个元素样式过分简陋。比如dataTransfer在除start和drop外无法访问，从而让drop元素无法很好的判断是否接受drop。比如无法优雅的设置拖拽过程中的鼠标指针。。。。比如不支持触摸拖拽。。。。处于对多输入设备的兼容及花里胡哨的功能，我需要模拟一套drag和drop事件以实现需求。这期主要是想安利一波我探索出的一种模拟浏览器原生的拖拽元素方案，兼容各种输入设备（PC/移动端适配）PointerEvent如今能跑网页的原创 2022-02-18 01:24:52 · 4997 阅读 · 0 评论 -
svg stopPropagation失效的解决办法(pointerevent)
PS:所以这大概是一个几乎没有人翻到的帖子。如果帮到你了别忘留个赞。前言来了兄弟们,刚才发现e.stopPropagation();失效了??我正在对svg的子svg元素进行绑定事件,svg内有多级复杂的svg嵌套.子svg的点击事件依旧会触发父级svg的点击事件.原因查了圈帖子,大概似乎好像确定问题是不同根的原因.注意:这跟React不触发的原因不一样!我也是直到翻到了这哥们的帖子才找到灵感:《e.stopPropagation() 失效原因》比方说:在iframe上和iframe里原创 2022-02-16 04:38:40 · 823 阅读 · 0 评论 -
html input 限制输入字符为Number 最给力的版本
前言最近又在撸网页,遇到个输入框限制输入数字的问题,网上查了一圈都不尽人意,于是花了些时间自己写了一个,十分好用,拿来分享一下,记得点赞收藏哦!上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vie原创 2022-01-07 00:14:33 · 618 阅读 · 0 评论 -
vue拖拽不触发解决方式 @dragstart @drop
解决VUE拖拽事件不触发的各种问题.原创 2022-01-01 08:27:37 · 5761 阅读 · 0 评论 -
HTML Layui Distpicker 住址/收货地址选择 联动选择框
前言他来了,他来了,他带着BUG又来了…这次趟Layui的坑,客户巴巴要收集用户的收货地址.这需要我们有一个全国的省市区县的数据,挨个手动输入是不可能的,这辈子都不可能.然而我们并不满足默认捡漏的select界面样式,于是我们打开了layui的官方文档…看了半天发现………没有发现!文档中并没有找到我们想要的动态地址选择代码,只是简单的弄了几个option上去而已.完整的地址数据需要我们自己接入,还好我们有distpicker神器在手Distpicker库这里着重讲一下distpick原创 2020-08-20 08:23:42 · 2515 阅读 · 2 评论