change66-优快云博客

原创 echarts给label设置样式的方法，vue配置gzip遇到的问题解决

1.前端打包的时候使用gzip压缩文件，不要删除源文件，然后在nginx配置解析gzip的文件。项目使用vite+vue3构建，在前端打包时使用gzip压缩的时候，删除了源文件，在nginx配置了gzip之后，访问不到页面。gzip压缩可以显著减少文件大小，但对于一些非常小的文件，比如小于1kb的文件，压缩带来的性能提升并不明显，甚至可能适得其反。现代浏览器几乎全部支持gzip压缩，问了确保兼容性，建议在服务器配置中制定响应头Content-Encoding: gzip。

2025-02-06 15:58:42 183

原创 [React]Ag-grid表格如何实现当列比较少的时候自适应屏幕宽度

参考Ag grid react官网上的方法先实现一个表格。接下来实现宽度的自适应。

2022-08-17 06:28:05 1368

原创 [CSS]用CSS animation实现圆圈向外扩展的动画效果

圆圈实现向外扩展的动画效果，代码如下：<!doctype html><html lang="en"><head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <script type="text/javascript" src="http://code.jquery.com/

2021-07-21 09:52:41 3832 1

原创 [React] 解决Ant table中数据源改变的时候，表头跳动的问题

情景描述：react中使用ant-design的Table来实现表格，当Table中的数据改动的时候，表头总是会跟着跳动一下解决办法：把Table中的key这个值去掉<Table rowSelection={{ onChange: (selectedRowKeys, selectedRows) => { handleChangeSelected(selectedRowKeys, selectedRows);

2021-05-06 11:45:45 1785

原创 [React] 纯SCSS实现一个checkbox

需求：如下图所示，根据不同的状态，Status这一列显示不同的样式，如果状态是In Progress，则显示橘色的线框；如果状态是Complete，则显示蓝色背景加对勾的框，类似于checkbox一开始笔者对于蓝色背景加对勾的框用的是Input checkbox来实现的，但这样会有一个问题，就是Input的onChange事件会去执行两次，这样导致页面显示不稳定(什么原因导致的，笔者有待继续去研究，如果弄明白了，会在此更新)解决办法：把Input checkbox改为用div来显示，然后通过样式来实

2021-05-06 06:36:10 304

原创 [React]Ant table中文本列自适应文本的宽度

需求：React中的ant table, 其中一些文本列显示的是一些重要的内容，但是由于宽度不够，被显示为..., 只有当鼠标hover到上面的时候才能看到全的信息。对于用户来说用户希望一眼可以看到重要列的重要信息1.能够看到该文本列的最大宽度固定为字符的宽度"aaaaaaaaaaaaaaaaaaaaaaaaaaaa"2.能够看到该文本列的最小宽度固定为字符的宽度"bbbbbb"实现方法如下:import React, {useState, useEffect} from 'react'.

2021-05-05 07:09:28 3163