实现元素方向感知

8 月 23 日
阅读 3 分钟
177
html元素方向感知有时候我们需要获取鼠标从元素的哪个方向进入,从而实现一些效果。例如一些方向感知提示。有时候也需要知道我们鼠标当前落在元素的哪个象限。来控制元素应该朝向哪个区域拓展。 {代码...} 讲此代码创建一个html粘贴进去,用浏览器打开,查看控制台,就可以看到。进,出,以及鼠标落在元素哪个方向。
封面图

无界微前端环境不能加载svg,导致图标丢失问题解决

5 月 13 日
阅读 1 分钟
207
在无界微前端环境下,svg图标偶尔会加载不到。或者说是第一次能加载,后面再打开同样得页面就加载不到了。这种问题我们通过plugins来解决!

Blob, Base64, File, FileReader的一篇搞懂

4 月 12 日
阅读 5 分钟
1.2k
本文目的是让同学们以后遇到流类型文件处理时候不在发怵,第一时间可以通过我的文章搞定你的需求Blob其属于浏览器File API的一部分:type: 值类型是string,通常是MIME-typeblobParts: 一系列其他Blob对象,string,或是BufferSource {代码...} {代码...} 方法 Blob对象不可修改,类似字符串,但可以通过slice创建一个新的 {...

vscode配置相关,用于工程化方面统一性

3 月 30 日
阅读 1 分钟
264
不要动vscode自己的settings.json在当前项目的根目录下创建一个.vscode文件夹。文件夹内创建settings.json;这样就不影响你的项目工作空间。

以同步的方式实现事件监听

1 月 29 日
阅读 2 分钟
401
点击按钮则会发现控制台会打印相应文字;如果只需要监听10次就失效,可以用for循环。我学了上面这个有什么用呢?可以实现一个元素绑定的事件点击第几次时候触发。或者每次点击都可以通过下标执行不同任务。

V8引擎编译js原理

1 月 28 日
阅读 2 分钟
233
网络请求》scriptText》Parser转义》AST》Ignition编译》ByteCode字节码》提取循环执行》优化编译器执行js代码解析源码并转成抽象语法树(AST)基于AST,Ignition解释器产出字节码同时运行代码并收集类型反馈引擎检测到常用行为(循环)发生,以及使用的数据类型,为了更高效,字节码可以反馈数据一起被发送到优化编译器。...

nuxt3安装总是失败,问题解决。

1 月 25 日
阅读 1 分钟
1.5k
我们安装nuxt时候总是总是报错,怎么更改npm源都不管用。即使用了科学上网,也不管用,着急忙慌,又没办法。还一直报一下错误:本质原因是因为github很难用以前那种服务形式下载到资源了。因此解决办法来了。去这个网址[链接]下载好的文件解压在任意你要创建项目的地方;例如我解压到D盘:进入starter-3文件夹,并执行ya...

fetch为例,即Suspense的底层实现原理

2023-12-12
阅读 3 分钟
481
在开发时候如果遇到一个函数需要调用内部接口才能实现其函数功能,函数又依赖其他异步函数。则就会导致每个函数都变成了异步函数。如何解决这种传染性?如下例子:

使用svg动画实现数据流动画图

2023-12-12
阅读 6 分钟
1.4k
分析:拿到设计稿后我们首先要做的是分析此图该用哪种技术实现?第一步:应该使用定位实现图中的文本和静态元素第二步:难点分析;需要动态展现数据流。这里因为动画很简单,所以选择svg实现。第三步:布局,以及排版;把设计稿先固定宽高,以后通过缩放实现适配。

使用canvas如何实现一个音乐频谱?

2023-12-09
阅读 5 分钟
907
看到跳动的音符你难道不想知道它是如何实现的么?开撸!问:实现这个有什么用呢?答:装杯用!😥其实这个操作能实现音频效果器。就是主播开麦后大妈声音变成少女,男人声音可以变女声!😱因为音频分析器可以拿到音频的频谱,既可以改变音调啊音色啊什么的就可以实现音频效果器!🐷不想看我啰嗦的直接看最后,有整体html+js...

如何实现话题功能?

2023-12-04
阅读 2 分钟
673
实现输入 这里我们可以想到使用textarea,但textarea无法支持富文本。因此排除!顾使用div的contenteditable属性;如下: {代码...} 这样此div就是一个可编辑div了,且内部可以使用富文本;如下: {代码...} 可以看到标签内的“#我是红色#”呈现红色状态。

微前端下element-ui弹框偏移问题解决

2023-08-29
阅读 6 分钟
4.4k
本章主要是解决无界微前端环境下element-ui弹框偏移问题,如果你用的是其他微前端框架,且提供了jsloader这种预处理器,则可以举一反三解决同样的问题。如果不想看我废话,请直接移步到5看代码和后面的效果图【此方法已经废弃,因为官网更新了源码。现在直接看6.新方法测试可以不偏移】。1. 首先,我使用的是无界官方源...

element-ui的el-dialog和el-drawer当鼠标拖动到遮罩层会触发关闭bug修复

2023-08-23
阅读 2 分钟
2k
我们在使用el-dialog和el-drawer时候,当弹框内有表单,用户不小心想复制个内容,拖动光标,最后光标落点在dialog或者drawer的遮罩层,导致弹框关闭,而将用户辛苦填写的内容给清除掉了。这是甲方爸爸忍受不了的!!!因此就出现了我这个解决办法!在src目录下,(既和main.js)同级创建一个名为fixMouseOutsideAutoClos...

小白上学之webpack5 - 第五章 webpack5的loader配置

2023-05-25
阅读 2 分钟
969
loader用于处理其他类型资源;什么是其他类型?就是各个类型都行,例如:css,scss,sass,stylus,ts,png,jpg,jpeg,font,svg...你能想到的所有资源都可以通过此属性来处理,包括路径处理,文件处理,不支持的语言解析都可以通过这个处理。

小白上学之webpack5 - 第四章 webpack5的output配置

2023-05-24
阅读 1 分钟
1.2k
在webpack.config中output包含以下属性:path:代码打包后要输出的位置,且为绝对路径: 例如:path.resolve(__dirname, 'build'),则打包后的代码都会输出到当前目录下的build文件夹内。

小白上学之webpack5 - 第三章 webpack5的entry配置

2023-05-14
阅读 3 分钟
1.3k
webpack默认入口entry: src/index.js,出口为:dist/main.js默认配置文件为:webpack.config.js如果需要指定其他配置文件,可以使用--config

小白上学之webpack5 - 第二章 webpack5的初入门

2023-05-14
阅读 4 分钟
1k
上一节完成nvm、nrm、node和npm的各项配置后,这一章就开始安装webpack5webpack5安装随便找个位置新建文件夹,起名为:webpack5进入该文件夹,命令行输入: cd webpack5再次输入npm init或者npm init -y -y意思是一路yes查看文件夹, 发现多了一个名为package.json的文件,文件内容如下: {代码...} 再次输入:npm install...

小白上学之webpack5 - 第一章 nvm、nrm、node的配置是前提条件

2023-05-14
阅读 2 分钟
895
问:都什么年代了!怎么还有人用webpack啊?答:都什么年代了怎么还有人不会webpack啊!其他:vite傲视群雄,你们都是弟弟再其他:rspack、trubopack、farm等,你当我是空气啊!AI:我 chat-GPT来袭谁敢挡我!!!小声嘀咕:教练,我想学习webpack5...那好!听到有人说想学webpack5,我来了,嘿嘿!

无界微前端环境中wangEditor, QuillEditor富文本编辑器无法正常使用问题解决

2023-03-30
阅读 1 分钟
3k
微前端环境中:问题:wangEditor: 无法修改,且无法粘贴复制QuillEditor:无法使用工具栏,随意点击后,控制台报错对于wangEditor解决办法: {代码...} 具体原理:子应用运行在 iframe内,dom在主应用的shadowdom中,当选中文字时,在主应用监听selectionchange,并且通过 document.getSelection()获取选中的selection,...

无界微前端,子应用使用原生js绑定事件后获取e.target为null解决办法。

2023-03-23
阅读 2 分钟
1.5k
当我们使用微前端时候,不得不用原生js绑定事件,且要获取当前绑定事件的dom时候,发现没在微前端环境中e.targe是有值的,但放到微前端环境下e.target就成了null, 导致后续操作没法实现,影响使用,因此可以使用以下方式解决。问题: {代码...} 解决办法: {代码...} 如果你比较细心想区分是否在微前端环境中,再使用不...

无界微前端环境下MonacoEditor鼠标错误问题解决办法

2023-02-17
阅读 1 分钟
2.5k
在使用wujie微前端框架内的子应用MonacoEditor会出现光标标错误问题。原因是因为:MonacoEditor 的 document.caretRangeFromPoint 在无界中无法兼容。MonacoEditor 其实已经考虑到了 shadowRoot 的情况,但是 MonacoEditor 和 无界没有兼容的地方在于 MonacoEditor 认为shadowRoot 一定在 document.body 内部,而无界子...

无界微前端作为子应用引入高德或百度地图removeChild报错问题解决

2023-02-15
阅读 1 分钟
1.6k
高德或者百度地图的外链script触发了高德地图的回调函数。回调函数里的有document.body.removeChild的逻辑,要删除高德的外链script。但在wujie插件中配不配置jsIgnores,高德地图的回调函数removeChild都无法删除出现以上问题我们可以使用一下方法解决: {代码...} 同理也可以举一反三遇到类似的问题,都可以通过此操作...

el-table多列同时排序且样式保留(多用于后台排序)

2023-01-11
阅读 2 分钟
4.1k
element-ui的el-table仅才支持单列(一个字段)进行排序,想要支持多列排序,首先要定义一个数组,用于存放所有排序的字段及其顺序,设置列sortable=“custom”,结合sort-change事件,在点击排序箭头时进行排序操作

无界微服务框架,子应用动态script加载的js,无法访问到上一个js内的全局变量,问题解决

2022-10-26
阅读 1 分钟
825
无界前端微服务框架,子应用通过script加载的js,在加载完成后,又通过动态生成script标签方式加载的js无法访问到上一个js内的全局变量无界微前端的子应用内出现动态加载的js无法访问问题解决办法:问题如下如何解决把动态加载的这个js的script 的type 改成 type="text/module" 即可解决。既: {代码...} 最终形成这种形...

前端微服务跨域配置解决办法,devServer为例

2022-09-26
阅读 2 分钟
6.4k
devServer: 而我们更多的时候是在开发阶段(webpack/vite等等打包工具)【只要是devServer这种服务器框架,都有类似的代理功能】就需要通过跨域进行联合开发各个子应用部分功能.

前端跨域问题解决办法, Nginx配置为例

2022-09-19
阅读 3 分钟
3.3k
💡 Tips:可以将多个系统融合成一个系统,无技术壁垒,可以像iframe一样实现功能组合● qiankun (阿里支持)● micro-app (京东支持)本人推荐● wujie (腾讯支持)本人推荐● lingjie 携程支持(团队已跑路)

使用flex布局解决经典布局中overflow必须设置高度才能滚动问题

2021-11-11
阅读 3 分钟
7.4k
上面的布局方案主要是要理解flex-shrink为0表示不会被压缩,配合上height为0,flex为1一起就表示永远会占满剩下的区域,不会超出也不会被压缩。这样不用使用定位方式可以轻松实现这种布局,当然也可以用在移动端,例如现在的饿了么,美团外卖等这种类型的布局,直接可以通过上面代码实现。

不知有多少个异步任务,但当有任务的时候就需要按顺序执行,js异步任务列队实现

2021-04-02
阅读 2 分钟
1.6k
当你不知道有多少个异步任务需要按顺序执行的时候;举例场景:有一个扫描仪,上面放有N个待扫描文件(其中有特殊文件需要分组);每次扫描完成后,扫描仪会将数据返回,且返回数据需要调用接口才可以识别处理哪个是特殊文件用于分组。特殊文件后面的文件就属于当前这个组的;图来表述:

微信小程序内使用canvas绘制自定义折线图表

2019-04-10
阅读 8 分钟
5k
话不多说,最终实现效果如下:图中难点:圆角矩形绘制;转载他人帖子:看此处:[链接][链接]最左或者最右边的气泡需要做动态偏移本项目是由mpvue写的小程序:所以用的是vue的书写格式(微信小程序可以自行修改):使用方法:将下列代码新建linechart.vue文件再项目中调用本组件的drawAll方法传入日期和值即可代码中有少...

当node升级后导致webpack打包出错,node-saas出问题的解决办法

2018-12-12
阅读 2 分钟
4.1k
解释原因:saas是一个日本人搞得ruby语言中使用的一个预编译器,以前使用的时候我们需要安装ruby环境,后来gulp整合了saas也是挺好用的,但是,node-saas就需要python环境了,所以很多人又不知道,就升级了node,导致node-saas无法使用了,由于我使用了vue-element-admin这个架子,但自带的是node5.6.0这个版本,当需要...