手搓——实现多角标的颜色/值滑动条
MyVisualMap实现思路（不包含完整代码）效果类似这种，实现方式想必非常多，接下来仅讲解我的思路，可做一种参考。
描述实现一个类echarts visualMap的工具bar，可以调整一个高度自定义的echarts图形的values和colors
分析实现一个带两种模式的多角标(网上普遍叫法是multiple handles)Slider。
模式一（渐变模式）是固定values，修改对应的colors，此时滑动条是一个渐变色块；
模式二（非渐变模式）是固定colors，修改对应的values，此时滑动条是一个多个色块组成的均匀条。
思路咱们慢慢来，手挫肯定是要画点时间的，喝口水慢慢来。
绘图
前置共识：values和colors一一对应，拖拽牵扯到的变动属性(top/height等)在绘图的时候需要考虑到，别框死了。
固定一个div作为盛放色块和角标的容器，灵活使用css-position-relative/absolute，对应给div两块子元素。
颜色块-colorRef
渐变模式时，可以直接给colorRef设置一个linear-gradient(to bottom, $ ...
elementui(vue2)--table样式自定义
elementui vue2版本如何给el-table/el-pagination等组件进行样式自定义el-table
现有组件描述
直见官网：https://element.eleme.io/#/zh-CN/component/table#table-column-scoped-slot
场景描述
背景透明
hover有点颜色（半透明）
代码：
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556<template> <el-card> <el-table class="right-table"> <el-table-column>....</el-table-column> .... </el-table> </el-card> ...
echarts回顾与进阶
写在前面最近在换工作，投了特别喜欢的一家公司，正在等意向（更新后续，目前成功入职了，十分感恩），等待时间是不能浪费的，所以我打算先熟悉一下公司的技术。echarts就是其中之一，之前有用过Echarts，但是这家公司的业务是需要高度自定义的。那么就开始吧！
项目链接在这儿👉https://github.com/Ra-Liz/vue-echarts-test
以下的练手项目使用vue3搭建。（顺便回顾了vue3，没想到上手这么快）
一个简单的自定义饼图
思路：
使用ref绑定图容器
初始化echart画布
配置画布内元素
标题、工具文本、整体样式
数据排序、细节样式
挂载监听器
测试数据实时更新逻辑
btn绑定回调，watch监听数据变化
优化函数声明，分块，拼接
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283 ...
Tailwindcss处理背景渐变
Tailwindcss 处理背景渐变前言在开发中，我们经常需要使用背景渐变，但是 Tailwindcss 默认并没有提供背景渐变的工具类，所以我们需要自己来实现。
实现方法
在tailwind.config.js中添加自定义工具类：
12345678910111213module.exports = { theme: { extend: { backgroundImage: { "gradient-to-r": "linear-gradient(to right, var(--tw-gradient-stops))", }, }, colors: { "start-color": "#FD7A61", "end-color": "#FF934D", }, },};
在需要使用背景渐变 ...
nextjs中使用tailwindcss添加自定义字体
nextjs中使用tailwindcss添加自定义字体写在前面指路官方文档
项目框架
next.js
tailwindcss
app router
步骤
在public目录中添加字体文件（我的是个.TTF文件）
在global.css文件中添加字体
12345/* 自定义字体，注意这里url()中路径已然是public目录下 */@font-face { font-family: "lcd-font"; src: url("/DS-DIGIB.TTF") format("truetype");}
在tailwind.config.js中配置字体
123456789101112131415module.exports = { theme: { extend: { fontFamily: { 'sans-serif': 'Helvetica, Arial, sans-serif', ...
JS验证URL的新方法
MDN URL.carParse()
文章摘自
瀑布流布局Demo
写在前面早上我查了很多瀑布流实现的方法，展示逻辑都不是很喜欢。
纸鹤给我看了一个使用了瀑布流布局的网页，网页利用transform对每个条目进行定位……恍然大悟。
中午做饭的时候看了B站一up主的瀑布流实现视频(麦克阿瑟还是有点实力的)，大概知道怎样实现了。
瀑布流布局雏形思路用一个定长数组存放第n列某行条目的top值，每次便利找最小top值所在元素，添加一条新条目，并更新top值。等我去画个图。
不完整的代码(仅提供一种思路)使用react实现，和原生JS有些差别（是哟个原生JS实现可以直接看上面那个视频）
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106export defualt testPage() { ...
无限列表Demo
无限列表Demo写在前面工组中遇到的，想手搓一个，慢慢优化吧。
React实现，在这里仅分享逻辑。
简单的一个实现方法实现中：如何抽成一个组件呢？实现中：结合图片瀑布流
为什么要问我如何用CSS实现三角形啊
为什么要问我如何用CSS实现三角形啊？
在前端面试中，被问及如何使用CSS实现一个三角形的问题可能有几个不同的目的和价值：
基本CSS知识测试：这个问题可以用来测试面试者对基本的CSS属性和技巧是否熟悉。实现一个三角形通常涉及使用CSS的一些常见属性，例如width、height、border、border-color和transparent等。如果面试者能够正确回答这个问题，表明他们掌握了基本的CSS技能。
问题解决能力：这个问题也可以用来测试面试者的问题解决能力。即使他们之前没有直接实现过三角形，但如果他们能够通过分析和试验找到解决方法，这显示了他们的思维方式和解决问题的能力。
CSS的 kung fu 水平：实现一个三角形可以有多种方法，包括使用border、transform、伪元素（::before或::after）等。通过问这个问题两次，面试官可能想要了解面试者在CSS方面的深度和广度。如果第一次问的方法是使用border，而第二次问的是使用伪元素，那么面试者需要展示他们对多种CSS技巧的了解。
检验经验：在前端开发中，有时需要实现各种各样的形状和效果。问关于实现三 ...
Next.js中间件的使用探索
Next.js中间件的使用探索至于为啥探索，因为牵扯到一些新的东西，广泛搜索查不到对胃口的，只能自行探索记录。
中间件是啥？
Middleware allows you to run code before a request is completed. Then, based on the incoming request, you can modify the response by rewriting, redirecting, modifying the request or response headers, or responding directly.
中间件允许您在请求完成之前运行代码。然后，根据传入的请求，您可以通过重写、重定向、修改请求或响应标头或直接响应来修改响应。
创建文件创建middleware.js文件
1234567891011121314import { NextResponse } from "next/server";// 尝试写一下中间件，中间件主要作用是：在请求完成之前修改对请求的响 ...