全部文章
共 1299 篇文章
你还不会根据Url下载文件？
最近遇到了一个需求，是需要前端通过Url去下载文件，于是研究了一波，便想着跟大家分享一下。 废话不多说，我们直接开始正文。 1.链接强制下载 最简单方式就是需要让服务端，给这个下载地址设置response header，使得url具有强制下载属性。 具体的设置： 这个header的意思是设置文件显示方式为直接下载，默认的文件名为image.jpg。 这里简单介绍下Content Disposition： Content Disposit...
做了这么久前端还不会手写瀑布流？(H5 & 小程序
前言 做了7年前端我一直不知道瀑布流是什么（怪设计师不争气啊，哈哈哈），我一直以为就是个普通列表，几行css解决的那种。 当然瀑布流确实有css解决方案，但是这个方案对于分页列表来说完全不能用，第二页内容一出来位置都变了。 我看了一下掘金的一些文章，好长啊，觉得还是自己想一下怎么写吧。就自己实现了一遍。希望思路给大家一点帮助。 分析瀑布流 以小红书的瀑布流为例，相同宽度不同高度的卡片堆叠在一起形成瀑布流。 这里有两个难点： 卡片高度如何...
项目中既然有了 prettier 文件，为什么还需要 .editorconfig
文件用于设置代码格式化和文件风格的规则。这些规则可以让不同的开发者在使用不同的编辑器时，都能够保持一致的代码风格。.editorconfig 文件主要配置以下几类属性：缩进风格、缩进大小、换行符、字符编码、行末空白、文件末尾新行等。 下面是 .editorconfig 文件中可用的配置选项及其详细作用。 .editorconfig 文件详解 指定当前 文件为项目的根配置文件。如果设置为 ，编辑器在找到这个文件后不会继续向上层目录查找其他...
css-各种各样三角形CSS
边框是实现三角形的部分，边框实际上并不是一个直线，如果我们将四条边设置不同的颜色，将边框逐渐放大，可以得到每条边框都是一个梯形 当分别取消边框的时候，发现下面几种情况： 取消一条边的时候，与这条边相邻的两条边的接触部分会变成直的 当仅有邻边时， 两个边会变成对分的三角 当保留边没有其他接触时，极限情况所有东西都会消失 通过上图的变化规则，利用旋转、隐藏，以及设置内容宽高等属性，就能够实现其他类型的三角形
css怎么绘制一个三角形
说在前面 🎈在CSS中画三角形通常利用border属性来实现，通过设置三个边的宽度为0，并为一个边提供颜色，结合transform属性进行旋转，可以创建一个三角形。以下是几种常见的CSS三角形的实现方法： 方法1：使用border 上面代码中，.triangle类创建了一个红色的三角形，其中border width定义了三角形的三个宽度，最后一个宽度定义了三角形的底边，其他三个宽度设置为0，以形成三角形的尖角。border color...
vue实现电子签名、图片合成、及预览功能
业务功能：电子签名、图片合成、及预览功能 业务背景：需求说想要实现一个电子签名，然后需要提供一个预览的功能，可以查看签完名之后的完整效果。 需求探讨：后端大佬跟我说，文档我返回给你一个PDF的oss链接，然后你直接展示，你前端签完名之后给我一个base64的字符串就可以了，我回复ojbk（草率的一批）。 等我转过身，调研一下技术实现发现不对，我大前端需要做一个预览的功能啊，它需要将多张图片合成一张图片，你给我一个oss链接，我怎么转...
一次低端机 WebView 白屏的兼容之路
问题 项目：Vite4 + Vue3，APP WebView 项目 页面在 OPPO A5 手机上打不开，页面空白。 最开始是客户端在看，然后发现一个警告，大概也因为没看出什么问题，给到 Web 前端。 相关背景 为了方便描述过程的行为，先做一些相关背景的介绍。知道这些背景才能更好的了解问题的复杂。这些在解决问题的过程中始终是干扰因素，在反复调试试错的过程中才梳理总结出来，这里把它们列出来。 使用测试 App，其中有两个入口，一个是本地...
三分钟带你实现项目自动国际化
项目国际化形式有2种：一种是人工翻译，另一种是机器翻译。 一般情况下，我们的 项目都是接入 做项目翻译的，它用文件将中文和英文对应的值全部分开，展示的时候，按照 的不同，加载不同的文件。如下： 这是一种全局加载的形式，虽然 支持全局加载，也支持局部加载，但是一般在项目过程中，我们用的都是全局加载形式。 这种形式，需要人工专门根据业务场景做专业的翻译，比如阿里云的国际项目，都是需要人工专门翻译的。 但是也有很多小公司，由于人员配备问题，他...
事件循环 Event Loop事件循环
事件循环 同步任务（立即执行） 如console.log()、new Promise 宏任务主要包含：script(整体代码)、setTimeout、setInterval、I/O、UI 交互事件、setImmediate(Node.js 环境) 微任务主要包含：Promise的then函数和catch函数、MutaionObserver、process.nextTick(Node.js 环境) 练习，快来试试 结果及简单分析 详细分析...