南乡人的博客

多半是坐标轴的字太长，自动截断了。可以尝试将坐标轴的说明文字减少。

一开始直接用useState更新，发现总是延迟，一度甚至想用Promise转换成同步，未果。翻阅文档，发现官方给出了这样的解释。默认值需要用form.setFieldsValue直接更新

升级node版本！至少升级到15或以上的版本，确保你的node环境能够适配当前项目依赖升级node版本同时也能有效防止在安装依赖时出现各种奇怪的问题。且这个报错并不是mac m1芯片独有的，但是它确实更可能发生在m1芯片上。可能是因为底层对内层使用做了更为严格的限制。...

因为使用canvas生成的图表，无法通过样式修改。官方提供了一个API nice: true

umi 默认情况下会使用msfu，进行预编译，提高加载速度，但是这样会导致在node_modules做的修改，无法通过热更新获得实时的改动。如果使用Ant Design Pro框架，那么就需要在config.ts中把配置项mfsu: {}去掉。等待再次编译，即可看到node_modules中的变化...

使用G2 生成图表时，因为横坐标内容过多，会导致显示不全。如果想显示完整的横坐标有两个方法。解决方案一： 增加倾角，使文字倾斜显示解决方案二： 使文字竖排显示文字倾斜显示 chart.axis('x', { label: { offset: 30, // 设置坐标轴文本 label 距离坐标轴线的距离 textStyle: { textAlign: 'center', // 文本对齐方向，可取值为： start mid

BUG描述： 在基于ant design pro的脚手架进行开发时，表格组件使用了ProTable,并采用 search={{ filterType: 'light', }}由于表格不是置顶（表格上方还有其他内容），在第一次点击搜索栏的第一个按钮时，发现整个页面滚动到首部。在第二次点击时正常，无自动滚动。排查过程：首先查阅官网API试图查询蛛丝马迹，但是一个相关API都没有怀疑是自己这个column有问题，但是发现只要在第一个位置的搜索项都会出现这个问题

Tablecolumn 参数中如果传入boolean 值类型，就是本地前端排序，可以排当前页如果传入function 就是自定义排序方式 / 服务端排序,此时需要配合Table 中onChange参数进行处理参考文章ProTableproTable 中默认在request中集成了对sort的监听，只需要在sort中对升序降序进行判断，处理自己的排序逻辑即可。...

两种解决思路在http请求时加入 loading 状态在请求时添加 节流 防抖

let res = arr1.concat(arr2).filter((value, index, arr) => { return arr.indexOf(value) === arr.lastIndexOf(value); }); return res;

console.log 是项目开发时常用的调试语句，打包上线时，如果一个个处理非常麻烦。以下有俩种方案处理一. webpack 方式通过插件uglifyjs-webpack-plugin 自动去除npm i -D uglifyjs-webpack-pluginconst UglifyJsPlugin = require('uglifyjs-webpack-plugin')const config = { devServer: { proxy: {

1. !![] // -> true 2. [] == true // -> falsejs 中 有且只有nullundefined空字符串 即 “”数字 0数字 NaN会被当作false，其余都是真。[] == true进行隐式转换时，会调用object类型原始值，将其转换为 “” 即 false...

语法规范ECMAScript 中的相等操作符由两个等于号 ( == ) 表示，如果两个操作数相等，则返回 true。相等操作符会先转换操作数（通常称为强制转型），然后比较它们的相等性。在转换不同的数据类型时，相等操作符遵循下列基本规则：如果有一个操作数是布尔值，则在比较相等性之前，将其转换为数值；如果一个操作数是字符串，另一个操作数是数值，在比较之前先将字符串转换为数值；如果一个操作数是对象，另一个操作数不是，则调用对象的 valueOf() 方法，用得到的基本类型值按照前面的规则进

opacity 是会被子元素继承的属性，所以如果希望子元素正常显示的话，可以将父元素的opacity 更换为background的 rgba属性，其中a就代表透明度

在接入第三方厂商的插件时，发现他们使用的是object标签生成的，导致页面渲染时的优先级贼高，且无法被z-index控制。也就是说如果有dialog之类的弹窗需要悬浮在最上层，会被object标签内容遮挡。解决方案引入iframe（没有成功实现，但是网上主流推荐方案是这个）利用元素显隐控制，Vue中可以用v-show控制弹窗打开时将其关闭的业务逻辑,React中可以设置一个变量去控制，原理相同...

采用原生提供的API-- node-contextmenu 实现右键功能 <el-tree :data="treeData" @node-click="handleNodeClick" @node-contextmenu="rightClick" node-key="id" :props="defaultProps" :default-expanded-keys="[1]" :defau

server { listen 9091; server_name test; root /usr/local/test; # 该路径为多个项目文件的父级目录 location /first/ { # 该路径匹配前端项目中publicPath的值 alias /usr/local/test/demo1/; index index.htm.

server{ listen 9091; server_name localhost; root file_route; index index.html index.htm ; location / { try_files $uri $uri/ @router; index index.html; } location @router { r.

讨论最全最详细最有启发性

场景在新编写某个模块时，本地调试一切正常，打包部署后，线上跳转至该模块会出现白屏分析如果本地没问题，那么代码逻辑是没问题，就是打包这步出现了问题，极有可能是打包时无法读取路由引入的路径改变路径所以把代码从一开始的export default [ { path: "/test", name: "test", meta: { tabname: "测试" }, component：()=>import('@/views/XXXXX/XXXXX

去除所有空格str.replace(/\s/g, '')去除两边空格str.replace(/^\s+|\s+$/g, '')

因为在ie中控制台报错sockjs.js … net::ERR_CONNECTION_TIMED_OUT.然后看到这篇博文解释错误分析：sockjs-node是一个JavaScript库，提供跨浏览器JavaScript的API，创建了一个低延迟、全双工的浏览器和web服务器之间通信通道。在项目运行以后，network会一直调用这个接口。如果没有使用，那么就一直会报这个异常。解决办法：1）找到/node_modules/sockjs-client/dist/sockjs.js2）在1605

它一般可以使用第三方库 clipboard.js 来实现主要有两个要点选中: Selection API复制: document.execCommand转载于 https://q.shanyue.tech/fe/html/20.html#%E9%80%89%E4%B8%AD

场景描述一般在长表单中，有些必填项很难发现，因此需要自动定位到相应位置，方便用户找到填写。解决思路先通过基础UI库校验必填项时的样式变化来选中相应的元素，再通过Input,textarea自带的focus方法，实现定位具体代码 let isError = document.getElementsByClassName('is-error') // 适用于element isError[0].querySelector('input').focus() // 只定位到第一个必填项

全内容不可输入空格使用自带的修饰符trim，对model内容进行修改<el-input v-model.trim="form.name"></el-input>通过焦点事件修改这种方式，影响回车提交，并且@blur的form.name不能直接写成value(原因未知，理论上可以，有空填坑)<el-input v-model="form.name" @blur="form.name=$event.target.value.trim()"></el-inp

需要重新写一下element-ui的message新建resetMessage.js/**重置message，防止重复点击重复弹出message弹框 */import { Message} from 'element-ui';let messageInstance = null;const resetMessage = (options) => { if(messageInstance) { messageInstance.close() }

去除页眉页脚的样式 @page { size: auto; /* auto is the initial value */ margin: 0mm; /* this affects the margin in the printer settings */ }具体方案参考Disabling browser print options (headers, footers, margins) from page?多文件批量打印<div style="pag.

先查看Model相关需要确认是否在<el-form>中绑定:model<el-form :model="ruleForm" :rules="rules" ref="ruleForm">其中ruleForm在data中不能是空对象，必须包括所需校验的字段值 data(){ return { ruleForm:{ test1: "", // 必须写出具体值 test2: "", } } }再查看rule相关需要确认是否在<e

很水之前一直以为除了json中结尾不能以逗号结束，在js对象中是可以的。没想到这是ES8推出的特性…//定义参数时function foo( param1, param2,//结尾逗号) {}//传参时foo( 'coffe', '1891',//结尾逗号);//对象中let obj = { "a": 'coffe', "b": '1891',//结尾逗号};//数组中let arr = [ 'coffe', '1.

原问题提在知乎上正解如回答

项目引入element-ui后，有时需要对组件的属性进行全局修改。比如input默认不开启清空按钮，我们需要让他变成默认开启，不然还需要一个个的手动修改。import Vue from 'vue'import ElementUI from 'element-ui';// 修改input组件默认有清空按钮ElementUI.Input.props.clearable.default=tru...

想注释一个组件的属性，一直报错[vue/no-parsing-error] Parsing error: unexpected-character-in-attribute-name因为项目中引入了eslint-plugin-vue，对template有默认检测，因此就直接修改.eslintrc.js文件 "unexpected-character-in-attribute-name"...

如题

重点查询四个地方，是否统一1. el-form：model务必绑定到，每个el-form-item绑定的v-model，且需绑定:rules2. el-form-itemel-form-item上的prop必须与v-model同名如果嵌套层级比较深，可参考这篇博客3. data “FormModel”应该存在"FormModel",即上述v-model中绑定的对象4. ...

实际开发中，常常需要根据用户需求动态渲染一些组件以做一个TooList（待办清单）为例比较窒息不优雅的方法 const List = ( listContent ? (listContent.map((item, index) => ( <div className="each-list" key={`each-${index}`}&gt...

有些坑踩了第一次，那么很有可能第二次包安装使用creat-react-app创建的脚手架并没有，预装react-route-dom包，所以我们在写路由文件之前还需要再安装一下。（windows下，使用npm莫名报错，使用cnpm安装就没有问题，[没试过yarn，有经验的小伙伴可以留言给我]）cnpm install react-route-dom --save // --save 是把...

const myArray = [2, 4, 19, 29, 10, 60, 14];const quickSort = function(myArray){ if(myArray.length <= 1) return myArray; var pivotIndex = Math.floor(myArray.length/2); // 取中间值的索...

选择器+相邻选择器,选择所符合条件的兄都元素，而不是选择both多选择器，,号隔开，多用在整体样式规划子类选择器，只能选择子类，不可选取孙类后代选择器，选择子孙类属性选择器input[id=ipt2]{}[title~=flower] // 属性中包含flowerdiv[class^="test"] // 属性以test开头div[class$="test"] // 属性以t...

对MDN上一个实例的解释先上代码var words = ['1', '2', '3', '4'];words.forEach(function(word) { console.log('查看结果', word); // 1, 2, 4, 虽然看起来很奇怪，但是采用typeof检测后发现，的确是 string if (word === '2') { w...

中间变量法（最常见）var x = 3;var y = 4;var mid = 0;mid = x;x = y;y = mid; 数学法基于x = (x + y) -y的思想 y = y - x; x = x + y; y = x - y;ES6的解构赋值方法let x = 1;let y = 2;[x, y]...