eadela的博客

原创 ResizeObserver保持俩个div大小一致或者同时监听多个元素

大家在遇到需要监测DOM元素尺寸大小的需求时，可能第一时间想到的都是使用来监听resize事件，但是reize事件会在一秒内触发将近60次，所以很容易在改变窗口大小时导致性能问题。因为它会监听我们页面每个元素的大小变化，而不是具体到某个元素的变化。如果我们只想监听某个元素的变化的话，这种操作就很浪费性能了。并且只有在window对象才有resize事件（其他hack方法，比如resize事件，scroll事件，requestAnimationFrame等等）某个节点的出现和隐藏某个节点的大小变化。

原创 monaco-editor组件封装，直接拿去用

1、项目需要使用monaco-editor，手动封装了一下。2、支持语言aviatorscript，进行自定义。

原创 element emitter broadcast向下广播 dispatch向上分派

而 Broadcast 则会在所有子元素中调用处理程序，所以在一个具有多层嵌套元素的页面上，可能会有多个元素响应同一个 broadcast 事件。在这种情况下，父元素会将事件传递给其子元素，直到找到一个可以处理该事件的元素。call()方法的作用和 apply() 方法类似，区别就是 call()方法接受的是 参数列表，而 apply()方法接受的是 一个参数数组。call()和apply()这两个方法的作用可以简单归纳为改变this指向，从而让我们的this指向不在是谁调用了函数就指向谁。

原创 pc端和移动端hover的冲突解决

所有设计:hover的样式，均使用如下代码包裹。

原创 vue3生成二维码

【代码】vue3生成二维码。

原创 pc端 复制到剪切板

【代码】pc端 复制到剪切板。

原创 @toast-ui/vue-editor中Viewer和Editor封装与使用

使用@toast-ui/vue-editor富文本编辑 封装editor和viewer

原创 picgo提示400错误信息上传失败

是因为你的仓库中已经存在了 与你想要上传的图片 同名称的图片，为防止冲突而提示 400 上传失败：解决方案：1️⃣ 删除远程仓库的同名图片或修改其图片名称2️⃣ 修改你想要上传的图片的图片名称

原创 js中if条件存在的类型转换简单规则 强制 ToBoolean 抽象方法

条件语句如 if 语句使用强制 ToBoolean 抽象方法来计算它们的表达式，并且始终遵循以下简单规则：''

原创 error: Two output files share the same path but have different contents: node_modules\.vite\..xxx.js

新installl的包，报错如题，解决方法，将包安装到上个版本。

原创 js中blob请求返回错误解析

请求xlsx文件后，返回错误，解析接口返回错误信息

原创 js解析和封装url方法

【代码】js解析和封装url方法。

原创 iframe回调window.parent第三方地址，域名显示第三方地址

iframe回调window.parent第三方地址，域名显示第三方地址需求：主页面iframe切套第三方数据源页面，数据源执行操作后，回调传入的地址，而不是主页面域名问题：本地回调页面没有内容，网速慢会白屏，可以diy一些内容，比如等待跳转中。。。

原创 vue识别富文本（v-html和特殊函数）

vue识别富文本（v-html和特殊函数）

原创 javascript生成ics、日程、日历

js生成.ics js生成日程js生成日历

原创 【无标题】图片

最真实的

原创 sass或less文件中的波浪线～引发的问题

@包 引入less文件无法简析，会在前面加‘./’

原创 ref、toRef使用比较

ref toRef使用比较

原创 JSX提示Parsing error: Unexpected token ＜eslint | Parse errors in imported module ‘./Demo9‘: Unexpected

jsx在vue中配置出现问题

原创 vue导出excel文件，wps提示无法打开文件，【responseType: ‘blob‘ 】

vue导出excel文件，wps提示无法打开文件，【responseType: 'blob' 】

原创 cnpm/npm私有源注册

私有源添加

原创 setInterval定时器封装(settimeout\requestAnimationFrame),代码抽离，浏览器切换后定时器停止执行

需求：点击按钮，请求成功返回后，置灰60秒倒计时，不允许点击碰到问题：1、页面有个loading，在loading为true时，加载超过1秒后，计数不连贯2、代码写到一个文件中，耦合严重3、浏览器切换后定时器停止执行，浏览器切换tab页面后，切换回去，仍有计数，并停止解决方法1、在loading结束后，再开始计数2、抽离代码，模块化3、浏览器监听事件 document.addEventListener(‘visibilitychange’,()=>{})浏览器标签页被隐藏或显示的

原创 :root之CSS变量var

前端黑科技:root之CSS变量var，从此Sass/Less是弟弟（上篇）用过sass或leass的都知道，主要他们可以有嵌套和变量以及函数功能，其实在原生css中，已经开始逐渐支持，诚然目前只有你我熟知，而他人还处在萌芽中，了解css变量，你会发现CSS从此变得异常强大。变量的声明声明变量的时候，变量名前面要加两根连词线（–）// 局部声明body { --foo: #ed145b; --bar: #F7EFD2;}// 全局声明:root{ --foo: #ed145b;

原创 The page at ‘xx‘ was loaded over HTTPS, but requested an insecure frame ‘http:xxx‘. This request has

https系统使用iframe内嵌一个外部https地址，外部地址执行完毕后，会回调到一个外部http地址导致出现如下报错，无法跳转http页面Mixed Content: The page at 'xx' was loaded over HTTPS, but requested an insecure frame 'http:xxx'. This request has been blocked; the content must be served over HTTPS.加这个没有起到作用&l

原创 提交代码时husky报错Error [ERR_UNSUPPORTED_ESM_URL_SCHEME]: Only file and data URLs are supported by the def

本人将node 版本由v14.13.0升级到v14.18.2,解决internal/process/esm_loader.js:74internalBinding(‘errors’).triggerUncaughtException(^Error [ERR_UNSUPPORTED_ESM_URL_SCHEME]: Only file and data URLs are supported by the default ESM loader. Received protocol ‘node:’at

原创 前端模块化各种类型区别

1、全局函数将不同的功能封装成不同的全局函数问题：污染全局命名空间，容易引起命名冲突，而且模块成员之间看不出直接关系2、命名空间对象封装：减少了全局变量，解决命名冲突问题：内部状态可以被外部改写3、匿名函数自调用数据私有，将接口通过闭包暴露出来问题1.当模块之间有依赖关系时不好处理2闭包并不是很好理解4、现代模块化规范以文件为模块，有自己的作用域在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。4.1、commonjs特点：1文件作用域2.缓存3同步加载问题

原创 谷歌插件使用记录

记录本人使用过的谷歌浏览器插件

原创 前端提效开发框架

https://landing.ant.design/Ant Design Landing平台拥有丰富的各类首页模板，下载模板代码包，即可快速使用，也可使用首页编辑器，快速搭建一个属于你的专属首页imgcook/设计稿智能生成代码

原创 webpack打包bundle原理分析

自己写一个webpack- 读取到配置入口 - 入口模块的路径 - 模块分析 - 模块的依赖（依赖的路径） - 可以用递归的方式处理依赖模块 - 内容处理 - 依赖图谱对象（处理后的内容代码） - webpackBootstrap函数- 读取到配置出口 - 生成文件 - 文件存放的位置 - 文件的名称webpaci.config.jsconst path = require("path");module.exports = {

原创 npm config配置

npm config命令npm config lsnpm config listnpm config ls -lPS C:\Users\zhiqing.wang> npm config list; cli configsmetrics-registry = "http://registry.npmjs.org/"scope = ""user-agent = "npm/6.13.4 node/v12.14.1 win32 x64"; userconfig C:\Users\zhi

原创 antv-X6-vue3脑图总结

原创 antv-X6-Vue3总结03-Vue节点配置

channelReferral.vue 节点组件<template> <!-- 多波次 --> <div class="node-box"> <Icon type="cancel-questionnaire" class="icon" /> <p> 渠道转介 </p> <div class="child"> <Button type="text" @click="edi

原创 antv-X6-Vue3总结02-普通节点配置

<!-- * 节点与边的交换--><template> <div id="containered" ref="containered" /></template><script lang="ts" setup>/*eslint-disable */import { ref, computed, onMounted } from 'vue'import { Graph, Shape } from '@antv/x6';con

原创 SVG节点演示

<!-- * SVG演示 元素 描述 line 创建一条简单的线。 rect 创建一个矩形。 g circle 创建一个圆形。 ellipse 创建一个椭圆。 polyline 定义由多个线定义构成的形状。 polygon 创建一个多边形。 path 支持任意路径的定义。--><!DOCTYPE html><html><head></head><body> <svg xmlns

原创 antv-X6-Vue3总结01-画布配置

1、画布配置// 画布初始化配置export const initInfo: any = { snapline: { // 对齐线 enabled: true, sharp: true, // 是否显示截断的对齐线-对齐线变短 }, selecting: { // 点选/框选，默认禁用。 enabled: true, // rubberband: true, // 框选 // 是否显示节点的选择框，默认为 false，建议使用下面的样式定制方法去定制自

原创 eslint中typescript常用注释

// @ts-ignore // 忽略本行校验/*eslint-disable */ 不使用// eslint-disable-next-line max-len 取消最大行限制

原创 Expected linebreaks to be ‘LF‘ but found ‘CRLF

Expected linebreaks to be 'LF' but found 'CRLF遇到俩次了第一次克隆到本地后有个文件出现这个提示自己本地配置了lintconfig文件解决第二次，使用git 的revert(还原)操作后，出现删除还原后，还是同样存在项目是仅仅我一人编辑提交最后，将另一个套代码中文件赋值过来解决，本人觉得git或tortoist有关...

原创 google开发可能用到的插件

1、Axure RP 查看原型图2、Vue devtools vue开发工具3、clear cache 清理缓存4、极简多平台账号开发工具 切换平台账号

原创 [iview]Table中使用Switch-标签写法

{title: ‘操作’,width: 200,align: ‘center’,fixed: ‘right’,render: (h, params) => {const { row, row: { id } } = params;let status = true;let color = ‘blue’;let text = ‘默认(操作)’;switch (params.row.status + ‘’) {case ‘1’:status = true;color = ‘blu

原创 2021-08-25

vscode中setting.json配置{“git.ignoreMissingGitWarning”: true,“editor.fontSize”: 14,“editor.fontWeight”: “100”,“editor.multiCursorModifier”: “ctrlCmd”,“editor.snippetSuggestions”: “top”,“editor.tabSize”: 2,“editor.formatOnPaste”: true,“explorer.confir