基于leaflet地图实现点击点位图标，在图标边上展示信息弹窗的方案

yorcentroll — Tue, 23 Jan 2024 17:53:01 +0800

两个方案都说清楚了，请结合实际情况，选择哪个方案。

奇葩功能实现：级联选择框组件el-cascader实现同一级的二级只能单选，但是一级可以多选

yorcentroll — Tue, 11 Jul 2023 18:02:38 +0800

但是其实还有一个小问题，那就是用户还是能看到面板闪了一下的，因为被关闭了又打开了一次。但是本人已经不想折腾，谁有本事谁来解决这个问题。希望有大神看到最后，能伸出援手，给出更完美的方案，谢谢！

详细记录前端项目使用import懒加载组件打包失败的踩坑之路

yorcentroll — Wed, 07 Jun 2023 09:46:33 +0800

最后还是回到babel.config.js文件,尝试把这个配置删了'@vue/cli-plugin-babel/preset'，奇迹出现了，果然成了。

关于vue 动态引入（异步加载import和require）组件的方法和坑（按需懒加载组件，动态生成路由）babel-plugin-dynamic-import-node 优化编译速度

yorcentroll — Wed, 26 Jan 2022 15:59:04 +0800

关于vue 动态引入（异步加载）组件的方法和坑（按需懒加载组件，动态生成路由）babel-plugin-dynamic-import-node 优化编译速度

前端——在浏览器输入url后发生了都发生了什么

yorcentroll — Tue, 13 Jul 2021 09:28:00 +0800

一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？主要包括以下几个基本步骤：浏览器的地址栏输入URL并按下回车。浏览器查找当前URL是否存在缓存，并比较缓存是否过期。 DNS解析URL对应的IP。根据IP建立TCP连接（三次握手）。 HTTP发起请求。服务器处理请求浏览器接收HTTP响应。关闭TCP连接（四次挥手）。构建DOM树，渲染页面。接下来对其中几个步骤展开说一下 1. URL 输入URL后，会进行解析（URL的本质就是统一资源定位符） ..

js手写一个前端压缩图片的方法，并将代码同步到github且发布到npm

yorcentroll — Thu, 20 May 2021 11:57:10 +0800

本文档主要实现两个目标：用js写一个将上传的图片压缩的方法将自己写的代码同步到github且发布到npm 现在从0零开始操作，一步一步实现这两个目标； 1. Prepare: 先注册NPM和github账号过程省略，进入各自的官网，创建账号 npm:https://www.npmjs.com/ github:https://github.com/ 2. Coding: 结合两个目标，编码默认你已经安装了node环境，node环境也包括了npm环境新建工程文件...

根据url生成二维码，扫描打开url的两种方法编辑器

yorcentroll — Tue, 12 Jan 2021 15:49:57 +0800

js 根据url生成二维码，扫描打开url的两种方法场景产品给你一个url，让你做一个二维码，扫描二维码之后打开对应的url链接。比如：扫描之后弹出一个下载app的页面。实现先上html代码：

不用marquee标签， js 实现文本在页面上无间断水平方向滚动

yorcentroll — Tue, 05 Jan 2021 18:12:31 +0800

场景：很多人知道这个元素标签marquee，用来实现内容在窗体中自由自主滚动，就像一个led屏幕上，一直有一行字在滚动。这个标签确实很方便，可以控制方向，速度等等。但是，marquee标签却被官方在很早之前就被废弃了。所以，我们考虑可以自己写一个组件，替代marquee标签。实现：先上html代码：

关于zTree 组件，按需动态获取子节点并展示获取到的子节点的解决方案

yorcentroll — Wed, 23 Dec 2020 19:54:56 +0800

场景：其实也算是一个比较普遍的场景，就是加载树的时候，只加载某几层的节点，节点数据最多的最底层的节点不加载，而是在点击或者展开某个节点之后，根据点击或者展开的节点动态加载出获取到的子节点。这样能有效的提高加载树的性能，特别是某些层级的节点数据特别大的时候，更为明显。这里以zTree 组件为例，其他树组件思路和逻辑类似。解决方案：方案1: 点击树节点，获取该节点下的子节点数据，然后调用更新节点和展开节点的接口，便可实现。这个方案比较简单，常见，直接上代码： callba..

vue 父子组件生命周期分析以及 vueX 异步存储和读取

yorcentroll — Thu, 03 Dec 2020 19:20:52 +0800

原因：对象变量都是对象在内存中的地址值，普通数据变量是实际的值。所以你打印的那个对象其实在打印的那一刻是空对象，但是你展开的时候，commit操作已经完成，所以对象被扩展为你期望看到的值。但是普通类型打印的那一刻是什么就是什么因为actions是异步操作，你在commit方法里再去打印肯定就有值了为什么对象能打印到？因为对象那个变量是地址，你展开的时候对象已经扩充了，所以能看到解决办法： 1，在templent中可直间使用dt_org_data.options 2，如果想在方法中使用this.dt_o

js 获取上传图片和视频的宽高，还有视频的时长

yorcentroll — Wed, 28 Oct 2020 16:30:24 +0800

场景：当产品经理告诉你说：我们需要限制上传的图片或视频的尺寸，不符合要求不允许上传，这个时候你该怎么做？不用多想，很明显我们需要想办法拿到图片或视频的宽度，然后和预期的尺寸进行对比过滤，就能轻易实现这个需求。上代码： // 获取素材宽高 getMaterialResolution (info, callback) { const _this = this const reader = new FileReader() let width = .

Chrome Web Devtools 调试详解

yorcentroll — Fri, 09 Oct 2020 11:33:30 +0800

Chrome Web Devtools 调试详解目录 Chrome Web Devtools 调试详解... 1 1. Chrome Devtools 的用处... 1 2. 菜单面板拆解... 2 3. 常用命令和调试... 2 1. 呼出快捷指令面板：cmd + shift + p. 2 2.DOM断点调试... 4 3. 黑盒脚本：Blackbox Script 5 4. 事件监听器：Event Listener Breakpoints. 6 5. 本地覆盖：...

关于前端需要关注的那些nginx配置和功能

yorcentroll — Thu, 17 Sep 2020 11:53:33 +0800

Nginx简介：先引用一段来自百度百科的介绍： Nginx(engine x) 是一个高性能的HTTP和反向代理web服务器，同时也提供了IMAP/POP3/SMTP服务。Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Rambler.ru站点（俄文：Рамблер）开发的，第一个公开版本0.1.0发布于2004年10月4日。其将源代码以类BSD许可证的形式发布，因它的稳定性、丰富的功能集、示例配置文件和低系统资源的消耗而闻名。2011年6月1日，nginx 1.0.4发布。 Nginx是.

Win10远程桌面报错：出现身份验证错误, 要求的函数不受支持，这可能是由于CredSSP加密Oracle修正

yorcentroll — Thu, 20 Aug 2020 19:26:06 +0800

也不知道咋回事，突然有一天打开远程桌面连接，就进不去了，报这个错（win 10系统）：出现身份验证错误，要求的函数不受支持。这可能是由于CredSSP加密数据库修正。我猜测是win10系统进行某个更新之后导致的。先不管了，找了一通方法，有针对各种系统的办法，试了好几个都不行，连windows提供的方法也不行。最后，找到了。因为我是win10系统，所以下面这个方法暂时只在win10系统上得到验证：键盘输入windows+R 输入gpedit.msc，点击确定　　本地计.

base64，string，blob, blob url互转的方法

yorcentroll — Fri, 31 Jul 2020 16:46:12 +0800

话不多说，直接上代码： <一>base64 转 blob 1，通过第三方包：b64-to-blob import b64ToBlob from 'b64-to-blob' public base64ToBlob(base64: string): Promise { return new Promise((resolve, reject) => { try { let arr .

前端从后端导出excel表格文件的两种方法

yorcentroll — Mon, 27 Jul 2020 18:03:53 +0800

大部分前端开发人员在做项目的过程中应该都遇到过这个问题：在前端点击一个导出或者下载的按钮，从后端导出包含列表中的数据的excel文件。那么如何实现呢？方法一：如果项目中没有涉及要要权限验证的问题，可以直接让后端返回你一个下载文件的地址，然后前端直接访问该地址就可下载文件到本地。比如： window.location.href= url 这个方法一般是不会用的，因为正常点的项目基本都会涉及到token验证等问题，你直接访问下载链接是会被拒绝的。当然你也可以选择将token直接带在.

如何在线读取并下载后端某个文本文件的内容

yorcentroll — Tue, 30 Jun 2020 08:59:14 +0800

场景：很多情况，我们一般是会选择本地的文件，然后预览并且上传文件到后端，但有的时候如果需求是让你从后端在线获取一个文本文件，并且直接读取展示在页面上，这个时候你该怎么实现这个需求？直接上代码：其实很简单，我们暂时忽略原生XMLHttpRequest请求的方式，直接使用jQuery封装的ajax来请求后端接口 success之后直接将返回的函数中拿到文本文件里的内容result。然后将result的内容展示到富文本框中。下面的success回调方法中，四种方式都可以将读取到的文本内容动.

利用time-Picker组件如何封装一个时间范围选择组件

yorcentroll — Tue, 23 Jun 2020 17:38:22 +0800

场景：使用过ant-design组件库的人基本都知道，它的time-picker组件并不像date-picker组件那样，支持时间范围选择。所以，这个时候就只能自己手动来封装一个了。下面正式开始：定义一些prop属性: props: { // 时间显示格式 timeFormat: { type: String, default: 'HH:mm' }, // 组件绑定的值 timeData: { type: .

vue-cli3 多环境和多后端的跨域代理配置多种实现方案

yorcentroll — Fri, 22 May 2020 10:19:17 +0800

大家都知道，由于3.x的默认配置都转移到了CLI service，所以生成的项目中并没有默认配置文件，所以我们如果需要自定义一些项目配置，则需要自己在项目的根目录创建一个vue.config.js。 vue.config.js里的配置项所有都是可选的，这就避免了我们去看一大堆不必要的默认配置，只需要配置自己需要的部分就行了。本文只对跨域代理这一部分的配置进行分析和讲解。我们在vue.config.js文件中创建一个vueConfig 对象，并将其导出。然后在vueConfig 对象..

谈谈Javascript 中 promise、async和await， setTimeout的执行顺序

yorcentroll — Mon, 18 May 2020 16:40:12 +0800

Javascript有一个main thread主线程和call-stack调用栈(执行栈)，所有的任务都会被放到调用栈等待主线程执行。 JS调用栈采用的是后进先出的规则，当函数执行的时候，会被添加到栈的顶部，当执行栈执行完成后，就会从栈顶移出，直到栈内被清空。 Javascript单线程任务被分为同步任务和异步任务，同步任务会在调用栈中按照顺序等待主线程依次执行，异步任务会在异步任务有了结果后，将注册的回调函数放入任务队列中等待主线程空闲的时候（调用栈被清空），被读取到栈内等待主线程的执行。...

yorcentroll的博客