yulamz-CSDN博客

原创后端返回一个图片链接，前端如何实现下载功能？

要实现一个下载功能，后端直接返回了一个图片的地址`https://xxxxx/pic.jpg`。如果我们直接通过`window.open(url, '_blank')` 的方式去下载这个图片，会发现 Chrome 浏览器会对这个图片进行预览，而不是期望的下载。那要怎么做，才能实现这个下载呢？

2024-07-24 20:43:27 701

原创解决File协议导致的CORS限制，用Node.js搭建本地服务器

本地开发时，file://协议访问HTML文件常遇CORS限制。特别是使用``时，跨源请求受阻。无需担心！Node.js助你轻松搭建本地服务器，突破CORS限制。本文将指导你如何快速搭建，让本地HTML和JS代码测试畅通无阻。无需复杂配置，简单几步即可实现。跟随本文，让本地开发更加高效便捷，不再受CORS问题困扰。

2024-06-21 18:50:42 1176 1

原创如何快速解决屏幕适配问题

利用postcss插件快速解决屏幕适配问题。仅用少量代码，新手均可快速使用。

2024-06-20 21:13:29 337

原创弹窗内容由后端返回，如何让点击按钮的事件交由前端控制?

背景：因为系统里经常有新活动或者公告需要通知所有用户，希望前端维护的这个弹窗里的内容可以由后端接口返回。这样就不需要每次上新活动的时候，前端项目都发版了。因此，前端维护了这个弹窗和它的关闭事件，至于弹窗里展示什么内容，则由接口返回。问题：后端返回了展示的HTML里有一个按钮，希望点击这个按钮时可以关闭弹窗。

2024-02-28 19:59:28 1411

原创如何纯前端实现文件下载

纯前端实现文件下载，能在vue2，vue3等项目通用的解决方案

2024-01-30 21:29:08 815

原创如何在一张图片上做涂鸦/涂抹，并支持导出相关轨迹图（内含在线演示地址）

支持在图片上进行涂鸦，撤回最近一次涂鸦操作，清空画布，将用户涂鸦的内容转成一张黑底白色轨迹...

2023-10-16 19:49:50 1269 3

原创【Element-plus】如何让滚动条永远在最底部（支持在线演示）

在某些场景下，你可能希望滚动条保持在最底部，以确保用户始终看到最新的内容或信息。通过短短几行代码即可实现这个功能，文章内含实现思路以及支持在线演示。

2023-10-13 18:34:49 5520

原创【前端开发小妙招】如何将bug扼杀在提测前？

这篇文章，看起来可能更像是PM、设计师的总结。但是于个人而言，如果我们能站在合作伙伴的角度有更多的思考，便能惯性地注意到很多细节。而这些细节，往往也是最后决定一个产品是否能做得好的关键因素。尽早地发现问题，提出问题，解决问题，愿每个前端人都能按时下班！

2022-12-15 00:42:34 336 1

原创如何在线查看.woff, .ttf 文件里有什么图标

免费在线查看`.woff`, `.ttf` 文件里有什么图标，支持在线编辑和下载图标。

2022-10-13 18:53:58 8794 1

原创项目性能优化实战：解决首页白屏问题，自定义 loading 动画优化首屏效果

初次打开项目的某个页面时，因为网络等原因，可能会导致包体积过大。需要借助 gka 这个工具。这个工具是一键快速图片优化、生成动画文件的。只需要全局安装，配合一些命令，即可将图片转成 canvas/css/svg 动画。首先，让 UI 把动图转换成一系列的图片，每张图片都表示此动画的单帧。然后通过命令，将动画的单帧合并成一张雪碧图，按一定的压缩比率进行压缩，最后生成格式的动画文件。...............

2022-07-13 20:43:47 1327 1

原创在线 gif 转 svg / canvas / css（高度还原设计稿的动画效果）

在线 gif 转 svg / canvas / css（高度还原设计稿的动画效果）

2022-07-13 20:26:32 3415 2

原创 Element Plus Select 组件自定义下拉框内容

Element-Plus Select 组件自定义下拉框内容；解决点击“自定义下拉框内容”里的内容浮层关闭的问题

2022-07-06 19:47:07 2146

原创分析 Vue CLI 5源码（基于最新版源码进行分析！）

一、分析什么是脚手架，为什么要用脚手架，如何实现一个脚手架，以及常见的脚手架集成方案。二、理解 Vue CLI 的核心思想，针对其核心思想进行源码分析，最后做了相关的总结

2022-06-10 19:45:00 1988

原创基于webpack5分析，import 方式对 tree shaking 的影响

背景最近发现一个很有意思的问题，import * as ... 对 tree shaking 的影响。百度了一堆文章，都说 export default 对象被 import 后，挂在 default 上的属性和方法，即使没有被调用，也无法被 tree-shaking。但是，实际上真的是这样吗？？？实践大前提：搞了一个小 demo，用的 webpack5。写了一个 math.js 库，export default 了两个函数。然后我通过 import * 的方式用到了 plus 函数，没有用 s

2022-04-11 00:45:38 1377 1

原创提交Git时报错：OpenSSL SSL_read: SSL_ERROR_SYSCALL, errno 10054

错误信息提交Git时报错：OpenSSL SSL_read: SSL_ERROR_SYSCALL, errno 10054如下图：解决方案打开项目.git 文件夹里面的config文件，修改里面的 url 地址，将原来的 HTTP 地址改为 SSH 地址即可。小结拉取项目代码的时候，记得选 SSH 的克隆方式，就可以避免这个错误的发生啦~...

2022-03-31 20:28:57 4346

原创 CSS Animation 入门

CSS Animation 入门Animation 动画的组成组成模块 #1: `Keyframes`组成模块 #2: `animation`属性`animation` 属性简写注意前缀额外的 `animation` 属性animation-timing-functionanimation-dalayanimation-iteration-countanimation-directionanimation-fill-modeanimation-play-state多个动画最近花了点时间去学习 CSS 动画

2022-03-17 20:17:20 936

原创新手如何配置多个 SSH Key（通俗易懂手把手教学）

新手如何配置多个 SSH Key（通俗易懂手把手教学）一、了解背景一个 Github 账户可以有多个 SSH-Key 与其关联。简单来说，你可以在家里的电脑生成一个 SSH-Key 设置到账户上，与此同时，你在公司的电脑也可以生成一个 SSH-Key 设置到同一个账户上。一台电脑（终端）可以配置多个 SSH-Key 用于多个 Git 账号。比如说，你在公司需要用 Gitlab 做内部的开发，但是偶尔也会想用自己的 Github 账户做些个人的开发。此时，不学会配置多个 SSH-Key 寸

2021-09-17 20:21:00 8015

原创【AntV G2】如何解决 G2 造成的内存泄露

如何解决 G2 造成的内存泄露简介在容器节点被销毁时，应调用 chart.destroy() 以销毁实例释放资源，避免内存泄漏。内存泄露的基本示例在一个 Vue 组件中使用 G2 库而没有将其及时清除导致的内存泄漏。假设页面中存在多个标签页，每个标签页都包含一些图表。当选中一个标签页的时候，其他标签页的内容在 DOM 中被移除了。这样，当用户再选中这些标签页的时候，就会发现图表被清空了。本质上，这是由于图表的容器节点被移除导致的。即使之后该节点被重新添加，图表所在的节点也已经不存在了。这个示例的问

2021-09-16 18:05:01 1534 2

原创使用jsonp在html中加载jsp页面（适用于前后端分离项目的index.html入口页访问jsp加载相关资源）

如何在html中加载jsp页面背景业务场景解决方案背景在实际工作中，可能会见证公司技术栈的变迁，比如说：从写jsp到前后端分离。但在这个过渡的阶段中，可能会遇到非得在html页面中加载jsp页面的情况。下面来总结一下如何实现这种需求吧~业务场景当前是一个前后端分离的项目，使用的是vue-cli脚手架，使用webpack进行打包，入口页为index.html。由于历史原因，需要用到一个公共组件 xxxComponent，由于该公共组件适用于大部分用jsp写的项目，因此提供的引入方式是<%=XXX

2021-06-04 12:22:54 639

原创【Antv G2】折线图如何添加点击事件（点击任意位置即可获取折线上点的值）

【Antv G2】折线图如何添加点击事件（点击任意位置即可获取折线上点的值）需求分析预期效果实现思路代码演示需求分析最近接到一个需求，要求在折线图上点任意位置，就可以获取到用户当前看到的tooltip里的信息。拿到用户当前所看到的日期之后，再发送请求获取该时间点一些其他的数据展示出来。如果有玩基金或者股票投资的同学相信对这种场景并不陌生。这个需求的本质就是给折线图添加点击事件，只是我在网络上搜索了一下，大部分人总结的方案都是只有点击折线的圆形折点才能触发，这样的操作对于用户来说可能是过于苛刻了。所以，

2021-03-19 12:04:14 4729 3

原创解决表单内无法使用codemirror初始化失败、格式不对齐、行号错位等问题（codemirror react使用专题及常见问题）

codemirror react使用专题及常见问题如何使用Q1：想换编辑器的底色、代码的颜色？Q2：我编辑器要写JSON的！Q3：想给编辑器添个高度，换下字号改下样式啥的你可能会遇到的问题Q1.在表单里使用CodeMirror，无法赋初始值，无法正常输入？Q2.格式不对齐、行号错位的样式问题？在使用Ant Desgin Pro进行业务开发的过程中，遇到需要编辑/展示JSON配置的需求。Ant Design推荐使用react-codemirror2 或者 react-monaco-editor作为代码编辑

2021-01-13 12:14:31 4490 2

原创【vue】样式不生效竟是scoped惹得锅

遇坑及填坑最近在写业务的时候，有用户反馈说页面的卡片排布怎么好像有些错位啊，卡片出现了重叠，但是刷新一下又解决。由于这个问题很偶发，本地测试表示真是难修复！所以，在自己无意中刷出这个bug的页面是，我立刻打开控制台看看究竟是什么作怪？！hover到元素上，发现元素上的样式的确是我自定义的没有错！但是为什么会有多个咧？？没有带[data-v-399aa65a]的.chart-wrapper样式代码我没有写啊，为什么会在这里生效呢？于是，我在项目全局搜索了.chart-wrapper，发现有其他页面也

2020-11-13 19:08:30 568

原创【算法--链表】用Js解决环形链表问题（简单易懂）

用Js解决LeetCode 141.环形链表问题解题思路解题步骤代码演示解题思路两个人在圆形操场上的起点同时起跑，速度快的人一定会超过速度慢的人一圈用一快一慢两个指针遍历链表，如果指针能够相逢，那么链表有圈解题步骤用一块一慢两个指针遍历链表，如果指针能够相逢，就返回true遍历结束后，还没有相逢就返回false代码演示/** * Definition for singly-linked list. * function ListNode(val) { * this.va

2020-11-02 18:45:17 964

原创【算法--链表】用Js解决反转链表问题（内含思路、代码）

【算法--链表】用Js解决反转链表问题解题思路解题步骤代码演示解题思路反转两个节点：将n+1的next指向n反转多个节点：双指针遍历链表，重复上述操作解题步骤双指针一前一后遍历链表反转双指针代码演示/** * Definition for singly-linked list. * function ListNode(val) { * this.val = val; * this.next = null; * } *//** * @param {Lis

2020-11-02 18:41:58 316 1

原创【算法--链表】用Js解决回文链表问题（简单易懂）

LeetCode 234. 回文链表（用JavaScript解决）前言题目解题思路前言想要解决这一道算法题，建议先把 LeetCode：206.反转链表以及 LeetCode 141.环形链表这两题做一做！对解决回文链表这一题很有帮助。题目请判断一个链表是否为回文链表。示例 1: 输入: 1->2 输出: false示例 2: 输入: 1->2->2->1 输出: true进阶：你能否用 O(n) 时间复杂度和 O(1) 空间复杂度解决此题？解题思路..

2020-11-02 18:36:18 352

原创【Vue】Computed和watch使用场景（细数深度监听那些事）

Computed和watch使用场景和方法computedcomputed适用情况：拿到的值不是我们想要直接显示的。注意：可以设置，但不建议这么做实例：

2020-09-10 18:04:07 3147

原创【echarts/antv】解决Uncaught TypeError: Cannot read property ‘getAttribute‘ of null报错

解决"找不到图形容器"的错误一、报错二、分析原因三、解决方案方法1. 使用id方法2. 使用ref一、报错在vue的项目中使用echarts、antv等图表组件时，可能会出现上述报错。二、分析原因echarts/antv图的id是动态生成的（由父组件传递过来/通过接口拿等），出现了图形容器尚未生成便对其进行了初始化的情况。此时，就会产生"找不到图形容器"的错误。三、解决方案思路：先保证容器存在，再生成图形方法1. 使用id首先，在main.js全局引入echartsimport echa

2020-09-10 12:10:04 3216

原创【Ant design vue】antd实现动态增减表单项，支持赋初始值！

【Ant design vue】antd实现动态增减表单项效果图支持的功能官方案例封装组件代码演示封装的组件组件的使用效果图用了一年多antd组件，发现需要做动态表单的场景可真不少！今天就来整理一下vue版的动态表单该如何实现吧！~效果图如下：支持的功能官方案例官方的案例如下，一行只有一个表单项且没有赋初始值。封装组件基于官网最朴实无华的例子，做了一下延伸。封装的组件，支持一下功能：一行可有多个表单项表单项可赋初始值（如：应用在编辑场景！）可在一个页面上多次复用该组件，效果如下：

2020-08-27 21:03:43 11066 20

原创【AntdPro+Vue】axios的get请求参数里有数组[]导致后端接收数据异常

axios的get请求参数里有数组导致后端接收数据异常异常情景原因解决方法异常情景传递参数nameList=[‘Tom’, ‘Jerry’]到接口，发送请求http://emily-project.xxx/api/mock/list?nameList=[%27Tom%27,%20%27Jerry%27]。此时，后端反馈报400，没映射进去后端接口！经过一番问题排查，最后发送请求http://emily-project.xxx/api/mock/list?nameList=%5B%27Tom%27,%2

2020-08-10 21:11:41 1475

原创【Ant design vue】Progress根据完成度自定义分段颜色

进度条根据完成度的不同设置不同的颜色业务需求代码演示业务需求当完成度<50%时，进度条显示红色；当完成度>=50%且<90%时，进度条显示黄色；当完成度>90%时，进度条显示绿色；代码演示思路：抽出方法：利用progress组件的strokeColor属性。通过判断已完成的分段百分比在哪个区间，就设置所需的颜色。抽出方法：利用progress组件的format，可以自定义进度条后面的文字格式<div class="progress">

2020-07-28 19:47:24 6941 1

原创【Antd+vue】antd Modal.confirm实现延迟关闭效果（点击确定，等待请求完成再关闭弹窗）

antd Modal.confirm实现延迟关闭效果业务场景分析代码--拿来即用Ant Design的Modal组件在业务中十分常用。当需要一个简洁的确认框询问用户时，可以使用 Modal.confirm() 等语法糖方法。今天用大白话来讲讲如何用promise来延迟关闭确认对话框（Modal.confirm）。业务场景当开发删除、退出等功能时，我们常常会使用Modal.confirm()来实现。希望用户点击确定按钮后，请求相应的接口，请求成功后再关闭该弹窗。效果图展示（在文章的最后会附上代码）：

2020-07-24 20:47:27 11785 2

Emily's Blog