無言丶-CSDN博客

原创 React 拖拽改变大小，react-resizable 属性详解

源于布局需求，要求Antd的Layout组件中，侧边栏Sider可以拖拽改变宽度……开源插件，基于react-draggable插件（同一作者），详见《react-resizable》； // 拖拽回调参数 size:{width,height} type ResizeCallbackData = { node: HTMLElement, size: {width: number, height: number}, handle: Res.

2022-03-23 12:13:31 15244 5

原创 Vue 基础知识点

dataVue 实例的数据对象，组件的定义只接受 functionnew Vue({ data: function () { return { count: 0 } }})propsprops 可以是数组或对象，用于接收来自父组件的数据new Vue({ props: { stringProp: String, numberProp: Number, booleanProp: Boolean ...//

2021-12-07 14:46:11 451

原创 CentOS 安装部署 nginx（详细过程）

准备工作下载 nginx：NGINX 官方下载可以手动下载，拷贝至 CentOS 目录，也可以直接在 CentOS 目录通过 wget 指令下载 $ cd /home # 进入指定目录，目录请自行选择 $ wget https://nginx.org/download/nginx-1.21.2.tar.gz # 下载安装包，版本请自行选择安装步骤cd 至 nginx 安装包所在目录，进行解压； $ cd /home # 进入安装包所在目录 $ tar -zxvf ngi

2021-09-03 11:47:03 15033 6

原创 CentOS 端口操作相关命令

firewall-cmd --query-port=8000/tcp # 查看防火墙 8000 端口是否开放# 开放防火墙端口firewall-cmd --zone=public --add-port=3306/tcp --permanent # 开放 8000 端口firewall-cmd --zone=public --add-port=8000-9000/tcp --permanent # 开放 8000-9000 端口systemctl restart firewalld #

2021-09-02 09:58:00 185

原创 Node 托管工具 PM2 的使用（PM2常用命令）

准备工作安装 $ npm install pm2@latest -g or $ yarn global add pm2更新 $ pm2 update使用 $ pm2 [cmd] app [options]帮助 $ pm2 --help常用命令启动进程 # 启动脚本文件 $ pm2 start bashscript.sh # 启动脚本文件 $ pm2 start app.js --name <app_name> # 启动 app

2021-09-01 10:37:39 1058 1

原创 JavaScript中Object对象属性字段格式化

Object对象属性字段格式化支持将Object对象属性字段格式化为新字段名。其中用到的对象类型判断方法，详见《JavaScript中Object对象类型判断》// 递归实现// object 为要遍历的对象// keys 为格式化对应关系// cover 为 true 时覆盖原字段，为 false 时新添加字段export const objectFormat = (object, keys, cover) => { if (isObject(object) && i

2021-08-11 12:04:37 1043

原创 Antd相关 Table表格自定义筛选以及统一清空筛选项

源于一直负责的组件库需求，对Antd表格组件进行了二次封装，简化了很多功能配置项（分页、排序、筛选、样式等），其中对多个列筛选进行统一清空功能遇到了不少坑，记录一下……重点是合理使用filteredValue属性。const MyTable = ({ ...... // 1.定义全局状态，用来存放各列的 filteredValue 状态 const [filteredValues, set_filteredValues] = useState(); // 2.定义通用 colu.

2021-01-27 09:31:12 6401

原创 JavaScript中Object对象深度合并

Object对象深度合并支持Object和Array混合型对象遍历合并。其中，用到的对象类型判断方法，详见《JavaScript中Object对象类型判断》；用到的对象深度遍历方法，详见《JavaScript中Object对象深度遍历》；用到的对象深度赋值/取值方法，详见《JavaScript中Object对象深度赋值/取值》// object对象在合并后会被修改export const objectAssign = (object, value) => { if (isUndefi

2020-09-17 10:59:29 1877

原创 JavaScript中Object对象深度赋值/取值

Object对象深度赋值/取值支持Object和Array混合型对象遍历合并。其中，用到的对象类型判断方法，详见《JavaScript中Object对象类型判断》；// 根据路径创建对象export const createObject = (path, value) => { let keyPath = []; if (isArray(path)) keyPath = [...path]; if (keyPath.length) { const key = keyPath

2020-09-17 10:58:17 1967

原创 JavaScript中Object对象深度遍历

Object对象的深度遍历支持Object和Array混合型对象遍历。其中用到的对象类型判断方法，详见《JavaScript中Object对象类型判断》// 递归实现// obj 为父级初始值可以传null// object 为要遍历的对象// process 为递归遍历处理方法// path 为object的父级完整路径初始可以不传const objectMap = (obj, object, process, path) => { let keyPath = []; if

2020-09-17 10:41:00 1811

原创 JavaScript中Object对象深度复制

Object对象深度复制支持Object和Array混合型对象。其中isObject、isArray为对象类型判断方法，详见《JavaScript中Object对象类型判断》// 遍历递归实现const objectClone = (object) => { let newObject = null; if (isObject(object)) { newObject = {}; for (let k in object) { if (isObject(obj

2020-09-17 10:19:15 321

原创 JavaScript中Object对象类型判断

Object对象类型判断// 获取对象类型const typeObject = (object) => { const objectType = Object.prototype.toString .call(object) .match(/(?<=^\[object[\s]{1})[A-z]+(?=\]$)/)[0]; return objectType;}; const isUndefined = (object) => { return objec

2020-09-17 10:10:45 1231

原创 useMemo和useCallback的使用

useMemo功能：用来缓存数据；应用场景：当组件内部某个数据，需要通过计算而来，且这个计算依赖于state、props数据时使用；好处：避免依赖项未修改时，多次渲染导致的重复计算，浪费计算资源。useCallback功能：缓存单个函数；应用场景：当父组件传递给子组件一个函数；好处：不用每次重新声明新的函数，避免子组件因为这个函数的变动重新渲染。代码示例import React, { useState, useEffect, useCallback, useMemo } from

2020-09-16 10:54:31 707

原创十六进制颜色与RGB颜色转换

const isNumber = (object) => Object.prototype.toString.call(object) === "[object Number]"; // RGB转换为16进制const toHex = (color, opacity) => { // 参数opacity用于重置透明度 const reg = /^(rgb|RGB)\([\s]*[0-9]+[\s]*,[\s]*[0-9]+[\s]*,[\s]*[0-9]+[\s]*,[\s]*[0-9.

2020-09-14 17:08:59 827

原创 CSS相关子元素相对父元素(带滚动条)位置固定

核心点还是要理解position属性值relative和absolute的相互关系…….grandpa { position: relative; .parent { overflow: auto; //带滚动条 .child { position: absolute; //通过top bottom left right固定位置 } }}...

2020-08-05 18:28:03 1667

原创 Antd相关 Table表格自定义点击单元格(列)展开功能

@Antd起初参考网上其它写法，符号+失效需要隐藏，点击事件需要render实现，最奇葩的是代码运行结果失败，点击没效果；研究API进行了改良……改由单元格点击触发事件(不受render内容限制)，且+号功能可同步使用(不用隐藏)。import React from "react";import { Table } from "antd";class TableEx extends React.Component { constructor(props) { super(props)

2020-07-29 16:42:02 3923

原创 VS相关

MS Visual Studio使用汇总1.修改调试IP和端口：IIS Express 文件夹\config\applicationhost.config<bindings> <binding protocol="http" bindingInformation="*:81:localhost" /> <binding proto...

2019-04-26 20:44:23 229

原创 ExtJS各个版本官方API文档

Extjs各个版本官方API文档官方API地址：https://docs.sencha.com/extjs/6.7.0/index.html版本切换方式:官方文档为纯英文文档，需要中文版的朋友可以去中文站查。...

2019-03-20 11:50:39 7186

若木無言